Branding & Assets
The Assets tab on the Design System hub holds your brand identity: logos, wordmarks, favicons, and custom fonts. Everything uploaded here is exported in the AI kit and referenced by Explorer variants.
What you can upload
| Asset | Formats | Notes |
|---|---|---|
| Primary logo | SVG, PNG | Used wherever a variant needs “the logo”. Upload light and dark versions. |
| Wordmark | SVG, PNG | Typographic-only logo. Variants fall back to this in tight headers. |
| Favicon | SVG, PNG, ICO | Square. Used in browser-chrome mockups and tab previews. |
| Custom fonts | .woff2, .woff, .ttf, .otf | Max 5 MB per file. Injected into previews, exported with the kit. |
How variants reference brand assets
Explorer generations that need your logo render it as an <img> tag with a data-brand-logo attribute. The preview pipeline swaps in the real uploaded asset before rendering, so you see your actual logo in place of the placeholder.
Generated variant TSX
<header className="...">
<img data-brand-logo="primary" alt="Logo" />
<nav>...</nav>
</header>
Upload light and dark variants of the primary logo. Variants in dark mode will automatically pick the dark logo when rendering.
In the exported AI kit
When you export the bundle, brand assets appear in two places:
- /assets/ — the raw files (SVGs, PNGs, fonts), referenced by relative paths in layout.md.
- layout.md — a generated Brand Assets section lists every uploaded file with its filename, type, and when to use it. Agents read this before writing JSX that needs a logo or wordmark.
Custom fonts
Drag a .woff2 (or other supported font file) into the Assets tab. Layout will:
- Generate the
@font-facedeclaration and inject it into every preview. - Include the file in the exported ZIP under
/assets/fonts/. - Make the font name resolvable in typography tokens, so Cursor, Claude Code, and others can reference it by name.
System fonts are auto-detected during extraction. Custom fonts must be uploaded here to travel with the kit.
Related
- Design System Hub — the Tokens, Assets, Context, and Editor tabs in one workspace.
- Product Context — attach brand voice and copy guidelines alongside visual assets.