Styles
A style is a set of tokens plus the rules that keep a build inside it. The laws say what works; a style says how it looks. Ask the MCP for one with get_style.
Tide
Flow's own look: a cool foam-grey page, deep teal-black ink, one ultramarine accent, and a characterful grotesque for headings.
page#EEF2EF
surface#FFFFFF
ink#102A2A
muted#52605E
line#C8D2CF
accent#3445E0
breaks#B8430E
follows#0F7656
Type
- display: Bricolage Grotesque, 600–800, tight tracking
- body: Public Sans, 400/600
Rules
- Accent color only for links, focus and the one primary action per view.
- Headings in Bricolage Grotesque with negative tracking; body in Public Sans at 17px / 1.6.
- Panels are white on the foam page with a 1px line border, no drop shadows.
- Red-orange and green are reserved for breaks/follows states, never decoration.
Use it for
- Reference and documentation sites
- Tools where content and examples should carry the page
Builder
Donta's direction C: a calm light-grey stage, white cards, near-black ink and one coral action, with Space Grotesk for everything readable and JetBrains Mono for metadata.
page#F4F5F7
surface#FFFFFF
line#E1E4E8
ink#111418
muted#5D6470
accent#E8674A
Type
- ui: Space Grotesk: UI, headings and body; headings 600 with -0.02em tracking
- meta: JetBrains Mono: metadata and labels, lowercase snake_case (e.g. chats_7d)
Rules
- Space Grotesk for UI, headings and body; headings weight 600 with -0.02em letter-spacing.
- JetBrains Mono only for metadata and labels, written lowercase snake_case (chats_7d, claude-code, main, 2h).
- Coral #E8674A is reserved for the one primary action on a screen (e.g. Continue).
- Cards 14px radius, rows and stat tiles 10px, buttons 8px: squarer than pills.
- White cards with a 1px #E1E4E8 border on the #F4F5F7 stage; no heavy shadows.
Use it for
- Builder and developer-adjacent tools for non-technical people
- AI products that should feel modern and precise without being cold
- Dashboards with lots of small metadata