Electric Lime
#d4ff4cGreen accent for outlined action borders, linked labels, and lightweight interactive emphasis. Do not promote it to the primary CTA color
Statamic
statamic.comWebsite preview
The design language
Statamic pairs a warm, editorial display serif with a clean geometric sans for a CMS that feels like a publication rather than a dashboard. The visual system lives in a sunlit peach-to-pink gradient world decorated with floating tropical islands — the brand leans into warmth, softness, and a slightly handcrafted sensibility. Color is used sparingly against an off-white canvas: olive-green electric lime as the brand spark, muted lavender for outlined actions, and near-black for the filled primary button. Surfaces are soft with minimal elevation, radii stay modest (8px dominates), and shadows whisper rather than shout. Typography carries most of the personality — a thin serif at 60-96px for headlines with tight tracking, and Lexend in its lighter weights for body and UI text.
Color palette
brand
accent
Lavender Whisper
#cbc2eaOutlined action borders, ghost button strokes, soft decorative accents — a desaturated violet that signals interactivity without shouting
Lilac Mist
#d7e5feDecorative pastel wash, soft card accents, illustration tints
Blossom
#f5ddeeDecorative pastel wash, hero gradient highlight, soft illustration tint
Plum Shadow
#4c305aDeep accent in image shadows and illustration depth — gives floating islands their grounded dimensionality
Dusk Gradient
#334155Gradient endpoint for dark image overlays
Aurora Wash
#32c5ffSubtle multi-hue gradient wash on feature sections — used at 0.08 opacity for atmospheric backgrounds
neutral
Ink
#191a1bDark borders and separators for elevated surfaces and inverted UI. Do not promote it to the primary CTA color
Paper White
#ffffffPage canvas, card surfaces, button text on dark fills, list backgrounds
Warm Shell
#fdf1efHero gradient base, secondary surfaces — the warm cream that gives the whole site its sunset atmosphere
Driftwood
#beb9b3Muted body text, subtle borders, image shadows — warm gray that harmonizes with the peach canvas
Smoke
#5e5a5aNav text, icon strokes, list borders, secondary text
Graphite
#4e5154Body text at reduced contrast, fine borders in content blocks
Iron
#3f3f46Deeper secondary text, fine separator borders
Mist
#cbd5e0Hairline borders, light dividers between sections and cards
Typography
Type scale
Minor Third (1.2) · 15px basedisplay-lg
96px · 300 · 1 · -0.05px trackingThe quick brown fox jumps
text-80
80px · 300 · 1The quick brown fox jumps
display
60px · 300 · 1.2 · -0.05px trackingThe quick brown fox jumps
heading
36px · 400 · 1.25 · -0.025px trackingThe quick brown fox jumps
text-30
30px · 400 · 1.2The quick brown fox jumps
text-24
24px · 100 · 1.5The quick brown fox jumps
subheading
20px · 300 · 1.4 · -0.025px trackingThe quick brown fox jumps
text-18
18px · 400 · 1.56The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
p22-mackinac-pro
- Weights
- 100, 300, 400, 700
- Sizes
- 20, 24, 30, 60, 80, 96
- Line height
- 1.0–1.5
- Letter spacing
- -0.05em at display sizes
- Fallback
- Fraunces, Source Serif Pro, or Lora
Display headlines and editorial accents. Weight 300-400 at 60-96px creates the signature warm, literary feel — the serif whispers rather than commands. Italic variant used for emphasis words in headlines ('actually', 'Statamic').
Additional typeface
Lexend
- Weights
- 300, 400, 500, 600, 700
- Sizes
- 12, 14, 16, 18, 20, 36
- Line height
- 1.0–2.0
- Letter spacing
- -0.025em, 0.05em
- Fallback
- Inter, DM Sans, or Plus Jakarta Sans
Primary UI and body typeface. Nav, buttons, body text, card titles, footer. Weight 300 for nav and secondary text keeps the interface light; 500-600 for buttons and labels. The wide weight range lets it carry both quiet metadata and confident CTAs.
Additional typeface
code-saver
- Weights
- 300, 700
- Sizes
- 12, 14, 16, 20
- Line height
- 1.33–2.0
- Letter spacing
- normal
- Fallback
- JetBrains Mono, Fira Code, or IBM Plex Mono
Monospace for code blocks, file tree, technical content, input fields. Weight 700 for syntax emphasis, 300 for ambient code display.
Additional typeface
Lore
- Weights
- 300
- Sizes
- 14
- Line height
- 1.43
- Letter spacing
- normal
- Fallback
- Phosphor Icons or Lucide
Icon font — single weight at 14px for UI iconography
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 8px
- Max width
- 1200px
- Section gap
- 64px
- Card padding
- 16px
- Element gap
- 16px
Border radius
cards
8pxpills
9999pximages
12pxbuttons
8pxlargeCards
16pxSpacing scale
1px2px4px6px8px10px12px16px17px23px24px25px29px31px32px35px40px41px48px52px64px70px71px73px96px121px128px137px201px208px256px265px288pxGuidelines
Do
- Use p22-mackinac-pro weight 300-400 at 60-96px for display headlines with -0.05em letter-spacing
- Pair the filled dark button (#191a1b bg, #d4ff4c text, 8px radius) as the single primary action on any page
- Use Lavender Whisper (#cbc2ea) for outlined/ghost action borders — never as a filled background
- Maintain 16px element gaps and 64px section gaps as the base rhythm
- Let the warm-shell (#fdf1ef) background appear in at least one section per page to establish atmosphere
- Use 8px radius for buttons and small cards, 12px for images, 16px for large content cards, 9999px for pills and icon circles
- Apply the dual shadow (1px border + 40px diffuse) to large elevated content cards
Don’t
- Don't use weight 600+ for display headlines — the signature is whisper-thin serif at large size
- Don't place #d4ff4c lime on a light background — it loses contrast; reserve it for dark fills or small accent marks
- Don't use heavy drop shadows on buttons — the system uses barely-there 1-2px elevation
- Don't use #cbc2ea lavender as a background fill — it's an outline color only
- Don't break the serif/sans pairing — don't set body text in p22-mackinac-pro or headlines in Lexend
- Don't add more than one vivid color to any single surface — the palette is disciplined
- Don't use sharp 0px or 4px radii on cards — the system is consistently 8px+
Components
Filled Primary Button
Primary call-to-action for conversion (Get Pro Now)Background #191a1b, text #d4ff4c (Electric Lime), Lexend 16px weight 500, 8px radius, 12px 24px padding, subtle shadow (rgba(0,0,0,0.05) 0px 1px 2px). The dark fill with lime text creates the brand's signature contrast point — the only place this color combo appears, making it unmistakable as the primary action.
Ghost Outlined Button
Secondary action (Try the Demo)Transparent background, 1.5px border in #cbc2ea (Lavender Whisper), text #191a1b, Lexend 16px weight 500, 8px radius, 12px 24px padding. The muted lavender border signals interactivity without competing with the filled primary.
Navigation Bar
Top-level site navigationTransparent over hero gradient, white on scroll. Lexend 14px weight 400, #191a1b text. Logo: Statamic S-mark in #d4ff4c lime block. Nav items with 16px gap, dropdown indicators as carets. Right side: user icon in circle. Sticky behavior expected.
Display Headline
Hero and section headlinesp22-mackinac-pro weight 300-400, 60-96px, line-height 1.0-1.2, letter-spacing -0.05em, color #191a1b. Italic variant for emphasis words within the line. The thin weight at large size with tight tracking is the signature editorial choice.
Hero Section
Full-width above-the-fold areaBackground: linear gradient from #fdf1ef (top) through peach tones to soft pink. Floating island illustrations (palm trees, toucan, clouds) positioned at left and right edges, partially clipped. Centered text block with max-width ~800px. Two CTA buttons side by side, then a small developer note link below.
Product UI Card
Embedded screenshot/mockup of the CMS interfaceLarge card with 16px radius, white background, subtle dual shadow (rgba(94,90,90,0.1) 0px 0px 0px 1px + rgba(0,0,0,0.1) 0px 16px 40px -8px). Contains a simulated dark toolbar (#191a1b) with tab-like elements, white content area with sidebar + editor layout. The 1px border + large diffuse shadow is the signature card elevation.
Code/File Editor Mockup
Technical demonstration blockSplit panel: left shows file tree (folders, .md files) in #fdf1ef tinted background, right shows YAML/code content with syntax highlighting (blue #0444ac keys, pink #a44185 values, dark navy #002339 text). Code-saver monospace 14px. 8px radius outer container, subtle shadow.
Feature Section Layout
Content sections between hero and footerCentered headline at 36-60px display, max-width text block, then visual element (screenshot/code mockup) at full container width. 64px section gap. Alternating between white and warm-shell backgrounds.
Badge/Tag
Status indicators, topic labelsSmall pill-shaped labels, 9999px radius, Lexend 12px weight 500, 4px 12px padding. Background varies by topic (light tints of lavender, pink, blue). Used in product UI mockup sidebar.
Icon Circle
Nav avatar, decorative circular elementsRound container, 9999px radius, 1px border in #191a1b or fill in #d4ff4c. Contains Lore icon font glyphs at 14px. 32-40px diameter.
Ghost Link
Inline links in body text and developer notesLexend 16px weight 400, #191a1b text, underline on hover only. No background or border. Minimal — links blend into prose until interaction.
Input Field
Form inputs in product UIWhite background, 1px border in #cbd5e0 (Mist), 8px radius, 8px 12px padding. Code-saver monospace 14px for technical inputs. Focus ring: lavender #cbc2ea at 2px.
Surfaces & elevation
Level 0
Canvas
#ffffffBase page background
Level 1
Warm Shell
#fdf1efHero gradient base, warm section backgrounds
Level 2
Card
#ffffffProduct UI mockup cards, elevated content blocks with subtle 1px border + 40px shadow
Level 3
Dark Surface
#191a1bFilled primary button, dark code editor panels
Product UI Card / Large Content Card
rgba(94, 90, 90, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 16px 40px -8px
Image with elevation
rgba(0, 0, 0, 0.05) 0px 2px 6px -16px, rgba(0, 0, 0, 0.25) 0px 7px 10px -4px
Filled Button
rgba(0, 0, 0, 0.05) 0px 1px 2px 0px
Outlined/Interactive Element
rgba(0, 0, 0, 0.15) 0px 2px 3px -2px
Layout & imagery
Layout
Max-width 1200px centered container with generous outer padding. Hero is full-bleed with a warm gradient background, centered headline stack, and floating island illustrations anchored to the left and right edges. Below the hero, sections alternate between white and warm-shell (#fdf1ef) backgrounds with 64px vertical gaps. Content arrangement is primarily centered/stacked with full-width visual elements (product screenshots, code mockups) breaking up the text. The code/file demo section uses a two-panel split (file tree left, code right). Navigation is a clean top bar with centered logo, left-aligned nav items, and right-aligned user icon. The overall rhythm is spacious and editorial — breathing room between sections, single-column text blocks, and one large visual per section.
Imagery
The site uses a distinctive illustrated world of floating tropical islands with palm trees, toucans, and clouds set against warm sunset gradients. These are not decorative afterthoughts — they're a signature brand element positioned at hero edges as partial silhouettes. Product visuals are large, detailed UI mockups (CMS control panel, code editor) shown at full container width with generous shadows, letting the interface speak for itself. Photography does not appear; the visual language is entirely illustration + product UI. Icons use the custom Lore font at weight 300. Imagery density is moderate — illustrations frame content rather than dominate it.
Design notes
Agent Guide
**Quick Color Reference** - text: #191a1b (Ink) - background: #ffffff (Paper White) - hero/warm surface: #fdf1ef (Warm Shell) - border: #cbd5e0 (Mist) or #beb9b3 (Driftwood) - accent: #d4ff4c (Electric Lime) — logo, CTA text on dark - primary action: #cbc2ea (outlined action border) **Example Component Prompts** 1. **Hero Section**: Full-bleed background with gradient from #fdf1ef (top) to soft pink (bottom). Centered headline at 80px p22-mackinac-pro weight 300, color #191a1b, letter-spacing -4px. Italic emphasis on one word. Subtext at 18px Lexend weight 400, #191a1b. Two buttons centered: filled dark button (12px 24px padding, 8px radius, #191a1b bg, #d4ff4c text, Lexend 16px weight 500) and ghost outlined button (12px 24px padding, 1.5px border #cbc2ea, 8px radius, #191a1b text). Floating island illustrations at left and right edges, partially clipped. 2. **Display Headline Block**: p22-mackinac-pro weight 300, 60px, line-height 1.2, letter-spacing -3px, color #191a1b. Max-width 800px centered. Second line can use weight 400 italic for emphasis. 3. **Product UI Card**: White card, 16px radius, dual shadow (1px border rgba(94,90,90,0.1) + 40px diffuse rgba(0,0,0,0.1)). Contains a dark toolbar (#191a1b) with Lexend 12px weight 500 white text, and a white content body with sidebar + editor layout using 8px 12px padding in content cells. 4. **Code/Editor Mockup**: Two-panel split in a card with 8px radius. Left panel: #fdf1ef background with file tree (folder icons + .md filenames in code-saver 14px weight 400). Right panel: white background with YAML code, code-saver 14px, syntax colors — keys in #0444ac, values in #a44185, structure in #002339. Subtle outer shadow. 5. **Section Divider**: 64px vertical gap between sections. Alternate backgrounds between #ffffff and #fdf1ef. No visible divider line — the background change creates separation.
Similar brands
Linear
Same discipline of dark filled primary action against a light canvas, with minimal color and strong typographic personality
Vercel
Shared approach of generous whitespace, centered content stacks, and letting product UI screenshots serve as the primary visual content
Stripe
Similar warm gradient hero treatments and serif-meets-sans headline pairing for editorial warmth
Sanity
Same CMS-tool positioning with large product mockups, developer-focused code blocks, and restrained accent color
Craft CMS
Shared editorial sensibility with serif display type, warm backgrounds, and illustration-driven hero sections
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
