Collective Navy
#0c2764Primary headings, primary CTA button fill, brand mark, active navigation — the only saturated color on the page, used to anchor identity and signal action
Raise
opencollective.comWebsite preview
The design language
Open Collective's design language is a sunlit open ledger: a near-white canvas, hairline cool-gray dividers, and one deep navy that does all the chromatic work. Headlines carry the brand — oversized, weight 800, tightly tracked Inter at 60–72px — sitting directly on white with no panel behind them, so type itself becomes the hero. Body copy stays in a compact, near-black ink, never pure black, giving the financial content a softer documentary feel. Soft watercolor illustration breaks up the financial density with human warmth; UI chrome stays minimal, with 12px radii and a single subtle card shadow. Color is rationed like ink: the navy is the only saturated hue, used for headings, primary actions, and the brand mark — everything else is neutral.
Color palette
brand
neutral
Inkwell
#0f172bPrimary body text, high-emphasis copy, button text on light backgrounds, icon strokes — the default text color across nearly all contexts
Slate Ink
#1d293dSecondary headings, icon strokes, body text where slightly lighter weight is needed
Pencil Graphite
#314158Tertiary headings and supporting labels, slightly softer than Inkwell for hierarchy breaks
Muted Slate
#45556cSecondary body text, list items, captions that need to remain readable but recede
Distant Mist
#62748eMuted helper text, secondary icons, tertiary link color — supporting information that should not compete with primary content
Frost Border
#e2e8f0Hairline borders, card outlines, input borders, dividers, table separators — the structural neutral, used at extremely high frequency
Silver Whisper
#c3c6cbSubtle placeholder text, disabled chrome, decorative dividers
Paper White
#ffffffPage canvas, card surfaces, button fills, input fields — the dominant surface color
Typography
Type scale
Minor Third (1.2) · 16px basedisplay
72px · 800 · 1 · -1.8px trackingThe quick brown fox jumps
heading-lg
60px · 700 · 1.2 · -1.5px trackingThe quick brown fox jumps
heading
40px · 700 · 1.2The quick brown fox jumps
heading-sm
32px · 700 · 1.25The quick brown fox jumps
subheading
20px · 400 · 1.4The quick brown fox jumps
body
18px · 400 · 1.63The quick brown fox jumps
body-sm
16px · 400 · 1.5The quick brown fox jumps
caption
14px · 400 · 1.5The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Inter
- Weights
- 400, 500, 600, 700, 800
- Sizes
- 14px, 16px, 18px, 20px, 32px, 40px, 60px, 72px
- Line height
- 1.00–1.71 depending on role
- Letter spacing
- -0.025em across all sizes (tightened tracking from 14px upward)
- Fallback
- DM Sans, IBM Plex Sans
- Features
- "calt" on, "rlig" on (default contextual alternates and ligatures — no stylistic sets or tabular numerals enabled)
Single-family system: weight 800 at 60–72px for hero/display headlines (signature — no separate display face), weight 700 for H1–H2, weight 600 for subheadings and button labels, weight 500 for nav and labels, weight 400 for body. The use of a single neo-grotesque across all roles, leaning on extreme weight contrast (400 vs 800) rather than a second typeface, gives the system a calm, documentary feel.
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 8px
- Max width
- 1200px
- Section gap
- 48-80px
- Card padding
- 32px
- Element gap
- 16px
Border radius
tags
12pxcards
12pxbadges
12pxinputs
12pxbuttons
12pxSpacing scale
2px4px8px10px12px16px24px30px32px40px41px48px64px73px96px121px256pxGuidelines
Do
- Use #0c2764 as the only saturated color on the page — for headlines, the brand mark, and the primary CTA fill
- Set headlines at 60–72px weight 800 with -0.025em letter-spacing; the oversized type is the primary visual anchor
- Separate cards with 1px #e2e8f0 borders and the standard card shadow; do not use multiple shadow layers
- Apply 12px radius consistently to buttons, cards, inputs, and badges — avoid mixing in 4px or 8px radii
- Use the full Inter weight range (400–800) for hierarchy rather than introducing a second typeface
- Pad cards with 32px and stack section content with 48–80px vertical gaps for breathing room
- Keep body text in #0f172b (Inkwell), not pure black; muted helper copy in #62748 (Distant Mist)
Don’t
- Do not introduce additional saturated colors — the navy must remain the sole chromatic anchor
- Do not use heavy elevation (no deep shadows, no glow effects) — separation comes from hairline borders
- Do not use a second display typeface; hierarchy is achieved through weight and size, not font pairing
- Do not place hero headlines on colored panels or gradient backgrounds — they sit directly on white
- Do not use 4px or 8px radii on buttons and cards — 12px is the system standard
- Do not use pure #000000 for text; use #0f172b to keep the documentary softness
- Do not crowd the page with UI chrome — the design relies on whitespace and typographic weight for structure
Components
Top Navigation Bar
Global header navigationWhite background, 1px Frost Border (#e2e8f0) bottom. Left: brand mark (navy 'C' logomark + 'open collective' wordmark in Inkwell #0f172b, 16px weight 600). Center: nav links in Inkwell at 16px weight 500, with chevron-down icons on dropdowns. Right: 'Log In' as a ghost text button, 'Sign Up' as a filled navy (#0c2764) button, white text, 12px radius, 8px 16px padding, 16px weight 600.
Filled Primary Button
Primary action / CTABackground #0c2764, text #ffffff, 12px radius, 10px vertical / 16px horizontal padding (compact), Inter 16px weight 600, letter-spacing -0.025em. No border. Hover darkens the navy slightly. Used for 'Sign Up' and equivalent high-intent actions.
Ghost Text Button
Secondary action or nav-level actionTransparent background, no border, text in Inkwell #0f172b at 16px weight 500. No fill change on rest; underline or weight bump on hover. Used for 'Log In' in the header and tertiary in-page actions.
Outlined Action Button (Approve)
Inline positive action inside a cardWhite background, 1px border in #e2e8f0, 12px radius, small padding (~6px 12px), Inter 14px weight 500, text in Inkwell. Includes a small green check icon (the only place green appears in the UI). Sits inside expense approval cards.
Outlined Action Button (Reject)
Inline negative action inside a cardSame structure as Approve — white fill, 1px #e2e8f0 border, 12px radius — but text in a muted red/error tone with a small cross icon. Visually paired with Approve as a binary choice group.
Expense Approval Card
Line-item display for pending/approved expenses in a feedWhite surface, 1px Frost Border (#e2e8f0), 12px radius, 32px internal padding. Layout: left column has a 32px circular avatar, expense title in Inkwell 16px weight 600, category metadata line below in Muted Slate 14px weight 400, 'X days ago' timestamp in Distant Mist. Right column: amount in Inkwell 16px weight 600, currency subtitle below, and a status pill. When pending, the right side shows the Approve/Reject button group. A single subtle card shadow may sit behind it.
Balance Summary Card
Aggregated financial displayWhite surface, 1px Frost Border, 12px radius, 32px padding. Section labels in Muted Slate 14px weight 500 (uppercase or sentence case tracked tight). Values in Inkwell at 32px weight 700, with USD currency in a lighter weight beside. Multiple balance rows stacked with 16–24px vertical gaps. No charts or gradients — the typographic hierarchy alone communicates the data.
Status Pill Badge
State indicator for expenses and items12px radius (pill-like but squared at this radius), small padding ~2px 8px, Inter 12px weight 600, uppercase, with tight letter-spacing. 'APPROVED' uses a very light green tint background with a darker green text. 'PENDING' uses a soft amber/yellow tint with amber text. Both are low-saturation washes — not loud, just enough to scan.
Search Input
Header-level search affordanceNo visible border; shows a small search icon in Distant Mist followed by the word 'Search' in the same color, at 16px weight 500. Behaves as a quiet trigger rather than a visible input field — click expands it.
Nav Dropdown Trigger
Platform / Solutions / Resources category linksText label in Inkwell 16px weight 500, followed by a small chevron-down icon in Distant Mist, both vertically centered. No border, no background. On hover or open, text weight may shift or an underline appears.
Hero Headline
First-screen headlineInter 60–72px weight 800, color #0c2764 (navy), letter-spacing -0.025em, line-height 1.00–1.20, centered. Sits directly on the white page canvas with no background panel — the color and weight alone create the hero zone. Typically two lines, each line centered.
Hero Subtext
Supporting paragraph below the hero headlineInter 18px weight 400, color #314158 (Pencil Graphite), line-height 1.63, max-width ~640px, centered. Quiet enough to read as supporting copy, dark enough to remain a primary reading target.
Watercolor Illustration Insert
Atmospheric graphic accent beside UI cardsHand-drawn watercolor style illustration of a person or scene, soft pink and gray washes, organic edges, no defined container or frame. Sits behind or beside product UI cards in the hero, creating warmth against the otherwise typographic layout. Not a repeatable component — a signature scene used in hero compositions.
Surfaces & elevation
Level 0
Paper White
#ffffffPage canvas — the default background everywhere; even cards often sit directly on white with only a border or shadow to separate
Level 1
Cloud Mist
#f1f5f9Subtle elevated surface for nested elements or alternate bands (inferred from contrast pair analysis and surface stack)
Level 2
Card White
#ffffffContent cards — same as canvas but visually separated by a 1px Frost Border (#e2e8f0) and/or the standard card shadow
Level 3
Navy Surface
#0c2764Branded surfaces — CTA buttons, brand-mark backgrounds, and any element requiring visual weight
Elevation is used sparingly: a single soft drop shadow on content cards and on the hero illustration stack, otherwise surfaces are separated by hairline borders (#e2e8f0) alone. The design avoids heavy elevation stacks — no lifted buttons, no multi-layer shadows. Cards float just enough to feel physical, never enough to feel modal.
Content card / expense card
rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px
Layout & imagery
Layout
The page is max-width contained (~1200px) on a white canvas, centered. The hero is a centered text stack: oversized navy headline (60–72px, two lines), then a centered subtext paragraph (~640px max-width), then a composition of UI cards (expense list on the left, balance summary on the right) overlapping with a watercolor illustration that bleeds outside the card edges. Navigation is a single sticky top bar with logo left, links center, auth actions right. Below the hero, the rhythm alternates between generous whitespace sections and card grids — typically 2-column or 3-column layouts with consistent 48–80px section gaps. Content is image-light and text-heavy, with whitespace doing the work of visual separation. No sidebar navigation, no mega-menus, no dark sections — the entire page lives on white.
Imagery
The site pairs a typographically dominant layout with a single signature watercolor illustration in the hero — a hand-drawn figure (person with curly hair holding a loupe over a document) rendered in soft pink and gray washes with organic, unframed edges. The illustration is decorative atmosphere, not a product showcase, and breaks up the financial density of approval cards and balance displays. Outside the hero, the site is essentially text-only: no product screenshots, no stock photography, no abstract graphics. Icons are minimal and outlined, drawn at 1.5–2px stroke weight in Inkwell or Distant Mist, never filled or multicolored. The overall visual density is low — the page reads as a document more than an app screen, with illustration providing the only organic visual relief.
Design notes
Agent Guide
**Quick Color Reference** - Background: #ffffff (Paper White) - Border: #e2e8f0 (Frost Border) - Text: #0f172b (Inkwell) - Muted text: #62748e (Distant Mist) - Accent / brand: #0c2764 (Collective Navy) - primary action: #0c2764 (filled action) **Example Component Prompts** 1. **Hero section**: White background. Headline at 60px Inter weight 800, color #0c2764, letter-spacing -0.025em, line-height 1.20, centered, two lines. Subtext below at 18px Inter weight 400, color #314158, line-height 1.63, max-width 640px, centered. No background panel — the headline sits directly on white. 2. **Filled primary button**: Background #0c2764, text #ffffff, Inter 16px weight 600, letter-spacing -0.025em, 12px border-radius, padding 10px vertical / 16px horizontal, no border. Use for 'Sign Up' or equivalent high-intent actions. 3. **Ghost text button**: Transparent background, no border, text #0f172b at 16px weight 500. Use for 'Log In' or tertiary nav actions. 4. **Expense approval card**: White surface, 1px border #e2e8f0, 12px radius, 32px padding, subtle shadow (rgba(0,0,0,0.1) 0px 10px 15px -3px). Left: 32px circular avatar, title at 16px weight 600 in #0f172b, metadata at 14px weight 400 in #62748e. Right: amount at 16px weight 600 in #0f172b, status pill (12px radius, tinted background), and an Approve/Reject button group when pending. 5. **Balance summary card**: White surface, 1px border #e2e8f0, 12px radius, 32px padding. Section labels in #62748e at 14px weight 500. Values in #0f172b at 32px weight 700. Stack rows with 24px vertical gaps. No charts — typographic hierarchy only.
Tonal Discipline
The system operates on a strict one-color budget: Collective Navy (#0c2764) is the only saturated hue, and it must earn its placement. Every other element lives in the neutral scale from Frost Border (#e2e8f0) through Distant Mist (#62748e) to Inkwell (#0f172b). Status badges introduce muted tints (soft green for approved, soft amber for pending) — these are the only departures from grayscale, and only at small badge scale. Any design that adds a new saturated color should be questioned: does the system need it, or is the navy doing the job?
Similar brands
Stripe
Same max-width centered layout, oversized weight-700+ headlines on white, and a single saturated brand color doing all the chromatic work
Plaid
Similar light-canvas financial interface with oversized serifless headlines, hairline borders, and minimal elevation
Mercury
Shared approach of generous whitespace, white surfaces, 12px radii, and typographic hierarchy as the primary visual structure
Notion
Same Inter typeface system, soft neutral palette, hairline divider-led separation, and illustration accents breaking up dense data
Gusto
Same approachable financial-tool tone — light theme, single brand accent, hand-drawn warmth, no heavy shadows or panels
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
