# Spyglasses — Design System

Generated by Orchestra Sites from this brand's brand book.

## What's inside

- `brand-guide.md` — identity, voice (with do/don't rules), color and logo usage notes.
- `tokens/design-tokens.json` — W3C DTCG design tokens (colors with shades, gradients, typography).
- `css/brand.css` — ready-to-use CSS custom properties, Google Fonts imports, and `@font-face` rules pointing at the bundled font files.
- `logos/` — every logo format, organized by kind and variant.
- `fonts/` — custom font files, plus `google-fonts.json` for Google-hosted families.

## Using this with Claude Design

Drop this unzipped folder into Claude Design's design-system setup (claude.ai/design → "Add fonts, logos and assets"). The brand guide, tokens, and assets give Claude everything it needs to design on-brand.

## Using this with Figma

Import `tokens/design-tokens.json` with any DTCG-compatible tokens plugin (e.g. Tokens Studio: Import → Token file) to get the palette and typography as Figma variables. Logo SVG/PNG files can be dragged straight onto the canvas.

Live brand book: https://brand-book.spyglasses.io
