Highlighter
#edfc47Emphasis accent on words inside headlines, icon fills, tag highlights — chartreuse that never fills a button, only marks what matters
Quo (formerly OpenPhone)
openphone.com
Website preview
The design language
Quo runs on an almost ruthlessly monochromatic system — white and off-white canvases, black ink, hairline borders, near-zero elevation — with a single chartreuse accent that behaves like a highlighter, not a decoration. Headlines are editorial in scale (Roobert at up to 88px, tight -0.02em tracking) while UI stays compact in Inter, producing a newspaper-meets-app rhythm: massive confident display type above dense functional surfaces. Components are flat and rectangular with 10px corners; depth is communicated by product screenshots and one soft shadow rather than stacking. The chartreuse (#edfc47) never fills a button — it highlights words inside headlines, tags icons, and draws the eye to emphasis, making the primary action (a black filled button) feel like the default rather than a colorful exception.
Color palette
accent
neutral
Newsprint
#f7f6f5Page canvas and ambient background — warm off-white that softens the stark black type
Paper
#ffffffCard surfaces, product screenshot frames, nav background — the raised, clean tier above the canvas
Press Black
#000000High-contrast neutral action fill for primary buttons on light surfaces.
Midnight
#0a0a0cAnnouncement bar and dark band backgrounds — near-black for the slim top promo strip
Graphite
#4d4d4dBody text and secondary headings — readable but recedes against Press Black for hierarchy
Ash
#808080Muted helper text, icon strokes, tertiary metadata
Silver
#ccccccHairline borders, dividers, inactive UI edges — the only border color in the system
Typography
Type scale
Minor Third (1.2) · 16px basedisplay
88px · 500 · 1 · -1.76px trackingThe quick brown fox jumps
heading-lg
64px · 500 · 1.05 · -1.28px trackingThe quick brown fox jumps
heading
56px · 500 · 1.1 · -1.12px trackingThe quick brown fox jumps
heading-sm
48px · 500 · 1.1 · -0.96px trackingThe quick brown fox jumps
text-40
40px · 500 · 1.1The quick brown fox jumps
subheading
24px · 500 · 1.2 · -0.24px trackingThe quick brown fox jumps
body-lg
20px · 400 · 1.3 · -0.2px trackingThe quick brown fox jumps
body
18px · 400 · 1.5The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Roobert
- Weights
- 500
- Sizes
- 20px, 24px, 40px, 48px, 56px, 64px, 88px
- Line height
- 0.90–1.20
- Letter spacing
- -0.02em at 48–88px, -0.01em at 20–24px
- Fallback
- DM Sans, General Sans, or Manrope at matching weights
- Features
- "ss01" on, "ss02" on
All display and heading copy — geometric sans with tight tracking that lets headlines read as editorial blocks. Weight 500 (not 700) keeps the large sizes from feeling like a poster; the restraint is the point.
Additional typeface
Inter
- Weights
- 400, 500, 600
- Sizes
- 12px, 14px, 16px, 18px, 20px
- Line height
- 1.20–1.50
- Fallback
- Inter (already free via Google Fonts)
Body, nav, buttons, badges, labels, icons — the workhorse UI face. 400 for body, 500 for nav and labels, 600 for button text and emphasized UI.
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 64-80px
- Card padding
- 24-32px
- Element gap
- 16px
Border radius
nav
6pxcards
10pxpills
100pxinputs
10pxbuttons
10pxSpacing scale
2px3px4px5px6px8px9px10px12px14px16px18px20px22px24px26px30px32px40px41px48px64px65px72px90px100px128px189px252px255pxGuidelines
Do
- Use #edfc47 chartreuse only as an emphasis stroke — a highlight rectangle behind a word in a headline, an icon fill, a tag — never as a button background or large surface fill
- Set headlines in Roobert 500 at 48-88px with -0.02em tracking; the geometric lowercase and tight tracking are what make the editorial scale work
- Use #000000 filled buttons as the only primary action; the system has exactly one button fill color
- Reach for the single soft shadow (rgba(0,0,0,0.1) 0px 11px 17px -10px) only on product screenshot frames; everything else stays flat with a Silver hairline or no border
- Separate type systems by role: Roobert 500 for all headings 20px and above, Inter for everything at 18px and below — never mix them at the same size
- Keep the canvas at #f7f6f5 Newsprint for full-page backgrounds and use #ffffff Paper for cards, nav, and product frames to build the two-tier surface stack
- Use 10px radius for cards and buttons, 6px for nav, 100px for pills — the three radii carry the entire shape language
Don’t
- Don't fill buttons with chartreuse — the accent is for emphasis, not action
- Don't use multiple colors of buttons; the system is monochrome with one accent, so a colored button would break the visual contract
- Don't add colored gradients, drop shadows, or glow effects to UI surfaces — the design is intentionally flat
- Don't set body copy in Roobert; it's a display face and loses legibility under 24px
- Don't use letter-spacing looser than -0.01em on headings — the tight tracking is part of the editorial feel
- Don't introduce a second accent color; even subtle blue/green additions compete with the chartreuse and dilute the system
- Don't stack elevation: no card-on-card, no modals with heavy shadows, no hover-lift transforms — use color contrast and hairline borders instead
- Don't set display headlines below 40px; the Roobert 500 weight needs the scale to register as editorial
Components
Primary Filled Button
Main conversion action (Try for free, Get started)Black fill (#000000), white text in Inter 600 at 16px, 10px radius, 12px vertical / 20px horizontal padding, no border. The only chromatic-free filled button in the system — when something must be clicked, it's black.
Ghost Button
Secondary action (See how it works, Talk to Sales)Transparent fill, Press Black text in Inter 500 at 16px, 10px radius, 12px/20px padding, no visible border. Sits beside the primary button with a small play or arrow glyph to signal it opens a demo.
Nav Login Link
Tertiary nav actionPlain Inter 500 text in Press Black at 14px, no fill, no border, 6px radius if it ever wraps a pill. Sits flush in the nav row.
Announcement Bar
Top-of-page promo stripMidnight (#0a0a0c) full-bleed bar, white Inter 500 text at 14px, a small chartreuse emoji/icon, and a right-side close (×) in white. Sits above the main nav as a separate band.
Top Navigation Bar
Primary site navigationPaper (#ffffff) background, 6px radius on any bordered element, Inter 500 nav links in Press Black at 14px with dropdown chevrons, Quo wordmark left, login + Talk to Sales + Try for free right. No visible bottom border, floats on the canvas.
Hero Section
Above-the-fold value propositionCentered on Newsprint canvas. Trust line (★ 4.7 stars, review count) in Inter 500 at 14px. Headline in Roobert 500 at 88px with -1.76px tracking, Press Black, with one or two words wrapped in a chartreuse highlighter rectangle (#edfc47) for emphasis. Subtext in Graphite Inter 400 at 18px. Primary + ghost button pair centered below. Platform availability line in Ash Inter 400 at 14px.
Product Screenshot Frame
App preview shown below the heroPaper (#ffffff) surface with 10px radius, the single soft shadow (rgba(0,0,0,0.1) 0px 11px 17px -10px), and the full app UI rendered inside. Acts as the visual proof point — the only 'image' most sections need.
Feature Card (3-Column Grid)
Product capability tilesPaper (#ffffff) card on Newsprint canvas, 10px radius, no shadow, no border, 24-32px internal padding. Headline in Roobert 500 at 24px (-0.24px tracking), Press Black. A small UI illustration or product crop fills the lower half. Cards align in a 3-column grid with 16px gaps.
Tab/Pill Nav
In-section feature switcherThree pill-shaped tabs (100px radius) in a row: first tab is filled Paper with subtle Silver border and Press Black text, others are ghost with Ash text. 8px vertical / 16px horizontal padding, Inter 500 at 14px.
Chat Bubble — Sent
In-app message UI elementSolid blue fill (#007bff range) with white Inter 400 text at 14px, 10px radius on all corners, 12px padding. Appears inside product screenshots to demo the inbox.
Chat Bubble — Received
In-app message UI elementLight gray fill (#f0f0f0 range) with Press Black text, 10px radius, 12px padding. Pairs with sent bubble to show conversation.
Logo Bar
Social proof / customer logosSingle row of customer logos in Ash (#808080) or Graphite, evenly spaced, centered on a Paper or Newsprint band. Logos are monochrome — no brand color leaks into the system.
Phone Number Row
Trust/feature list item inside a cardEach row pairs a small flag icon, a Press Black phone number in Inter 500 at 16px, and a region label in Ash Inter 400 at 14px. Rows separated by hairline Silver borders, 12-16px vertical padding.
Stat Card
Highlighted metric tilePaper background, 10px radius, large number in Roobert 500 at 48px in Press Black, label in Ash Inter 400 at 14px below. No border, no shadow.
Footer Link Column
Site footer navigationColumn heading in Inter 600 Press Black at 14px, link list in Inter 400 Graphite at 14px with 8px row gap. No bullets, no underlines until hover.
Surfaces & elevation
Level 1
Newsprint
#f7f6f5Page canvas
Level 2
Paper
#ffffffCards, nav, product frames
Level 3
Press Black
#000000Filled buttons, dark CTAs
Level 4
Midnight
#0a0a0cAnnouncement bar, dark promo strips
Quo deliberately avoids stacking depth. The single soft shadow is reserved for product screenshot frames to lift them off the canvas; all other surfaces communicate hierarchy through flat color contrast (Paper on Newsprint) and hairline Silver borders, never through elevation.
Product screenshot card
rgba(0, 0, 0, 0.1) 0px 11px 17px -10px
Layout & imagery
Layout
Centered, max-width 1200px page model on a Newsprint (#f7f6f5) canvas. The hero is a centered stack: trust line, 88px headline, subtext, dual-button row, platform line, then a full-width product screenshot frame below. Below the hero, the page settles into a 3-column feature card grid with 16px gaps and generous vertical breathing room (64-80px between sections). Feature card headlines sit top-left in each tile, with a product crop or UI illustration filling the lower half. A logo bar in a single row breaks up the section rhythm. Navigation is a clean top bar with no sticky shadow — it floats on the canvas. The overall rhythm alternates between centered editorial blocks and structured 3-column grids, never side-by-side text+image split layouts.
Imagery
Visuals are dominated by product screenshots — the actual Quo app UI rendered inside Paper frames with one soft shadow. No lifestyle photography, no stock imagery, no abstract graphics. The only illustrative element is the chartreuse highlighter rectangle placed over words in headlines, which functions as both decoration and emphasis. Icons throughout the UI are simple line-style glyphs in Press Black or Ash, never multicolored. The product screenshots do the heavy lifting of showing what the product does, while the editorial type and highlighter accents do the brand work.
Design notes
Agent Guide
**Quick Color Reference** - Text: #000000 (Press Black) - Background: #f7f6f5 (Newsprint canvas), #ffffff (Paper cards) - Border: #cccccc (Silver hairlines) - Accent: #edfc47 (Highlighter — emphasis only) - Body text: #4d4d4d (Graphite) - Muted text: #808080 (Ash) - primary action: #000000 (filled action) **3-5 Example Component Prompts** 1. Create a Primary Action Button: #000000 background, #ffffff text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA. 2. *Create a 3-column feature card row:* Three Paper (#ffffff) cards on a Newsprint canvas, 10px radius, no shadow, 24px internal padding, 16px gap between cards. Each card has a Roobert 500 headline at 24px (-0.24px tracking) in #000000, an Inter 400 description at 16px in #4d4d4d below, and a product UI crop filling the lower 60% of the card. The card headlines are left-aligned, not centered. 3. *Create a top navigation bar:* Paper (#ffffff) background, full-width, 64px tall. Left: Quo wordmark in Roobert 500 at 20px #000000. Center: nav links in Inter 500 at 14px #000000 with small dropdown chevrons. Right: 'Log in' as plain Inter 500 #000000 text, 'Talk to Sales' as ghost button (transparent, #000000 text, 6px radius), 'Try for free' as filled #000000 button with white Inter 600 text, 10px radius. No bottom border. 4. *Create an announcement bar:* Midnight (#0a0a0c) full-bleed strip, 40px tall, centered white text in Inter 500 at 14px reading 'New: Quo's Claude connector →' with a small chartreuse #edfc47 icon to the left and a white × close button to the right. 5. *Create a logo bar:* Single horizontal row of 8-10 customer logos in #808080 Ash, evenly spaced and centered, on a Paper (#ffffff) band with 48px vertical padding. Logos are monochrome — no original brand colors survive. Section heading above in Inter 500 at 14px Ash: 'Powering conversations for 90,000+ businesses'.
Similar brands
Linear
Same near-monochromatic palette with a single vivid accent color, flat surfaces, and editorial-scale headlines that prioritize type over chrome
Mercury
Same restrained black-on-warm-white fintech aesthetic with Inter UI type and a quiet, confident tone
Vercel
Same black/white minimalism with precise typographic hierarchy and product-screenshot-as-hero visual strategy
Notion
Same product-UI-screenshot-driven marketing where the app itself is the primary visual asset rather than staged photography
Stripe
Same editorial display type treatment and confidence in letting a single sentence headline carry an entire hero section
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
