# For designers

> Colours, type and components that stay on-brand in both products.

## Start here

1. **Pick the product.** Crew OS and the public site are ink; Max is orange. Switch the theme from the header and every swatch, type sample and preview follows.
2. **Build the shell in ink.** Surfaces, text, borders and structure use the neutral tokens (`background`, `foreground`, `muted`, `border`). A hue never decorates the frame.
3. **Colour always means something**: an agent (`dc-*`), the user's choice (`primary`) or a state (`destructive`, the status pills).
4. **Start from a component.** 146 live previews show every state; each page lists the exact sizes, radii, durations and colours.

## Your toolkit

- [Colour & themes](/design/foundations/colour): 102 tokens across four themes, click to copy.
- [Typography](/design/foundations/typography): Cabinet Grotesk, Inter and Instrument Serif, with every style.
- [Spacing, radii & surfaces](/design/foundations/layout) and [Motion](/design/foundations/motion).
- [Components](/design/components): filter by product or family, then open any preview in all four themes.
- [Figma tokens](/design/resources#tokens): the DTCG file imports into Tokens Studio, one set per theme.
- [Logos](/design/brand/logos), [Agents](/design/brand/agents) and [Iconography](/design/brand/iconography).

## Rules to design by

- One agent, one colour. Never reuse an agent's colour for another agent, a status or decoration.
- The mark stays black or white. It never takes a tint.
- Never hard-code the primary: a screen has to work with any primary colour and any workspace logo.
- Sentence case in the products; Title Case only in marketing headings.
- Everything meets the [accessibility](/design/foundations/accessibility) rules: contrast, visible focus, reduced motion.