Paper White
#ffffffText on dark buttons, pill button backgrounds.
v0 by Vercel
v0.devWebsite preview
The design language
The design feels like a functional schematic on a stark white drafting table. Its nearly monochrome palette — #FFFFFF, #FAFAFA, #EAEAEA, #171717 — creates a utility-first atmosphere where user input is the only source of color. Typography is the main architectural element; a custom sans-serif is used everywhere, with tight negative letter-spacing at large sizes creating dense, impactful headlines. The UI is built from simple primitives: solid black CTAs with an 8px radius and subtly bordered white chips, distinguishing primary commands from secondary suggestions.
Color palette
neutral
Canvas
#fafafaPrimary page background.
Line
#eaeaeaBorders for headers, ghost buttons, and dividers.
Subtext
#666666Secondary text, navigation links, placeholder text.
Icon
#7d7d7dInactive icons and tertiary UI elements.
Ink
#171717Primary text, headlines, and primary button backgrounds.
Onyx
#000000Logo, icons, highest contrast text.
Typography
Type scale
Major Second (1.125) · 16px basedisplay
48px · 600 · 1 · -2.88px trackingThe quick brown fox jumps
heading-lg
32px · 600 · 1.17 · -1.28px trackingThe quick brown fox jumps
heading
24px · 600 · 1.33 · -0.48px trackingThe quick brown fox jumps
heading-sm
20px · 600 · 1.25The quick brown fox jumps
subheading
18px · 400 · 1.56The quick brown fox jumps
body
16px · 400 · 1.5The quick brown fox jumps
text-15
15px · 400 · 1.33The quick brown fox jumps
body-sm
14px · 400 · 1.43The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
GeistSans
- Weights
- 400, 500, 600
- Sizes
- 13px, 14px, 15px, 16px, 18px, 20px, 24px, 32px, 48px
- Line height
- 1.00, 1.17, 1.25, 1.30, 1.33, 1.43, 1.50, 1.56
- Letter spacing
- Ranges from -2.88px at 48px to normal at 16px. The progressively tighter tracking on larger sizes is a key brand identifier.
- Fallback
- Inter
- Features
- "zero", "ss09", "ss05"
The universal font for all UI text, from body copy to display headings. Weight 600 is used for major headlines, 500 for buttons, and 400 for body text. Its signature is the aggressive negative letter-spacing at large sizes, creating dense, block-like headlines.
Additional typeface
GeistMono
- Weights
- 400
- Sizes
- 10px
- Line height
- 1.50
- Fallback
- IBM Plex Mono
- Features
- "zero"
Used for small, technical annotations or user statistics where tabular alignment is beneficial.
Spacing & shape
Spacing
- Density
- compact
- Max width
- 1440px
- Section gap
- 96px
- Card padding
- 16px
- Element gap
- 8px
Border radius
cards
12pxpills
9999pxinputs
12pxbuttons
8pxSpacing scale
1px2px4px6px8px10px11px12px16px20px24px32px36px40px48px50px64px72px80px96px108px128px224pxGuidelines
Do
- Use GeistSans for all text, without exception.
- Apply aggressive negative letter-spacing to headings 24px and larger.
- Adhere strictly to the achromatic palette; all color comes from content, not chrome.
- Use 8px radius for buttons and 12px for cards and inputs.
- Use 1px solid #eaeaea for all visual dividers.
- Differentiate action hierarchy using fills and borders: solid for primary, bordered for secondary, text-only for tertiary.
- Maintain generous whitespace (min. 96px) between content sections.
Don’t
- Do not introduce any saturated colors to the UI chrome.
- Do not use system fonts or other brand fonts.
- Do not use shadows on interactive elements like buttons or inputs; reserve them for cards.
- Do not use any border-radius values other than 6px, 8px, 12px, or 9999px (for pills).
- Do not use gradients or background images.
- Do not use bold (700+) font weights; rely on 600 weight and size for emphasis.
- Do not create dense layouts; prioritize clarity and space.
Components
Main Prompt Input
Template Filter Pills
Button Group — Action Hierarchy
Primary CTA Button
The main action on a page, like 'Sign Up'.Solid Ink (#171717) background with Paper White (#ffffff) text. Font is 14px GeistSans at 500 weight. Padding is ~8px vertically and 12px horizontally, with an 8px border radius.
Ghost Navigation Link
Secondary navigation actions like 'Sign In'.Transparent background with Subtext (#666666) text. No border in its default state. Font is 14px GeistSans at 400 weight.
Prompt Suggestion Chip
Clickable suggestions below the main input.Transparent background with a 1px Line (#eaeaea) border. Text is Subtext (#666666) at ~13px. Padding is 4px vertically and 8px horizontally, with a 6px border radius.
Filter Pill Button
Filtering content categories like 'Landing Pages'.A pill-shaped button (9999px radius) with a Paper White (#ffffff) background and Ink (#171717) text. Features a faint 1px border of `rgba(0, 0, 0, 0.08)`.
Main Prompt Input
The primary interaction point for user queries.A large input field with a 12px border radius and a subtle 1px Line (#eaeaea) border. Placeholder text is Subtext (#666666). On focus, it gets a subtle outer glow.
Header Divider
Separates the sticky header from page content.A full-width 1px solid border using the Line color (#eaeaea).
Surfaces & elevation
Template Card
0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 2px 1px 0px rgba(0, 0, 0, 0.04)
Modal / Popover
0px 25px 50px -12px rgba(0, 0, 0, 0.25)
Layout & imagery
Layout
The layout is clean and centered within a generous max-width container (approx. 1440px). The header is full-width with a 1px bottom border. The hero area is a simple centered stack comprising a headline, a large input field, and suggestion chips. Body sections are separated by large vertical whitespace (~96px) on the Canvas (#fafafa) background, creating a spacious rhythm. Content grids, such as the 3-column template gallery, are the primary structure for displaying information.
Imagery
This design uses no decorative imagery. Visuals are strictly confined to user-generated content previews within the Template Cards. These thumbnails are presented as raw, unstyled content inside a 12px rounded container. The page is UI-dominant, with imagery serving only to showcase product output, not to build atmosphere.
Design notes
Agent Guide
### Quick Color Reference - **Page Background**: `#fafafa` (Canvas) - **Primary Text**: `#171717` (Ink) - **Subtle Text**: `#666666` (Subtext) - **Border**: `#eaeaea` (Line) - **CTA Background**: `#171717` (Ink) - **CTA Text**: `#ffffff` (Paper White) ### Example Component Prompts 1. **Primary Button:** `Create a button with 'Get Started' text. It needs a #171717 background, #FFFFFF text, 8px corner radius, and font size 14px.` 2. **Display Headline:** `Generate a headline 'Start with a template'. Use GeistSans 32px weight 600, color #171717, and letter-spacing of -1.28px.` 3. **Template Card:** `Design a card container with a 12px border-radius, a white background, and a box-shadow of '0px 0px 0px 1px rgba(0,0,0,0.08), 0px 2px 1px 0px rgba(0,0,0,0.04)'.`
Similar brands
Linear
Shares the high-contrast, black/white/gray palette and surgically precise typography.
GitHub
Similar utilitarian, developer-centric aesthetic with a focus on functional components over decoration.
Read.cv
Extreme typography-first approach on a minimal, monochrome canvas.
Height
Clean, high-contrast UI with a similar approach to minimal buttons and inputs.
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
