Brand Guidelines
Visual identity, colour palette, typography, and tone of voice for Formulate.
Logo
The Formulate logomark represents a maintenance cycle — three interlocking arc-and-chevron segments rotated 120°, symbolising the cyclical nature of CBT formulation. Use the logomark at a minimum size of 24px and ensure adequate clear space around it.
64px — Standard
32px — Compact
White on dark
- Minimum size: 24px for the mark — below this the chevrons lose legibility.
- Clear space: keep clear padding of at least one arc-segment’s height (≈¼ of the mark) on all sides.
- On dark: use the white mark (
color="#ffffff"); the amber mark on charcoal lacks contrast. - Wordmark: “formulate” is always lowercase, DM Sans semibold, tracking-tight.
- Don’t double up: the logo appears once per view. If the nav carries it, the page body shouldn’t repeat a large hero logo.
Colour Palette
Brand
Brand
#e4a930
Brand Light
#fdf6e3
Brand Dark
#c48d1e
Brand Text
#7a5610
On Brand
#1a1a1a
Primary
50
#fafaf8
100
#f1f0ee
200
#e8e8e6
300
#d4d4d0
400
#767676
500
#666666
600
#595959
700
#444444
800
#2d2d2d
900
#1a1a1a
950
#111111
Semantic
Success
#15803d
Warning
#e4a930
Danger
#dc2626
Info
#3b82f6
Giving
Giving
#f43f5e
Giving Light
#fff1f2
Giving Text
#be123c
Typography
Display register — for hero & affirming moments
Calm clinical confidence.
One display face — Fraunces — carries the brand’s voice at the largest sizes: the homepage hero, section openers on long marketing pages, and the one affirming moment per page. It adds editorial gravitas and warmth without a second brand colour. Display is the only place a serif appears. Use it sparingly — one display moment per page — via thefont-display utility.
Never in the app UI, worksheets, forms, tables, or PDF/export — those stay DM Sans.
DM Sans is the single workhorse face — app, worksheets, and body copy everywhere. A geometric sans-serif with open apertures that balances clinical professionalism with warmth.
Body size rule
Default body is 16px (text-base) — reading, marketing, and forms. 14px (text-sm) is the dense-UI step for tables, dashboards, and controls — not the default. Inputs render at 16px on mobile regardless, to prevent iOS zoom.
Tone of Voice
We are
- Clinical — evidence-based, precise, grounded in CBT models
- Warm — approachable, encouraging, non-judgemental
- Clear — plain language, minimal jargon, scannable
- Empowering — therapist as expert, tools that support clinical judgement
We avoid
- Prescriptive — we don’t dictate how to practise
- Overly casual — no slang, emojis, or excessive exclamation marks
- Marketing-heavy — features speak for themselves
- Simplistic — we respect clinical complexity
UI Components
Buttons
All five variants are the shared buttonVariants (button-variants.ts) — 44px-min targets, focus rings, and dark-mode handling built in. Don’t hand-roll button classes.
The accent’s job: the single next action
The amber Accent button marks one action per surface — the affirming, forward step of the journey (sign up, start trial, upgrade, consent, begin). Its label uses the on-brand ink token (charcoal, AA-passing on amber) — never text-[#6b4d0f] or white, both of which fail contrast on the amber fill.
- Primary (charcoal) — the main action on a working surface (save, generate, export).
- Secondary — alternative or lower-priority actions alongside a primary.
- Ghost — tertiary / inline actions; no visual weight.
- Danger — destructive actions only (delete, cancel subscription, remove).
Semantic colour vocabulary
Beyond brand amber and the charcoal scale, four colour families are allowed — each with one meaning. They carry meaning, never decoration: a colour family appears only when its meaning applies, as a tint background + border + label (not as filled buttons or large areas).
Amber — instruction & caution
Therapist instructions, warnings, pending states. (Brand = warning; reserve large amber areas for the accent action.)
Green — success & clinical context
Completion, positive status, and clinical-contributor content.
Blue — guidance & information
Structured how-to guidance and neutral informational highlights.
Rose — giving
Charitable-giving surfaces only (donations, charity partners). Never a general accent.
Red (danger) is reserved for errors and destructive actions. If content fits none of these meanings, it is charcoal — not a new colour.
Badges
The shared Badge primitive — pill labels for categories and status. Tints carry meaning (§14.3); solid uses the AA-safe on-brand ink on amber.
Cards
Example Card
The shared Card primitive — rounded-2xl, border, optional shadow.
Elevation signals importance: most cards sit flat (border only). Reserveelevated (shadow-sm) for the one card that matters most on a screen. Don’t give every card the same weight — if everything is elevated, nothing is.
Hierarchy & Rhythm
A page should crescendo — build emphasis through space, scale, and weight, not through colour. Calm by default; one moment of intensity where it counts.
- Section rhythm: separate major sections with generous, consistent vertical space (
py-16–py-24on marketing). Alternate plain and tinted (bg-primary-50/100) backgrounds to mark the beat. - One differentiated moment: every long page earns exactly one stand-out moment — the display-register hero, or one full-bleed / elevated band — not a stack of identical cards.
- Scale & weight do the work: establish hierarchy with size and weight steps from the type scale; avoid same-size, same-weight headings repeating down the page.
- Elevation = importance: flat by default,
shadow-smfor the single most important element per view. - One accent per view: a single amber action leads; everything else recedes to charcoal/secondary.