Chartreuse
#dbf570Highlight badges, study tags, the globe motif, card accent fills — the only chromatic note in the system, used sparingly to draw the eye to research signals
Maze
maze.co
Website preview
The design language
Maze operates as an editorial research workspace: a warm cream canvas (#f5f4f0) that behaves like off-white paper rather than cold digital white, paired with Phonic — a sharp humanist serif set aggressively tight at large sizes. The interface is overwhelmingly monochromatic (near-black ink on warm bone), with a single chartreuse accent (#dbf570) that functions as highlighter rather than decoration. Screens are calm, generous, and content-led: product surfaces (report cards, study cards, video tiles) sit flat on the canvas with 8–16px radii and hairline borders, never floating on heavy shadow stacks. Sections break rhythm with full-bleed color washes (lavender, lime) and a large pixel-globe motif that signals research-at-scale. Buttons are quiet — either a dark filled rectangle or a thin outlined ghost — never glossy. The overall language is closer to a research journal than a SaaS dashboard.
Color palette
brand
Olive
#4b5b0aDecorative border accent, chromatic link underline — the only deep color, appears in the olive outline treatments and the heading underline on the hero
neutral
Bone
#f5f4f0Page canvas, footer, secondary button fills — warm off-white replaces cold digital white, giving every screen a paper-like base
Paper
#ffffffCard surfaces, elevated panels, input fields — the bright layer above bone
Ink
#1c1c1cPrimary text, dark filled buttons, heading color — the default ink, warm near-black rather than #000
Charcoal
#000000Hairline borders, icon strokes, the announcement bar — the thinnest line work
Fossil
#706f6cSecondary text, muted borders, body annotations
Pebble
#9e9b94Input field borders, disabled controls
Smoke
#3c3c3cBody annotations, meta labels
Sand
#eae6e1Active tab background, subtle surface lift, button hover on bone
Ash
#d2cec6Hairline dividers, footer borders, low-contrast separators
Typography
Type scale
Major Third (1.25) · 15px basehero
130px · 300 · 1 · -11.7px trackingThe quick brown fox jumps
display-lg
90px · 300 · 1 · -6.3px trackingThe quick brown fox jumps
display
58px · 300 · 1.05 · -3.48px trackingThe quick brown fox jumps
heading-lg
46px · 300 · 1.1 · -2.3px trackingThe quick brown fox jumps
heading
28px · 300 · 1.1 · -1.12px trackingThe quick brown fox jumps
heading-sm
22px · 300 · 1.15 · -0.66px trackingThe quick brown fox jumps
text-17
17px · 400 · 1.41The quick brown fox jumps
text-16
16px · 400 · 1.5The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
ui-sans-serif
- Weights
- 400
- Sizes
- 16px
- Line height
- 1.5
ui-sans-serif — detected in extracted data but not described by AI
Additional typeface
Phonic
- Weights
- 300, 400
- Sizes
- 12, 14, 15, 17, 22, 28, 46, 58, 90, 130
- Line height
- 1.00–1.41
- Letter spacing
- –11.7px at 130px, –6.3px at 90px, –3.48px at 58px, –2.3px at 46px, –1.12px at 28px, –0.66px at 22px, –0.34px at 17px, –0.15px at 15px, +0.36px at 12px
- Fallback
- GT Sectra Display (for display), Tiempos Text (for body), or Söhne Breit as a sans-serif fallback if a serif is unavailable
- Features
- "kern" 1, "liga" 1, "calt" 1, "ss01" 1 (if available), "onum" 0
Display, headings, body — the brand's signature humanist serif set aggressively tight at large sizes (–0.09em at 130px down to +0.03em at 12px). Weight 300 dominates for display, 400 for body. The custom typeface carries the editorial voice; weight 300 at 130px is the signature move — most brands use 600–700 here, Maze whispers in a light serif to claim authority through restraint.
Additional typeface
System UI Sans
- Weights
- 400
- Sizes
- 16
- Line height
- 1.50
- Fallback
- Inter, Söhne, or system-ui
Secondary UI text, fallback for browser contexts — only used sparingly; Phonic carries the brand
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 80px
- Card padding
- 24px
- Element gap
- 8px
Border radius
cards
12pxbadges
4pxinputs
8pxbuttons
8pxlargeCards
16pxSpacing scale
1px2px4px8px12px16px20px24px32px40px48px64px80px112px120px129px208px300pxGuidelines
Do
- Use Phonic at weight 300 for every display and headline; weight 400 for body and UI only
- Default to a 12px radius on cards, 8px on buttons, 4px on badges — the radius scale is narrow and intentional
- Use #f5f4f0 (Bone) as the page canvas; reserve #ffffff for cards and inputs that need to lift off the canvas
- Let Chartreuse (#dbf570) appear as small functional punctuation — one badge, one tag, one globe — never as a wide wash of UI color
- Track headlines aggressively tight: –6.3px at 90px, scaling proportionally so letters almost touch at the largest sizes
- Keep buttons quiet: Ink-filled or Ink-outlined, 8px radius, 12px × 20px padding, no shadow, no gradient
- Use Lavender (#b8a3ff) full-bleed for section breaks to create contrast against the bone canvas
Don’t
- Do not use sans-serif for headlines — Phonic serif at weight 300 IS the brand voice; substituting bold sans-serif destroys the editorial register
- Do not apply heavy box-shadows to cards — the system is intentionally flat, elevation is a hairlines-only discipline
- Do not use Chartreuse as a CTA background — it is a highlight color for tags and motifs, not an action color; Ink stays the action
- Do not set display text at line-height 1.4+ — headlines run tight (1.00–1.10) so the serif rhythm stays architectural
- Do not introduce new chromatic colors beyond the three in the palette (Chartreuse, Olive, Lavender) — every additional hue dilutes the bone-paper system
- Do not use #000000 as body text — Ink (#1c1c1c) is the text color; #000 is reserved for the announcement bar and hairline borders
- Do not center body paragraphs in cards — only section headlines and hero copy may center; study card copy stays left-aligned
Components
Announcement Bar
Top-of-page notification stripFull-bleed Charcoal (#000000) bar, white Phonic 14px / 400 text, centered, with right-aligned close ×. Height ~40px, used for product news or report launches.
Top Navigation
Primary site navigationBone (#f5f4f0) background, Phonic wordmark at 22px weight 300 in Ink. Nav links in Phonic 15px / 400. Right cluster: 'Log in' text link, 'Try Maze for free' outlined pill, 'Contact sales' filled Ink button. Sticky on scroll.
Filled Dark Button
Primary actionInk (#1c1c1c) background, Paper (#ffffff) text, Phonic 15px / 400, 8px radius, 12px vertical × 20px horizontal padding. No shadow, no gradient. The default conversion CTA.
Outlined Ghost Button
Secondary actionTransparent background, 1px Ink (#1c1c1c) border, Ink text, Phonic 15px / 400, 8px radius, 12px × 20px padding. Pairs beside the filled dark button in the hero.
Hero Headline Block
Above-the-fold page openingTwo-column on desktop: left holds Phonic 90px / weight 300 headline in Ink with –6.3px tracking, sub-paragraph at 17px / 400 in Fossil, CTA cluster below; right holds a staggered collage of product surface cards. Headline sets the line-height tight at 1.00 so the letters almost touch.
Report Preview Card
Featured product surface cardPaper (#ffffff) background, 8px radius, no shadow. Header label 'Report Preview' in Phonic 12px / 400 Fossil. Body contains a Chartreuse (#dbf570) hero image block with 8px top radius, 16px internal padding, 22px Phonic bold label, and a right-aligned stat column (Responses, No. of themes).
Unmoderated Study Card
Study result card with ratingPaper background, 12px radius. Chartreuse tag pill at top-left with Phonic 12px / 400 Ink text. Question block in Phonic 17px / 400 Ink, 4-star rating in Chartreuse fill. 'Enormity satisfied' label in Fossil 14px.
Video Interview Card
Moderated study video tilePaper background, 12px radius. Video thumbnail fills the card with bottom caption strip. White play button circle centered on the thumbnail. Phonic 12px tag above, 14px caption below.
Section Headline Overlay
Mid-page editorial section breakCentered Phonic 46–58px / 300 Ink headline layered directly over a large Chartreuse pixel-globe illustration. Tracking –2.3 to –3.48px. Sub-paragraph in Fossil 17px sits beneath. No background panel — the chartreuse IS the background.
Tab Navigation
Segment controlThree tabs (Recruit, Research, Analyze) in Phonic 46px / 300 Ink. Active tab sits on a Sand (#eae6e1) background pill with 8px radius, inactive tabs are transparent. The active fill is bone-on-bone, not a chromatic accent — the system stays quiet even on the tabs.
Menu List Panel
Recruitment category listSits on a Lavender (#b8a3ff) full-bleed background. The panel itself is Paper white, 12px radius, internal row list. Each row: small square icon, Phonic 15px / 400 Ink label, right-chevron. 1px divider between rows in #eae6e1.
Pixel Globe Illustration
Brand motif, section breakLarge circle (~600px diameter) in Chartreuse (#dbf570) rendered as a dot-matrix grid, forming a globe silhouette. Used as a full-bleed visual behind section headlines — the only decorative motif of scale in the system.
Scroll Cue
Scroll-to-continue promptSmall pill at page bottom: 'Scroll to continue' in Phonic 14px / 400 Ink, bordered 8px radius, paired with a down-chevron.
Study Tag Badge
Category / status badgeChartreuse (#dbf570) background, Ink text, Phonic 12px / 400, 4px radius, 4px × 8px padding. Marks study type cards.
Surfaces & elevation
Level 0
Bone Canvas
#f5f4f0Page background — warm off-white paper base
Level 1
Paper Card
#ffffffReport cards, study cards, menu panels — the standard elevated surface
Level 2
Sand Lift
#eae6e1Active tab, subtle highlight wash on bone
Level 3
Chartreuse Accent
#dbf570Study tags, globe illustration, highlight cards
Level 4
Ink Surface
#1c1c1cDark filled buttons, dark announcement bar
The system is deliberately flat. Cards sit on the canvas with a color difference and a hairline border, not with shadow. The only elevation in the entire system is a barely-there 1–2px blur reserved for floating dropdowns. This reinforces the editorial paper metaphor: nothing floats, everything is printed on the page.
Cards
none — flat on canvas, defined by surface color and 1px border only
Buttons
none — no shadow on filled or ghost states
Dropdown panels
0 1px 2px rgba(0,0,0,0.04) — the closest the system gets to elevation, used only on floating menu panels
Layout & imagery
Imagery
Imagery is product-surface-first: real UI cards (report previews, study results, video tiles) are photographed/screenshot as the hero visual, not stock photography. The sole decorative motif is the Chartreuse pixel-globe — a large dot-matrix circle that reads as both a research-at-scale metaphor and a color block. Photography, when present (study participant thumbnails), is warm-lit, candid, cropped tight to faces, never full-body lifestyle. Iconography is square monoline, set in Ink with no fill — functional, never decorative. The system leans heavily on typography to carry the visual weight, treating illustrations and icons as supporting cast.
Design notes
Agent Guide
QUICK COLOR REFERENCE - Canvas: #f5f4f0 (Bone) - Card surface: #ffffff (Paper) - Primary text: #1c1c1c (Ink) - Hairline border: #000000 (Charcoal) - Muted text: #706f6c (Fossil) - Accent: #dbf570 (Chartreuse) - primary action: #1c1c1c (filled action) EXAMPLE COMPONENT PROMPTS 1. Create a Primary Action Button: #1c1c1c background, #ffffff text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA. 2. REPORT PREVIEW CARD — White (#ffffff) surface, 8px radius, no shadow. Header label 'Report Preview' in Phonic 12px / 400 / #706f6c. Chartreuse (#dbf570) image block filling top half with 8px top radius. Body in Phonic 17px / 400 / #1c1c1c with a right-aligned stat column in #706f6c. 3. TAB SEGMENT CONTROL — Three Phonic 46px / 300 labels in #1c1c1c. Active tab on a #eae6e1 pill background with 8px radius and 12px 20px padding. Inactive tabs transparent. 16px gap between tabs. 4. STUDY TAG BADGE — Chartreuse (#dbf570) background, #1c1c1c text, Phonic 12px / 400, 4px radius, 4px 8px padding. Sits at top-left of study cards. 5. PIXEL GLOBE SECTION BREAK — Full-bleed #dbf570 background, centered Phonic 58px / 300 / #1c1c1c headline with letter-spacing –3.48px layered over a 600px dot-matrix globe illustration. Sub-paragraph in Phonic 17px / 400 / #706f6c below the headline.
Motion Philosophy
Motion is minimal and structural: fade-and-rise on scroll (~200ms ease-out, 8–12px translate) for cards entering the viewport, and an underline grow on nav link hover (left-to-right, 150ms). No parallax, no scroll-jacking, no decorative animation. The chartreuse globe and lavender washes are static — the system trusts typography and color to do the work.
Similar brands
Linear
Both use a warm near-white canvas instead of cold #fff, both rely on a single monochromatic type voice, both keep accent color to a single hue used as functional punctuation
Vercel
Same editorial restraint: tight-tracked display type, flat surfaces, hairline-only borders, a single chromatic accent reserved for high-signal moments
Notion
Shared warm off-white canvas (#f7f6f3 family), paper-like card surfaces, and quiet ink-on-bone typographic system rather than stark white-on-black SaaS convention
Arc
Both break the standard SaaS palette with warm neutrals and a single vivid accent (Arc's orange, Maze's chartreuse) used as identity rather than action color
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
