Design-system export

Every brand book can be exported as a single design-system zip.

Where to download

• Your brand book microsite — the "Download design system (.zip)" button in the overview section (available to anyone once the brand book is published).
• The app — your brand's General settings page has the same download, and it works for unpublished drafts too.
• Via MCP — the get_design_system tool returns the download URL plus the design tokens inline.

What's inside

acme-design-system.zip
├── README.md                  # import instructions
├── brand-guide.md             # identity, voice do/don'ts, color & logo usage notes
├── tokens/design-tokens.json  # W3C DTCG design tokens
├── css/brand.css              # CSS custom properties + @font-face + Google Fonts imports
├── logos/                     # every logo, organized by kind and variant
└── fonts/                     # custom font files + google-fonts.json

Use with Claude Design

Claude Design can adopt your design system. In its design-system setup, unzip the export and add the folder under "Add fonts, logos and assets". The brand guide, tokens, CSS, and assets give Claude everything it needs to design on-brand — then every project it generates uses your colors, type, and logos.

Use with Figma

tokens/design-tokens.json follows the W3C Design Tokens (DTCG) standard. Import it with any DTCG-compatible plugin — e.g. Tokens Studio (Import → Token file) — to get your palette (including shade ramps) and typography as Figma variables. Drag the SVG logos straight onto the canvas.

We deliberately export DTCG tokens instead of a .fig file: .fig is an undocumented internal format that Figma changes without notice, while DTCG is the stable, vendor-supported interchange standard.

Use in a codebase

css/brand.css drops into any web project (CSS custom properties like --color-ocean-blue, --font-heading), and the tokens file feeds design-token pipelines like Style Dictionary.