Ember
#e7000bRed decorative accent for icons, marks, and small graphic details. Use as a supporting accent, not as a status color
Ui
ui.shadcn.comWebsite preview
The design language
shadcn/ui is a monochromatic design-system workshop: pure white canvas, soft warm-gray surfaces, and large-radius cards floating on hairline borders. The interface is almost entirely achromatic — black text, white surfaces, gray secondary tones — with a single destructive red reserved for error states and nothing else. Typography leans on Geist's geometric neutrality with tight letter-spacing on display sizes, creating a quiet, code-adjacent feel that reads as developer infrastructure rather than consumer product.
Color palette
accent
neutral
Canvas
#f5f5f5Page background, muted surface fills, secondary buttons
Paper
#ffffffCard surfaces, popover backgrounds, primary button fills
Surface Alt
#fafafaSidebar background, subtle card variant, input resting state
Ink
#0a0a0aPrimary text, headings, button labels, icon strokes
Ink Soft
#171717Filled button backgrounds, secondary text on light surfaces
Mid Gray
#737373Muted body text, placeholder text, helper labels, icon fills at rest
Hairline
#e5e5e5Borders, input outlines, card edges, badge outlines
Typography
Type scale
Major Second (1.125) · 16px basedisplay
48px · 600 · 1.1 · -2.4px trackingThe quick brown fox jumps
heading-lg
36px · 500 · 1.11 · -0.9px trackingThe quick brown fox jumps
heading
30px · 600 · 1.2 · -0.75px trackingThe quick brown fox jumps
heading-sm
24px · 600 · 1.33 · -0.6px trackingThe quick brown fox jumps
subheading
18px · 400 · 1.56The quick brown fox jumps
body-lg
16px · 400 · 1.5The quick brown fox jumps
body
14px · 400 · 1.43The quick brown fox jumps
text-13
13px · 500 · 1.5The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Geist
- Weights
- 400, 500, 600
- Sizes
- 12, 13, 14, 16, 18, 24, 30, 36, 48
- Line height
- 1.10, 1.11, 1.20, 1.33, 1.43, 1.50, 1.56, 1.63, 2.00
- Letter spacing
- -0.0500em at display (48px), -0.0250em at subheading (24–30px), 0.0500em at caption (12px uppercase). Tracking tightens aggressively at large sizes and loosens slightly at small uppercase labels.
- Fallback
- Inter
- Features
- "ss01" on, "cv11" on
All interface text — body at 14px/400, headings ranging 24–48px/600, buttons at 13–14px/500. Geist's geometric letterforms and uniform stroke width create a developer-tool neutrality; weight 600 at 48px with -0.05em tracking produces tight, confident display headlines that feel engineered rather than editorial.
Spacing & shape
Spacing
- Density
- compact
- Base unit
- 4px
- Max width
- 1280px
- Section gap
- 48-80px
- Card padding
- 20px
- Element gap
- 8px
Border radius
cards
24pxsmall
6pxbadges
18pxinputs
18pxnested
10pxbuttons
18pxSpacing scale
2px4px5px6px8px10px12px14px16px20px24px48pxGuidelines
Do
- Use #0a0a0a on #ffffff for filled buttons — the dark inversion is the only primary action treatment.
- Maintain 18px radius on all buttons, inputs, and badges for perfect pill geometry; use 24px radius only on cards.
- Set display headlines at 48px/600 with -0.0500em tracking — Geist's geometric weight at this size with aggressive tightening produces the engineered headline voice.
- Reserve #e7000b exclusively for destructive states; never use it for decoration, branding, or non-error emphasis.
- Stack card shadows as 1px hairline + 1px + 2px offset — the combined effect is a barely-perceptible elevation that reads as 'card' without drama.
- Use #f5f5f5 for secondary surfaces and inputs; use #fafafa for sidebar and subtle card variants — the three-tone surface stack (canvas → soft → paper) creates layering without borders.
Don’t
- Do not introduce chromatic brand colors beyond #e7000b — the monochromatic palette is the system.
- Do not use border-radius values other than 18px (interactive) or 24px (containers); avoid square corners on any element.
- Do not skip the 1px hairline border on cards — the shadow alone does not define the card edge in this system.
- Do not set body text below 14px or above #737373 lightness — the type scale is deliberately compact.
- Do not apply gradients, colored shadows, or accent fills — every surface is a solid tone.
- Do not use letter-spacing wider than 0.05em or tighter than -0.05em; tracking outside this range breaks the typographic system.
- Do not mix filled and outline buttons of the same size in a single row without visual rhythm — alternate ghost or secondary variants.
Components
Primary Filled Button
High-emphasis action (Submit, Save, Create)Background #0a0a0a, text #fafafa, border none, radius 18px, padding 0px 12px (compact) or 8px 16px (comfortable), font 14px Geist weight 500. Height ≈ 36–40px. The dark-on-light inversion is the only chromatic interaction in the system; the fully rounded radius (18px on a ~36px height) produces perfect pill geometry.
Secondary Ghost Button
Low-emphasis action (Cancel, Back)Background #f5f5f5, text #0a0a0a, no border, radius 18px, padding 0px 12px or 8px 16px, font 14px weight 500. Soft gray fill reads as a tonal sibling to the primary rather than a muted alternative — both buttons share shape and type, differing only in lightness.
Outline Button
Tertiary action with visible boundaryBackground transparent, text #0a0a0a, border 1px solid #e5e5e5, radius 18px, padding 0px 12px or 8px 10px. The hairline border defines the shape without weight — preferred when the button sits inside a card or alongside filled controls.
Card
Content container for blocks, previews, dashboard panelsBackground #ffffff, radius 24px, border 1px solid #e5e5e5, shadow oklab(0.145/.05) 0 0 0 1px + rgba(0,0,0,0.1) 0 1px 3px + rgba(0,0,0,0.1) 0 1px 2px -1px, padding 20px. The 1px hairline shadow stacks with a faint elevation layer — cards sit visually raised but remain flat and understated.
Nested Card Header/Footer
Header or footer strip inside a cardAsymmetric radius — top corners 24px on header, bottom corners 24px on footer. Padding 20px horizontal, transparent fill. Provides a subtle tonal band within card boundaries without introducing a new color.
Input Field
Text entry, search, form controlsBackground #f5f5f5 (resting) or transparent (inline), text #0a0a0a, border none at rest with 1px #e5e5e5 on focus, radius 18px, padding 8px 10px, font 14px weight 400. The soft gray fill differentiates the input from the card surface beneath it; focus replaces the fill with a 1px ring.
Badge — Solid
Tag, status pill, counterBackground #171717, text #fafafa, radius 18px, padding 2px 8px, font 12px weight 500. Pill-shaped at 18px radius — the minimum height creates a capsule tag.
Badge — Soft
Neutral label, category tagBackground #f5f5f5, text #171717, radius 18px, padding 2px 8px, font 12px weight 500. Same capsule geometry as solid badge, tonal variant.
Badge — Outline
Subtle tag with no fillTransparent background, text #0a0a0a, radius 18px, padding 2px 8px. The lightest-weight tag — used when the label is informational rather than categorical.
Sidebar Surface
Left navigation panelBackground #fafafa, full-height, contained width. Sits one tonal step off the canvas (#f5f5f5) so the navigation reads as a distinct layer without introducing a divider line.
Breadcrumb Trail
Hierarchical path indicatorInline text with chevron separators, font 14px weight 400, color #737373 for separators and #0a0a0a for the current segment. No background, no borders — purely typographic hierarchy.
Stat Block
Large numeric metric displayLabel in 12–14px uppercase #737373, value in 30–48px weight 600 #0a0a0a with tight tracking. Progress bar or comparison text in 14px #737373. The block relies on typographic scale alone — no card chrome — to establish the metric.
Search Trigger
Command palette / search inputBackground #f5f5f5, text #737373, radius 18px, padding 8px 10px, with a keyboard shortcut indicator (e.g., ⌘K) right-aligned. Functions as both a button and an input affordance.
Destructive Action
Delete, remove, revoke — error-adjacent interactionsText or icon in #e7000b against the monochromatic palette. The red is the only chromatic hue in the system and appears exclusively in destructive or error contexts — it never decorates.
Surfaces & elevation
Level 0
Canvas
#f5f5f5Page background, broadest layer
Level 1
Sidebar
#fafafaNavigation surface, one step lighter than canvas
Level 2
Card
#ffffffPrimary content container, brightest surface
Level 3
Input Fill
#f5f5f5Resting input field, matches canvas tone for subtle differentiation
Card
0 0 0 1px rgba(23,23,23,0.05), 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1)
Button (filled)
none — relies on tonal contrast, not shadow
Input (focus)
1px solid #e5e5e5 ring, no offset shadow
Layout & imagery
Imagery
Minimal imagery — the system is almost entirely UI. No hero photography, no illustrations, no decorative graphics. Product showcases are rendered as component mockups (cards, inputs, buttons) in a grid, serving as both documentation and visual content. Icons are thin-stroke geometric marks (likely Lucide-derived) at 1.5–2px stroke weight in #0a0a0a or #737373, used sparingly as functional cues. The visual language IS the UI components themselves — the page functions as a living style guide where every visible element is a design token made visible.
Design notes
Agent Guide
**Quick Color Reference** - Canvas/background: #f5f5f5 - Card/surface: #ffffff - Primary text: #0a0a0a - Muted text: #737373 - Border: #e5e5e5 - primary action: #171717 (filled action) - Destructive: #e7000b **Example Component Prompts** 1. Create a dashboard stat card: white (#ffffff) background, 24px radius, 1px solid #e5e5e5 border, shadow 0 0 0 1px rgba(23,23,23,0.05) + 0 1px 3px rgba(0,0,0,0.1) + 0 1px 2px -1px rgba(0,0,0,0.1), 20px padding. Label in 12px uppercase #737373, value in 36px Geist weight 600 #0a0a0a with -0.025em tracking. 2. Create a filled dark button: background #0a0a0a, text #fafafa, no border, 18px radius, padding 0px 12px, font 14px Geist weight 500. Height 36px. No shadow — tonal contrast only. 3. Create a ghost secondary button: background #f5f5f5, text #0a0a0a, no border, 18px radius, padding 0px 12px, font 14px weight 500. Same dimensions as the filled button for visual parity. 4. Create an input field: background #f5f5f5, text #0a0a0a, placeholder #737373, no border at rest, 18px radius, padding 8px 10px, font 14px weight 400. On focus: 1px solid #e5e5e5 ring with no offset. 5. Create a badge tag: background #171717, text #fafafa, 18px radius (full pill), padding 2px 8px, font 12px Geist weight 500.
Design Philosophy
shadcn/ui is built on three principles visible in every token: (1) achromatic by default — color is absence, not expression; (2) radius defines hierarchy — 18px for interactive elements, 24px for containers, never anything in between; (3) elevation is whisper-quiet — the card shadow is barely perceptible, relying on 1px hairlines and tonal contrast rather than dramatic drop shadows. The system is designed to be copied, modified, and owned — every value is explicit, every token is simple, and nothing is locked behind abstraction.
Similar brands
Vercel
Same monochromatic palette, same Geist/geometric sans pairing, same pill-shaped buttons with tight letter-spacing on display text
Linear
Identical approach to monochromatic UI with single accent for destructive states, tight typographic tracking, and hairline-bordered cards
Radix UI
Same developer-tool visual language — neutral surfaces, geometric type, and component-first documentation layout
Tailwind UI
Matching restrained palette, identical border-radius scale (large radii on containers), and code-adjacent minimal chrome
Cal.com
Same compact density, same pill-badge system, and the same achromatic-first approach with red reserved for errors
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
