Add Brand Assets#

The header already uses Acme-owned SVG files. Add a Page that documents those assets so other Site Authors know which files belong to the docs site and how to reference them.

Create the brand Page#

Create docs/pages/brand.rocket.md:

```js server
export const config = {
  path: '/brand',
  metadata: { title: 'Brand assets' },
  menu: {
    order: 15,
  },
};

import { resolve } from '@rocket/js/resolve.js';
import { layout } from '../docsLayout.js';
export { components } from '../docsLayout.js';

const mark = resolve('../assets/acme-mark.svg', import.meta);
const wordmark = resolve('../assets/acme-wordmark.svg', import.meta);
```

# Brand Assets

Use these assets when a documentation Page needs to identify Acme UI.

## Primary mark

<img src="${mark}" alt="Acme UI mark" width="96" />

## Wordmark

<img src="${wordmark}" alt="Acme UI Docs wordmark" width="180" />

The asset files stay in docs/assets/, and the Page resolves them from the Page's own server code. That keeps paths explicit and portable across development and build output.

Add author guidance#

Extend the same Page with a short rule:

## Usage

- Use the mark in compact navigation.
- Use the wordmark when there is enough horizontal space.
- Do not copy Rocket's own documentation logos into Acme UI Docs.

Checkpoint#

Run the development server and visit /brand:

npm run start

You now have branded header assets and a content Page that documents those same user-owned files. Continue with Assets when you need images, CSS, or package assets beyond this basic pattern.

Contents

Add Brand Assets#

Create the brand Page#

Add author guidance#

Checkpoint#