Footer Green
#54b16cFooter band background — the only chromatic UI color, a friendly grass green that punctuates the monochrome page
Sparkles
sparkles.devWebsite preview
The design language
Sparkles runs on a near-total monochrome palette interrupted only by a single block of footer green — a deliberate, almost editorial restraint that makes the playful hand-drawn character illustrations do all the chromatic heavy lifting. Gelica (a chunky display serif) carries every headline at weight 600 with near-zero line-height, creating tight, assertive editorial moments that contrast with Articulat CF's wide-tracked sans-serif body and UI text. The interface is flat, border-driven, and uses #18181b as the universal 'ink' — for headings, nav text, icons, and the only filled button — so the eye reads the page like a printed broadsheet. Cards and inputs sit on white (#ffffff) with #e5e5e5 hairlines and 10px corners; elevation is essentially absent. The visual signature is the collision of austere typesetting with crayon-colored cartoon mascots tucked into the margins.
Color palette
brand
neutral
Ink Black
#0a0a0aPrimary text, deepest foreground — the absolute ink for body copy and legal/footer type
Zinc Ink
#18181bHeadlines, nav text, icons, filled button background — the universal interactive ink
Slate 700
#27272aBody text emphasis, input fill backgrounds for dark/inverted inputs
Slate 600
#3f3f46Secondary body text, input borders, subtle button borders
Slate 500
#52525cMuted helper text, link text, icon details
Zinc 500
#71717bIcon strokes (the dominant icon color), secondary UI lines
Zinc 300
#d4d4d8Card borders when slightly more definition is needed than the default hairline
Zinc 200
#e5e5e5Universal hairline border — by far the most-used color in the system at 360+ border applications
Zinc 100
#f4f4f5Card surfaces, hero background tint, subtle section backgrounds
Paper White
#fafafaPage-tinted background variant, near-white surfaces for cards that need separation from pure white
Pure White
#ffffffPrimary canvas and card surface — the page sits on white
Typography
Type scale
Minor Third (1.2) · 14px basedisplay
60px · 600 · 1The quick brown fox jumps
heading-lg
48px · 600 · 1.11The quick brown fox jumps
heading
36px · 600 · 1.11The quick brown fox jumps
heading-sm
20px · 500 · 1.4 · 5.6px trackingThe quick brown fox jumps
subheading
18px · 500 · 1.5 · 5.04px trackingThe quick brown fox jumps
body
16px · 400 · 1.6 · 4.48px trackingThe quick brown fox jumps
body-sm
14px · 600 · 1.56 · 3.92px trackingThe quick brown fox jumps
caption
12px · 500 · 1.5 · 3.36px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Gelica
- Weights
- 600
- Sizes
- 36px, 48px, 60px
- Line height
- 1.00–1.11
- Fallback
- Tiempos Headline, Source Serif Pro, Lora
Display and heading face — a custom chunky serif used exclusively for h1/h2 moments. Tight line-heights (1.0–1.11) make stacked headlines feel dense and editorial. Normal letter-spacing.
Additional typeface
Articulat CF
- Weights
- 400, 500, 600
- Sizes
- 12px, 14px, 16px, 18px, 20px
- Line height
- 1.33–1.78
- Letter spacing
- 0.28em on small/label contexts; normal on body text
- Fallback
- Inter, Geist, Söhne, General Sans
- Features
- "ss01" on if available
Body, UI, and small-label face. The defining quirk: 0.28em letter-spacing on this family creates the system's signature airy, architectural feel — almost certainly applied to small/uppercase labels and meta text where the wide tracking reads as deliberate typesetting rather than gap. Generous line-heights (up to 1.78) keep body copy breathing.
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 8px
- Max width
- 1200px
- Section gap
- 64-80px
- Card padding
- 24-40px
- Element gap
- 16-24px
Border radius
cards
10pxpills
10pxinputs
10pxbuttons
10pxfeature-cards
14pxSpacing scale
4px6px8px10px12px16px20px24px28px32px36px40px48px64px112px128pxGuidelines
Do
- Use #18181b (Zinc Ink) as the universal 'ink' — headlines, nav text, icons, and the only filled button should all pull from this single value for visual coherence.
- Apply Articulat CF's 0.28em letter-spacing on small labels, badge copy, and uppercase meta text — this wide tracking is the system's signature rhythm.
- Reach for #e5e5e5 hairlines and 10px radii on every container; cards and inputs should feel outlined and flat, not elevated.
- Reserve Gelica 600 for true heading moments at 36px or larger with line-height ≤1.11 — the tight leading is what gives the type its editorial weight.
- Use #54b16c only in the footer band and never elsewhere; the single chromatic block amplifies the monochrome story.
- Let the mascot illustrations carry all the brand color in marketing contexts; the interface itself should remain near-achromatic.
- Build the page rhythm as serif headline + sans-serif subhead + flat outlined cards — this three-part cadence repeats across every section.
Don’t
- Don't introduce additional brand or accent colors beyond #54b16c — the 1% colorfulness ratio is a feature, not an oversight.
- Don't use drop shadows beyond the single rgba(0,0,0,0.05) 0 1px 2px instance on buttons; elevation should come from borders, not shadows.
- Don't use Gelica below 36px — the serif's personality collapses at small sizes and fights with Articulat CF.
- Don't set Articulat CF body text with the 0.28em letter-spacing — that tracking belongs to small labels and meta copy only.
- Don't use #71717b or #52525c for body headlines; reserve those for icons, helper text, and muted metadata.
- Don't round corners above 14px or below 10px on functional elements — the 10-14px range is the system's entire radius vocabulary.
- Don't use gradient fills, glow effects, or color-tinted shadows; the aesthetic is intentionally flat and print-like.
Components
Filled Ink Button
Primary action — the system's only filled buttonBackground #18181b, text #ffffff, font Articulat CF 16px/500, 10px border-radius, 10px vertical / 20px horizontal padding. Carries the system's only real CTA moment ('Book a call'). No drop shadow beyond an optional 0 1px 2px rgba(0,0,0,0.05) lift.
Ghost/Outlined Button
Secondary actionTransparent background, 1px border in #3f3f46 or #e5e5e5, text #18181b, same 10px radius and padding as the filled variant.
Top Navigation Bar
Primary site navigationWhite background, sits on a #e5e5e5 bottom hairline. Logo (Sparkles wordmark) left, centered nav links (Problem, Solution, Pricing, FAQ, Careers) in Articulat CF 14px/500, Filled Ink Button on the right. Vertical padding ~32px.
Backed-by Badge
Social-proof pillCompact pill with light background (#fafafa or #f4f4f5), 1px #e5e5e5 border, 10px radius. Body copy in Articulat CF 12-14px with the signature 0.28em tracking on the 'Y Combinator' label. YC logo rendered inline as a small red mark.
Hero Headline
Page-level editorial momentGelica 600 at 48-60px, line-height 1.0-1.11, color #0a0a0a. Center-aligned. Sits on a white canvas. This is where the serif's weight and tight leading create the 'broadsheet' feel.
Hero Subhead
Qualifier line under the headlineArticulat CF 16-18px/400 in #52525c, often parenthesized, providing a soft, conversational counterpoint to the heavyweight serif above.
Decorative Mascot Illustration
Personality and brand warmthHand-drawn geometric characters (colored squares, triangles with faces) flanking the hero and sections. Bright crayon palette: coral red, sky blue, grass green, butter yellow — but these are illustration assets, NOT design-system colors. They give the austere monochrome interface its emotional counterweight.
Section Heading
Subsection title (e.g. 'The problem')Gelica 600 at 36-48px, centered, color #0a0a0a. Followed by a single Articulat CF subhead in #52525c. Establishes a consistent 'serif title + sans subtitle' rhythm across sections.
Content Card
Grouped information blockWhite (#ffffff) or #fafafa background, 1px #e5e5e5 (or #d4d4d8) border, 10-14px radius, 24-40px padding. No drop shadow. Flat, outlined, almost newspaper-like.
Text Input
Form fieldWhite or #27272a background, 1px border in #3f3f46 or #e5e5e5, 10px radius, Articulat CF 16px text. Focus state darkens the border toward #18181b.
Icon
UI iconographyOutlined 1.5-2px stroke style, stroke color #71717b (the dominant icon color) or #18181b for emphasis. Mono single-color treatment — never multicolored. Rendered sharp, not playful, so they don't compete with the mascot illustrations.
Footer Band
Page footerFull-width band with the only chromatic UI color in the system: #54b16c background. Light or white text on green. A bold, warm punctuation mark at the bottom of an otherwise colorless page.
Surfaces & elevation
Level 0
Page Canvas
#ffffffPrimary page background — pure white
Level 1
Soft Section
#fafafaSubtle off-white for sections that need a whisper of separation
Level 2
Card / Hero Tint
#f4f4f5Light gray for card surfaces and the hero's tinted backdrop
Level 3
Ink Surface
#18181bDark surface for the filled button and any inverted UI moments
Level 4
Footer Green
#54b16cSole chromatic surface — the footer band that closes the page with warmth
The system is deliberately shadowless. Depth comes from 1px #e5e5e5 hairlines and the white→#fafafa→#f4f4f5 surface stack, never from elevation. The only shadow in the system is a barely-perceptible 1px lift on filled buttons, reinforcing a printed-newspaper flatness rather than a skeuomorphic depth.
Filled Ink Button
rgba(0, 0, 0, 0.05) 0px 1px 2px 0px
Layout & imagery
Layout
Centered, max-width ~1200px editorial layout. The hero is a centered text stack (badge → serif headline → sans subhead → filled button) flanked on both sides by large mascot illustrations that bleed to the page edges. Sections follow a consistent vertical rhythm: centered serif section heading, centered sans subhead, then either a row of outlined cards or a two-column text+visual arrangement. Section gaps are generous (64-80px) with a soft #f4f4f5 or #fafafa band tinting alternating sections. Navigation is a simple top bar with centered links, a wordmark on the left, and a single filled CTA on the right. The page is overwhelmingly text-dominant, with the colorful illustrations acting as decorative bookends rather than informational imagery.
Imagery
Illustration-driven. The page is anchored by hand-drawn, crayon-style mascot characters — geometric shapes (colored squares, triangles) given simple cartoon eyes and expressions. They flank the hero on both sides and are positioned as decorative atmosphere rather than explanatory content. The illustration palette is vivid (coral red, sky blue, grass green, butter yellow) and intentionally clashing with the monochrome UI, creating the system's signature tension: austere typography on one side, playful hand-drawn warmth on the other. Product screenshots and photography are absent from the primary screens.
Design notes
Agent Guide
**Quick Color Reference** - text: #0a0a0a (primary), #52525c (secondary), #71717b (muted/icon) - background: #ffffff (canvas), #fafafa (soft), #f4f4f5 (card tint), #54b16c (footer only) - border: #e5e5e5 (hairline), #d4d4d8 (card definition), #3f3f46 (input) - accent: #54b16c (footer band only — not an interactive accent) - filled button / primary action: #18181b (filled action) **Example Component Prompts** 1. *Centered editorial hero*: white (#ffffff) canvas. Serif headline Gelica 600 at 56px, line-height 1.0, color #0a0a0a. Subhead Articulat CF 18px/400 in #52525c, centered. Filled button below: #18181b background, #ffffff text, Articulat CF 16px/500, 10px radius, 10px 20px padding. Optional hand-drawn mascot illustration in coral, sky blue, and butter yellow flanking the text stack. 2. *Outlined content card*: white (#ffffff) background, 1px border in #e5e5e5, 14px radius, 32px padding. Heading in Gelica 600 at 24px in #0a0a0a. Body in Articulat CF 16px/400 in #52525c. No drop shadow. 3. *Top navigation bar*: white background, 1px #e5e5e5 bottom border, 32px vertical padding. Wordmark on left in Gelica 600 20px #0a0a0a. Centered nav links in Articulat CF 14px/500 #18181b with 32px gap. Filled button on right: #18181b background, #ffffff text, 10px radius. 4. *Backed-by badge pill*: #fafafa background, 1px #e5e5e5 border, 10px radius, 8px 16px padding. Label in Articulat CF 12px/500 in #52525c. Partner name in Articulat CF 12px/600 in #0a0a0a with the signature 0.28em letter-spacing. 5. *Footer band*: full-width #54b16c background, white (#ffffff) text in Articulat CF 16px/400. Centered, 80px vertical padding. The sole chromatic UI moment on the page.
Similar brands
Mercury
Same editorial broadsheet feel — serif display headlines (Gelica ↔ Tiempos) over monochrome body, single accent color, flat outlined components
Linear
Dark-to-light monochrome product surface with tight custom sans-serif and near-zero decorative chrome, though Linear skews darker
Arc Browser
Hand-drawn illustration characters providing warmth against a clean, minimal monochrome interface — the same austerity-meets-playful tension
Notion
Generous spacing, hairline borders, serif-on-sans heading rhythm, and hand-drawn illustration as personality counterweight
Y Combinator
Restrained, almost brutalist monochrome layout with bright mascot-style illustration accents and minimal UI ornamentation
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
