Get started
For designers
Colours, type and components that stay on-brand in both products.
Start here#
- 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.
- Build the shell in ink. Surfaces, text, borders and structure use the neutral tokens (
background,foreground,muted,border). A hue never decorates the frame. - Colour always means something: an agent (
dc-*), the user's choice (primary) or a state (destructive, the status pills). - Start from a component. 146 live previews show every state; each page lists the exact sizes, radii, durations and colours.
Your toolkit#
- Colour & themes: 102 tokens across four themes, click to copy.
- Typography: Cabinet Grotesk, Inter and Instrument Serif, with every style.
- Spacing, radii & surfaces and Motion.
- Components: filter by product or family, then open any preview in all four themes.
- Figma tokens: the DTCG file imports into Tokens Studio, one set per theme.
- Logos, Agents and 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 rules: contrast, visible focus, reduced motion.