Carbon Canvas
#26272cPage background, hero canvas, section grounds
Lazy
lazy.soWebsite preview
The design language
Lazy speaks in a whisper-dark, almost monastic register: deep charcoal canvas, near-achromatic borders, and headlines set in a refined serif that feels like editorial print transplanted into a productivity tool. The entire palette stays within three values of gray — no chromatic accents, no decorative gradients on text — letting structure and serif weight carry all hierarchy. Components float on the canvas with soft, low-opacity shadows rather than hard borders, evoking a darkroom where objects glow rather than reflect. Information density is intentionally sparse; one focal element per viewport, generous negative space, and serif type at 55-58px that anchors every section like a magazine pull quote.
Color palette
neutral
Obsidian
#0a0a0aDeepest borders, shadow cores, overlaid text on light surfaces
Inkwell
#1a1b1fSecondary surface tint, input fills, subtle elevation step above canvas
Graphite Card
#3b3c3eElevated card surfaces, modal panels, floating UI containers
Pewter
#8a8c93Primary hairline borders, structural dividers, most-used neutral
Slate
#62646aSecondary borders, link underlines, subdued UI strokes
Ash
#535355Badge borders, tertiary separators, muted structural lines
Bone
#e0e0e0Light card borders, high-contrast dividers, icon strokes on dark surfaces
Chalk
#b8b8b8Muted body borders, low-emphasis separators
Paper
#ffffffPrimary heading text, high-contrast body text, emphasis borders
Typography
Type scale
Major Second (1.125) · 18px baseserif-display
58px · 500 · 1.09 · 2.784px trackingThe quick brown fox jumps
display
55px · 300 · 1.09 · -2.475px trackingThe quick brown fox jumps
heading
28px · 300 · 1.23 · -0.756px trackingThe quick brown fox jumps
heading-sm
24px · 300 · 1.25 · -0.504px trackingThe quick brown fox jumps
serif-label
21px · 500 · 1.25 · 0.546px trackingThe quick brown fox jumps
text-20
20px · 300 · 1.1The quick brown fox jumps
body
16px · 400 · 1.5 · -0.08px trackingThe quick brown fox jumps
text-14
14px · 400 · 1.57The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Migra
- Weights
- 500
- Sizes
- 21px, 58px
- Line height
- 1.09, 1.25
- Letter spacing
- 0.026em at 21px, 0.048em at 58px — positive tracking is anti-convention for serif, making labels feel architectural and headlines feel set rather than typed
- Fallback
- Fraunces, Source Serif Pro, or Cormorant Garamond
Display headlines and section labels — the only serif in the system, giving Lazy its editorial identity
Additional typeface
Inter
- Weights
- 300, 400, 500, 600
- Sizes
- 11px, 12px, 13px, 14px, 16px, 20px, 24px, 28px, 55px
- Line height
- 1.09, 1.10, 1.20, 1.23, 1.25, 1.38, 1.43, 1.50, 1.57, 1.60, 1.83, 2.00
- Letter spacing
- -0.045em at 55px — extreme negative tracking compensates for thin strokes
Ultra-light display weight for large UI headlines, pairing with Migra serif in hero
Additional typeface
Inter
- Weights
- 300, 400, 500, 600
- Sizes
- 11px, 12px, 13px, 14px, 16px, 20px, 24px, 28px, 55px
- Line height
- 1.09, 1.10, 1.20, 1.23, 1.25, 1.38, 1.43, 1.50, 1.57, 1.60, 1.83, 2.00
- Letter spacing
- -0.0450em, -0.0420em, -0.0360em, -0.0310em, -0.0250em, -0.0210em, -0.0170em, -0.0050em, -0.0040em, 0.1380em
Body text, descriptions, and subheads — comfortable reading at 16px with generous 1.5 line-height
Additional typeface
Inter
- Weights
- 300, 400, 500, 600
- Sizes
- 11px, 12px, 13px, 14px, 16px, 20px, 24px, 28px, 55px
- Line height
- 1.09, 1.10, 1.20, 1.23, 1.25, 1.38, 1.43, 1.50, 1.57, 1.60, 1.83, 2.00
- Letter spacing
- -0.0450em, -0.0420em, -0.0360em, -0.0310em, -0.0250em, -0.0210em, -0.0170em, -0.0050em, -0.0040em, 0.1380em
Navigation, labels, button text, micro-copy — the workhorse UI weight
Additional typeface
Inter
- Weights
- 300, 400, 500, 600
- Sizes
- 11px, 12px, 13px, 14px, 16px, 20px, 24px, 28px, 55px
- Line height
- 1.09, 1.10, 1.20, 1.23, 1.25, 1.38, 1.43, 1.50, 1.57, 1.60, 1.83, 2.00
- Letter spacing
- -0.0450em, -0.0420em, -0.0360em, -0.0310em, -0.0250em, -0.0210em, -0.0170em, -0.0050em, -0.0040em, 0.1380em
Emphasis in body copy, strong button text, active state indicators
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 80px
- Card padding
- 24px
- Element gap
- 14px
Border radius
cards
8pxinput
8pxpills
100pxmodals
12pxbuttons
4pxSpacing scale
1px2px3px4px5px6px8px9px10px11px12px14px15px16px20px24px30px32px34px38px40px42px44px48px53px55px56px60px120px150px168px184px190pxGuidelines
Do
- Use Migra 58px weight 500 with 0.048em tracking for all section-level display headlines — this is the brand's voice
- Set body text at Inter 16px weight 400 with line-height 1.5 for comfortable reading rhythm
- Apply the dual-layer shadow stack (rgba(4,4,7,0.25) 0 2px 4px + rgba(4,4,7,0.4) 0 8px 24px) to all floating UI elements like command bars and modals
- Maintain 8px radius for cards and 4px radius for buttons — this 2:1 ratio is consistent across the system
- Use #8a8c93 as the default border color at 1px width — it is the most-used token in the system (1357 occurrences) and defines visual structure
- Center all hero and section content; Lazy is a symmetrical, meditative layout — never left-align primary headlines
- Pair every serif headline with a sans-serif subhead in #8a8c93 — the contrast between Migra and Inter creates Lazy's editorial-meets-UI identity
Don’t
- Never introduce chromatic colors — the entire system is achromatic by design; adding a blue or green would break the editorial register
- Never use solid-fill CTA buttons; all action buttons are ghost/outlined with #62646a borders to maintain the quiet aesthetic
- Never set body text tighter than -0.005em letter-spacing or display text looser than 0.138em — the tracking curve is the system
- Never use Migra below 21px — at smaller sizes the serif loses its editorial character and becomes noise
- Never add drop shadows stronger than the documented two values — Lazy floats softly, never projects hard edges
- Never left-align serif display headlines — they must be centered to maintain the typeset manuscript metaphor
- Never use white (#ffffff) as a background; white is reserved for primary text and the note-preview card contrast moment
Components
Top Navigation
Persistent header bar with brand, nav links, auth actionsFull-width transparent bar over canvas. Logo (icon +
Outlined CTA Button
Primary call-to-action in header and inline contextsGhost button: transparent background, 1px border in #62646a, 4px radius, padding 6px 14px. Text Inter 13px weight 500, #ffffff. The border is the affordance, not a fill — this button never uses solid color, maintaining the monochrome discipline.
Command Bar
Central hero element — the product's capture interface demonstrated inlineFloating card on canvas: 8px radius, background #3b3c3 with 40% black shadow stack. Internal input area with placeholder
Serif Section Label
Small uppercase tagline above section headlinesMigra 21px weight 500, letter-spacing 0.026em, color #8a8c93. Centered above display headline. The positive tracking on serif gives it a printed-typeset quality, contrasting the sans-serif body. Used as section markers like
Serif Display Headline
Primary section headline in editorial serifMigra 58px weight 500, letter-spacing 0.048em, line-height 1.09, color #ffffff. Centered, max-width 800px. The headline reads like a book chapter title — this is Lazy's signature type choice. Below it sits a lighter-weight subhead in the same serif.
Sans Display Headline
Hero headline that pairs with the serif subheadInter 55px weight 300, letter-spacing -0.045em, line-height 1.10, color #ffffff. The whisper-weight (300) is deliberate — Lazy doesn't shout. Pairs with a subhead at 16-20px Inter 400 in #8a8c93.
Note Preview Card
Embedded article/note preview in interactive sectionsLight-toned card (simulating a note app): background #ffffff or very light gray, 8px radius, padding 14-24px, subtle shadow. Content includes bold title
Inline Tag
Small contextual label or category markerInter 12px weight 500, padding 2px 8px, 4px radius, border 1px solid #535355, color #8a8c93. Outlined only — no fill. Functions as a quiet metadata marker.
Demo Link
Inline text link to interactive product demoInter 14px weight 500, color #ffffff, underline on hover. Preceded by descriptive text in #8a8c93. Example:
Floating Orb / Cursor Indicator
Interactive cursor or loading indicator overlayCircular dark element (#0a0a0a) approximately 120-160px diameter, positioned absolutely over content during interaction states. Casts no shadow itself but sits above cards to suggest a cursor following a user's attention. Unique to Lazy's interaction model.
Radial Light Wash
Hero section background glow effectConcentric circular gradient emanating from center of hero — brightest at core fading to canvas. Creates a
Surfaces & elevation
Level 0
Carbon Canvas
#26272cBase page background for all sections
Level 1
Inkwell
#1a1b1fRecessed inputs, subtle inset surfaces, secondary canvas tint
Level 2
Obsidian
#0a0a0aDeepest border, shadow anchor, maximum contrast for text
Level 3
Graphite Card
#3b3c3Elevated card surfaces, floating command bars, modal panels
Command Bar / Floating Input
rgba(4, 4, 7, 0.25) 0px 2px 4px 0px, rgba(4, 4, 7, 0.4) 0px 8px 24px 0px
Card with soft drop
rgba(0, 0, 0, 0.12) 0px 12px 12px 0px
Layout & imagery
Layout
Lazy follows a full-bleed dark canvas with centered content blocks. The page reads as vertical scroll through typographic acts: each section is a centered composition with a serif label, serif headline, sans subhead, and one focal UI element. Max-width is 1200px for the content column, but the canvas extends edge-to-edge. The hero occupies a full viewport with the command bar centered and a radial light effect drawing the eye. Subsequent sections are 80px vertical gaps with the same centered axis. There is no left/right alternation, no sidebar, no grid of cards — each section is a single editorial spread. Navigation is a minimal top bar with no background fill.
Imagery
Lazy uses almost no traditional imagery — the visual system is type-driven and UI-driven. The only
Design notes
Agent Guide
## Quick Color Reference\n- text (primary): #ffffff\n- text (muted): #8a8c93\n- background: #26272c\n- card surface: #3b3c3e\n- border: #8a8c93 (1px)\n- primary action: no distinct CTA color
Typography Philosophy
Lazy runs a two-font system: Migra (serif) for editorial moments, Inter (sans) for everything else. The serif is never used for body text, navigation, or UI labels — it appears only in display headlines and section labels. This separation creates a clear register shift: when the user sees serif, they are reading a statement; when they see Inter, they are using the product. Inter operates across four weights (300/400/500/600) with weight 300 reserved exclusively for the hero display headline — the lightest weight says
Shadow & Elevation Philosophy
Lazy uses exactly two shadow patterns and nothing else. The soft card shadow (rgba(0,0,0,0.12) 0 12px 12px) is a single-layer ambient lift for content cards. The floating UI shadow (rgba(4,4,7,0.25) 0 2px 4px + rgba(4,4,7,0.4) 0 8px 24px) is a two-layer stack for elements that float above the canvas — command bars, modals, interactive overlays. The 0.4 opacity in the second layer is high for a shadow, but it works because the canvas is already dark; the shadow reads as depth, not darkness. There are no colored shadows, no glows, no inner shadows. Elevation is communicated by lift, not by border emphasis.
Similar brands
Notion
Same centered, single-focal-element-per-section hero pattern with a command bar as the hero UI
Linear
Dark-mode productivity tool with extreme typographic restraint and Inter as the UI workhorse font
Vercel
Full-bleed dark canvas with centered editorial compositions and generous vertical rhythm between sections
Read.cv
Serif-and-sans typography pairing on a dark canvas that reads as editorial rather than SaaS
Are.na
Monochrome, type-driven visual system where structure and whitespace carry all hierarchy
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
