Spruce 700
#0b363bPrimary CTA fill on dark backgrounds, elevated card surfaces, border accent
Customer.io
customer.ioWebsite preview
The design language
Customer.io uses a deep forest palette anchored in near-black spruce greens, creating a page that feels like dark pine on warm paper. Typography is custom Saans at near-uniform weight 475 — an unusual medium-light voice that avoids the typical SaaS shout of bold headings, instead making 96px display text feel architectural and quietly authoritative. Color appears sparingly as functional punctuation: a vivid verdant green glow marks interactive elements, while warm cream surfaces and soft blue washes tint alternate sections. The system is built on thin 1px borders, minimal elevation, pill-shaped primary buttons, and 2px corner radii everywhere else — a flat, almost editorial product surface.
Color palette
brand
Verdant 300
#abffaeInteractive glow — CTA button fill, focus ring halo, active state border; vivid green signals action without aggression
accent
Spruce 500
#437278Muted teal accent — illustration fills, secondary icon color
Verdant Whisper
#eafde8Primary page canvas and white card surfaces. Use as a supporting accent, not as a status color
Wave 700
#123a88Violet text accent for links, tags, and emphasized short phrases.
Wave 500
#0a6de6Heading accent color for keyword highlights in display text
Wave Frost
#e2f4ffHairline borders, dividers, input outlines, and card edges on light surfaces. Use as a supporting accent, not as a status color
Zest 700
#863d1cOrange text accent for links, tags, and emphasized short phrases.
Mustard 700
#83611cYellow text accent for links, tags, and emphasized short phrases.
neutral
Spruce Abyss
#00191cDeepest background — footer canvas, dramatic section breaks
Spruce 900
#032125Primary dark surface — headers, hero, main navigation background; dominant text color on light surfaces
Spruce 200
#a1c2c6Decorative stroke, muted link text, icon outlines on dark surfaces
Spruce Mist
#354d51Body text on light surfaces, secondary heading color
Charcoal 100
#ebebebHairline borders, dividers, subtle separators across the interface
Charcoal Mist
#fafafaAlternate section background, subtle card backgrounds
Cream Warm
#fffcf6Primary light surface — content sections, card backgrounds
Pure White
#ffffffElevated card surface, button text on dark fills, content blocks
Zest Blush
#fdf0e9Hairline borders, dividers, input outlines, and card edges on light surfaces. Use as a supporting accent, not as a status color
Typography
Type scale
Minor Third (1.2) · 15px basedisplay
96px · 475 · 1 · 0.19px trackingThe quick brown fox jumps
text-48
48px · 475 · 1.13The quick brown fox jumps
heading-lg
40px · 475 · 1.13 · 0.2px trackingThe quick brown fox jumps
heading
30px · 475 · 1.13 · 0.21px trackingThe quick brown fox jumps
heading-sm
24px · 475 · 1.13 · 0.19px trackingThe quick brown fox jumps
subheading
20px · 600 · 1.13 · 0.2px trackingThe quick brown fox jumps
text-18
18px · 475 · 1.38The quick brown fox jumps
body
16px · 475 · 1.38 · 0.21px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Saans
- Weights
- 475, 500, 600, 700
- Sizes
- 10px, 12px, 14px, 16px, 18px, 20px, 24px, 30px, 40px, 48px, 96px
- Line height
- 1.00 (display), 1.13 (headings), 1.38 (body)
- Letter spacing
- 0.0020em at 96px, 0.0040em at 48px, 0.0050em at 40px, 0.0070em at 30px, 0.0080em at 24px, 0.0100em at 20px, 0.0110em at 18px, 0.0130em at 16px, 0.0140em at 14px, 0.0170em at 12px, 0.0200em at 10px
- Fallback
- Inter, Helvetica Neue, Arial
Custom display + body typeface used for everything. Weight 475 dominates — a near-medium voice that feels calm and confident rather than aggressive.
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 96px
- Card padding
- 32px
- Element gap
- 24px
Border radius
tags
2pxcards
2pximages
6pxinputs
2pxbuttons
9999pxdefault
2pxSpacing scale
1px2px4px5px6px8px10px12px16px20px24px28px32px40px48px53px64px72px80px96px128px166pxGuidelines
Do
- Use 2px border-radius on all cards, inputs, images, and containers — pill shapes (9999px) are reserved exclusively for buttons
- Use weight 475 for all text including 96px display headlines — never bold above 600 except for 20px subheadings
- Use 1px solid #ebebeb hairline borders for card edges and dividers — never thicker
- Color individual words in display headlines using #863d1c (orange), #123a88 (blue), #41a251 (green), #b52473 (pink) — words stay inline, never separate blocks
- Use #abffae exclusively for primary CTA fills and focus glow rings — never as body text or background tint
- Use 24px for element gaps, 32px for card padding, 96px for section vertical gaps — the 4px base unit scales through these three tiers
- Use #fffcf6 as the default light surface; alternate to #032125 for dark sections; tint with #e2f4ff, #fdf0e9, or #eafde8 for semantic accent bands
- Use 4px colored focus glow rings (0px 0px 0px 4px) for interactive focus states instead of outline or shadow changes
Don’t
- Never use drop shadows for elevation — depth comes from colored 4px glow rings only
- Never use bold weights above 600 for display or heading text — the signature is the calm 475 voice
- Never use corner radius above 2px on non-button elements — sharp-cornered cards define this system
- Never use #0000ee or default browser blue for links — links use #032125 or #a1c2c6
- Never place #abffae on white or light backgrounds without sufficient contrast — it is a glow color, not a fill
- Never use more than 4 columns in content grids — the system favors generous spacing over density
- Never use the heading accent colors (#863d1c, #123a88, etc.) for UI chrome — they exist only for inline keyword coloring in display text
Components
Primary Pill Button
Main CTA — 'Get started'Pill shape (9999px radius), Verdant 300 (#abffae) background, Spruce 900 (#032125) text at 16px weight 475, padding 8px 20px, 4px Verdant glow shadow ring on hover/focus
Secondary Outline Button
Secondary CTA — 'Book a demo'Pill shape (9999px radius), transparent background, Spruce 900 (#032125) text at 16px weight 475, 1px Spruce 700 (#0b363b) border, padding 8px 20px
Ghost Navigation Button
Nav item with dropdownTransparent background, Spruce 900 text at 16px weight 475, no border, padding 0 16px, chevron indicator
Small Tag Button
'New' badge, 'case study' link2px radius, subtle background tint, Mustard 700 (#83611c) text at 12-14px weight 475, padding 4px 8px
Content Card
Feature card, platform overview tile32px padding all sides, Pure White (#ffffff) background, 1px Charcoal 100 (#ebebeb) hairline border, 2px corner radius, no shadow
Dark Section Card
Card on dark spruce background32px padding, Spruce 700 (#0b363b) background, 1px Spruce 700 border, 2px radius, Spruce 200 (#a1c2c6) body text
Tinted Feature Surface
Section background with soft color washFull-bleed tinted background — Wave Frost (#e2f4ff), Zest Blush (#fdf0e9), or Verdant Whisper (#eafde8), 2px radius containers inside, generous 96px vertical padding
Footer Column
Footer link column4-column grid on Spruce Abyss (#00191c) background, white heading text at 16px weight 600, Spruce 200 (#a1c2c6) link text at 14px, 24px row gap
Logo Strip Card
Customer logo in trust stripPure White background, 1px Charcoal 100 border, 2px radius, logo centered, no padding variation; arranged in horizontal marquee
Heading with Keyword Accent
Display headline with colored words96px Saans weight 475, Spruce 900 base text with individual words in Zest 700 ('messaging'), Wave 700 ('AI'), Wave 500 ('AI'), Verdant 600 ('data'), Nova 500 ('customers') — words stay inline, color creates semantic meaning
Trust Indicator Row
Social proof list — '14-day free trial'Inline list with checkmark icon (Verdant 300), Spruce 900 text at 14px, separated by 16px gaps, no bullet markers
Interactive Product Preview
Hero product screenshotLarge product UI screenshot with browser chrome, set against a warm interior photography background with green plant, no border or shadow — raw edges blending into scene
Status Badge
'All Systems Operational' indicatorSmall green dot (2px radius circle, Verdant 300 fill) beside white text at 12px weight 500
Surfaces & elevation
Level 0
Spruce Abyss
#00191cDeepest canvas — footer and dramatic section breaks
Level 1
Spruce Dark
#032125Primary background for headers, hero, and major sections
Level 2
Spruce Mid
#0b363bCard surfaces, elevated panels, button fills on dark backgrounds
Level 3
Cream Warm
#fffcf6Primary light surface for content sections, card backgrounds
Level 4
Charcoal Mist
#fafafaSubtle alternating background tint
Level 5
Zest Blush
#fdf0e9Warm accent wash for feature callouts
Level 6
Verdant Whisper
#eafde8Soft green tint for success-related surfaces
Level 7
Wave Frost
#e2f4ffSoft blue tint for info-related surfaces
Level 8
Pure White
#ffffffTopmost surface — elevated cards, content blocks
No traditional drop shadows. Elevation is expressed exclusively through 4px colored glow rings around focused interactive elements — Verdant green for primary CTAs, white for secondary CTAs on dark surfaces, Spruce for dark-surface buttons. Surfaces are flat; depth comes from color contrast and hairline borders, not shadow stacking.
Primary Pill Button (focus)
0px 0px 0px 4px oklch(0.9263 0.136 145.2) — 4px Verdant glow ring
Secondary Button (focus)
0px 0px 0px 4px oklch(0.97 0 0) — 4px white glow ring
Dark Section Button (focus)
0px 0px 0px 4px oklch(0.3068 0.046 206.34) — 4px Spruce glow ring
Layout & imagery
Layout
Full-bleed sections that alternate between dark Spruce 900 (#032125) and warm cream (#fffcf6) backgrounds. Hero is left-aligned text block occupying ~40% width with product screenshot occupying right ~60%, set against photographic backdrop. Content sections use centered 1200px max-width containers with 96px vertical section gaps. Trust strip uses horizontal marquee of monochrome logos. Footer is full-bleed dark with 4-column grid of links. Navigation is a 64px-tall sticky top bar with logo left, centered nav items, and sign-in + CTA cluster right. Key sections are full-viewport-width colored bands rather than card grids.
Imagery
Warm interior photography with greenery as the backdrop for the hero product preview — a person working at a desk with potted plants, soft natural light, slightly desaturated warm tones. Product screenshots are presented raw without device frames or shadows, blending directly into the photographic background. The brand mark uses a geometric double-chevron arrow symbol in Spruce 900. No illustrations — the visual language is photography + product UI + typography-driven keyword coloring in headings. Logo strip is monochrome black marks on white. The overall density is moderate: generous whitespace in hero, information-dense footer with 4-column link structure.
Design notes
Agent Guide
**Quick Color Reference** - text (primary): #032125 - text (secondary): #354d51 - text (muted/link): #a1c2c6 - background (light): #fffcf6 - background (dark): #032125 - border (hairline): #ebebeb - accent (highlight keywords in headings): #863d1c - primary action: #0b363b (filled action) **Example Component Prompts** 1. **Hero headline**: Render at 96px Saans weight 475, line-height 1.0, color #032125, letter-spacing 0.0020em. Use the word 'messaging' in #863d1c and 'AI' in #123a88 as inline accent colors within the same line. 2. Create a Primary Action Button: #0b363b background, #ffffff text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA. 3. **Dark section card**: Background #0b363b, 32px padding all sides, 2px corner radius, 1px #0b363b border, body text #a1c2c6 at 16px weight 475, heading in white at 24px weight 475. 4. **Trust indicator row**: Three inline items at 14px weight 475 in #032125, each preceded by a small #abffae checkmark icon, separated by 24px gap, no dividers. 5. **Tinted feature section**: Full-bleed #e2f4ff background, 96px vertical padding, centered 1200px content container, heading at 40px weight 475 in #032125, 3-column grid of feature items below with 2px-radius white cards inside.
Similar brands
Linear
Same near-uniform medium weight custom typeface, dark primary surface with cream/warm light alternation, hairline 1px borders, minimal corner radii, generous vertical rhythm
Vercel
Dark hero-to-light-section alternation with full-bleed bands, pill-shaped CTAs, subdued typography that lets color accents do the emotional work
Attio
Warm cream surfaces paired with deep saturated dark sections, thin borders, near-flat elevation, editorial product photography in hero
Resend
Custom geometric sans at restrained weight, dark spruce-toned palette, glow-ring focus states instead of traditional shadows, monochrome logo strip trust section
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
