Design
llms.txt digitalcrew.tech

Foundations

Typography

Cabinet Grotesk for Crew OS, Inter for Max, Instrument Serif for Max's agent surfaces.

Cabinet Grotesk (files in fonts/, weights 100–900; there is no 600 cut, so semibold renders from the Bold file) is the brand face. Crew OS sets everything in it — display, interface and body. Max uses it for display moments (onboarding, the first-day packet) and sets its interface in Inter (Google Fonts, 100–900). Monospace is the system stack (mono).

  • Display: display-hero (60px, medium, tracking −0.05em, balanced and centred) for the one hero line; display-page (48px semibold) for public page titles; display-section (30px bold) for marketing section heads. Scale display sizes down a step per breakpoint (60 → 48 → 36 → 30).
  • Interface: use the crew-* styles in Crew OS and the max-* styles in Max. They share sizes: title 24/32 (Crew semibold, Max bold, both tracking −0.025em), heading 18/28 semibold, body 14/20, body-lg 16/24, caption 12/16, label 14/1 medium, overline 12px semibold uppercase.
  • 14px (*-body) is the default interface size; 12px (*-caption) is the most-used size in Max, for meta lines and tables.
  • Text fields render 16px below the md breakpoint and 14px from md up, so phones don't zoom on focus.
  • Code: code-inline (13.6px on a muted chip, radius 0.4rem) and code-block (12.8px on muted with a border hairline, radius 0.5rem).
  • Max turns on the OpenType features ss01, ss02, cv05 and cv08 for body text; keep them on.
  • Agent surfaces add Instrument Serif (Google Fonts, serif) for greetings and onboarding titles — chat-empty-title (46px) and packet-title (72px), each with a muted italic em — and set messages in chat-message (14.5px / 1.68).
  • Keep text at 12px or larger, body at weight 400 or heavier, and no light weights under 20px. Max's design audit counts 763 uses of 8–11px sizes and asks for one 12px caption style instead: that is debt to pay down, not a pattern to copy.

Display#

Family: --font-cabinet

Build your Digital Worker.
display-hero · 60px / 1 · 500 · -0.05em
Marketing hero h1 at xl (text-6xl font-medium tracking-tighter); steps down to 48, 36 and 30px at smaller breakpoints. Balanced, centred, in primary.
Liberty. Diversity. Reciprocity.
display-page · 48px / 1 · 600 · -0.025em
Public page h1 (integrations, manifesto, blog index) at md; 60px at lg.
Empower Your Team with Digital Workers
display-section · 30px / 36px · 700
Marketing section headings (text-3xl font-bold).

Crew OS interface#

Family: --font-cabinet

Digital Workers
crew-title · 24px / 32px · 600 · -0.025em
Crew OS page titles (text-2xl font-semibold tracking-tight).
Connected tools
crew-heading · 18px / 28px · 600
Section and dialog titles (text-lg font-semibold).
Shape an AI teammate that fits your workflow.
crew-body-lg · 16px / 24px · 400
Lead paragraphs and text fields below md (inputs render text-base on phones so iOS does not zoom).
Pick the role, connect your tools, and watch it ship work alongside your crew.
crew-body · 14px / 20px · 400
Default interface text: table cells, descriptions, buttons (text-sm).
LinkedIn or social profile
crew-label · 14px / 1 · 500
Form labels and Button text (text-sm leading-none font-medium).
Free to start · No credit card · Ready in 2 min
crew-caption · 12px / 16px · 400
Meta lines, badges, table footers (text-xs).
YOUR DIGITAL WORKERS
crew-overline · 12px / 1.5 · 600 · 0.08em
Eyebrows above section titles and settings group titles; always set uppercase, in muted-foreground.

Max interface#

Family: --font-inter

Campaigns
max-title · 24px / 32px · 700 · -0.025em
Max page titles (text-2xl font-bold tracking-tight).
Sender rotation
max-heading · 18px / 28px · 600
Card, sheet and dialog titles (text-lg font-semibold).
Max drafts the follow-up; you approve it.
max-body-lg · 16px / 24px · 400
Chat messages and long-form reading; text fields below md.
No campaigns match. Create a campaign or try another name.
max-body · 14px / 20px · 400
Default Max interface text (text-sm).
Daily sending limit
max-label · 14px / 1 · 500
Form labels and Button text.
Synced 2 min ago
max-caption · 12px / 16px · 400
The most used size in Max (text-xs): table meta, badges, timestamps, helper lines.
APPEARANCE
max-overline · 12px / 1.5 · 600 · 0.08em
Settings group titles; uppercase, in muted-foreground.

Max agent surfaces#

Family: --font-inter

Meet your crew
packet-title · 72px / 0.96 · 400 · -0.025em
Onboarding packet page titles (Instrument Serif, .page__title); 44px on phones.
What should we work on?
chat-empty-title · 46px / 1.02 · 400 · -0.02em
The Max chat empty state (.mx-empty__title), with a muted italic em; clamp(36px, 11vw, 46px) on phones.
I found 12 accounts that match your ICP and drafted an opener for each.
chat-message · 14.5px / 1.68 · 400 · -0.005em
Max's messages (.mx-bubble), the composer text and onboarding bubbles: prose, no box.
Used 3 tools · 4s
chat-meta · 11px / 1.3 · 500
Row meta, tool-call states and badges on agent surfaces, in mx-ink-3.
STEP 2 OF 5
mono-eyebrow · 10.5px / 1 · 500 · 0.14em
Onboarding packet eyebrows and field labels (.eyebrow, .field-label); uppercase, in the dimmest readable ink.

Code#

Family: --font-mono

workspace_id
code-inline · 13.6px / · 400
Inline code in editors and docs (0.85rem) on a muted chip, radius 0.4rem.
npm --prefix packages/ui run build
code-block · 12.8px / · 400
Code blocks (0.8rem) on muted with a border hairline, radius 0.5rem.