---
title: "Lazy design system"
variant: extended
source: https://lazy.so/
captured_at: 2026-10-12
theme: dark
industry: productivity
generator: Design DNA (https://four.wiralomi.com/style/lazy-so)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Lazy · Design System

> A quiet dark canvas for capturing ideas

**Theme:** dark · **Industry:** productivity · **Source:** https://lazy.so/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Lazy presents a keyboard-first capture tool through a restrained dark interface and large, immersive product demonstrations. Editorial serif headlines contrast with clean sans-serif interface text, while broad areas of negative space keep attention on the product.

## North star

Keep the interface nearly monochrome and spacious, using elegant serif display type and product captures—not bright decoration—to create contrast.

## Overview

The page uses a near-black canvas, #131416, to create a quiet, cinematic foundation. The opening hero adds a large circular product backdrop and a thin horizontal glow; this is an atmospheric treatment, not a cue to introduce bright brand colours. White headlines sit beside subdued gray text, with Migra providing expressive serif emphasis and Inter carrying navigation, descriptions, and interface copy. The opening composition is centered and immersive, while later feature content shifts to a more structured, left-aligned presentation within a measured maximum width. Generous vertical gaps separate the major content moments, giving the page a deliberately spacious pace. Product screenshots and browser-like captures supply most of the visual detail, framed in dark rounded surfaces with restrained borders and shadows. Keep interface surfaces close in value to the canvas: contrast comes primarily from typography, image framing, and selective light rather than vivid accents.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Midnight Canvas | `#131416` | `--color-midnight-canvas` | brand | Primary page canvas and dominant background behind the hero and feature sections. |
| Soft Graphite | `#8a8c93` | `--color-soft-graphite` | neutral | Main muted text and subdued headline treatment across the page and interface cards. |
| Slate Surface | `#27282d` | `--color-slate-surface` | surface | Large opening section backdrop, card surfaces, section surfaces, and understated borders. |
| Quiet White | `#ffffff` | `--color-quiet-white` | neutral | Primary high-contrast text, including emphasized hero and section headings. |
| Shadow Charcoal | `#1c1d21` | `--color-shadow-charcoal` | surface | Dark gradient and card layer; supports image framing and atmospheric transitions. |
| Pale Gray | `#e0e0e0` | `--color-pale-gray` | neutral | Secondary light text where muted gray needs a slightly brighter reading contrast. |
| Deep Graphite | `#17171a` | `--color-deep-graphite` | surface | Subtle dark card and interface layer, close in value to the page canvas. |
| Smoky Border | `#525357` | `--color-smoky-border` | semantic | Low-emphasis edge detail in interface and decorative elements, not a prominent divider. |
| Muted Steel | `#4e4f52` | `--color-muted-steel` | neutral | Rare subdued text or incidental interface detail; keep secondary to the main text palette. |
| Dusk Edge | `#4b4a51` | `--color-dusk-edge` | semantic | Subtle border and background detail on dark layered surfaces. |
| Cool Ash | `#62646a` | `--color-cool-ash` | neutral | Occasional low-contrast text and small interface details. |
| Silver Haze | `#b5b6ba` | `--color-silver-haze` | neutral | Infrequent lighter text detail; use sparingly within the otherwise restrained gray hierarchy. |
| Carbon Layer | `#313135` | `--color-carbon-layer` | surface | Subtle dark gradient and card detail, including layered product presentation. |

### Semantic aliases

`--color-canvas` → `#131416` (Midnight Canvas) · `--color-surface` → `#27282d` (Slate Surface) · `--color-text` → `#ffffff` (Quiet White) · `--color-text-muted` → `#8a8c93` (Soft Graphite) · `--color-text-subtle` → `#e0e0e0` (Pale Gray) · `--color-border` → `#27282d` (Slate Surface)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#131416` | 18.43:1 | AAA |
| `#ffffff` | `#27282d` | 14.71:1 | AAA |
| `#8a8c93` | `#131416` | 5.49:1 | AA |
| `#8a8c93` | `#27282d` | 4.38:1 | AA-large |
| `#e0e0e0` | `#131416` | 13.96:1 | AAA |
| `#e0e0e0` | `#27282d` | 11.14:1 | AAA |

### Gradients

- `linear-gradient(86.26deg, rgba(28, 29, 33, 0.98) 61.1%, rgba(28, 29, 33, 0.392) 96.93%)`
- `linear-gradient(177.75deg, rgba(26, 27, 30, 0.9) 1.89%, rgba(12, 13, 17, 0.5) 98.11%)`
- `linear-gradient(138.16deg, rgb(49, 49, 53) -14.83%, rgb(31, 32, 36) 92.59%), linear-gradient(94.85deg, rgb(140, 140, 147) 0.63%, rgb(63, 63, 67))`
- `linear-gradient(270deg, rgb(138, 140, 147) 50%, rgba(138, 140, 147, 0.6))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 500, 300, 600 | Navigation, body copy, interface labels, and lightweight sans-serif headings. | Inter |
| Migra | `--font-display` | webfont | 400, 500 | Editorial display headlines and serif contrast within hero and feature headings. | Cormorant Garamond |

- **Inter:** Use mostly light to regular weights; headlines can be especially light, with compact tracking and sentence case.
- **Migra:** Use sparingly for elegant serif emphasis; measured display and heading styles use moderate weights and subtle positive tracking.

### Type scale — Perfect Fourth (ratio ≈ 1.329, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 58px | 500 | 1.09 | 0.026em | — | Migra | Serif display emphasis in the hero and editorial feature headlines. |
| h1 | 55px | 300 | 1.09 | -0.025em | — | Inter | Light sans-serif hero heading and prominent primary page statement. |
| h2 | 39px | 400 | 1.23 | 0.031em | — | Migra | Serif-led feature heading, often paired with a sans-serif line. |
| h3 | 36px | 300 | 1.25 | -0.019em | — | Inter | Light sans-serif heading for secondary product or feature content. |
| h4 | 20px | 300 | 1.1 | -0.025em | — | Inter | Small, light sans-serif labels and supporting subheadings. |
| body | 14px | 400 | 1.57 | -0.036em | — | Inter | Descriptions, supporting copy, and explanatory text. |
| caption | 13px | 400 | 1.2 | 0 | — | Inter | Compact interface captions and low-priority product details. |
| eyebrow | 13px | 500 | 1.23 | 0.138em | uppercase | Inter | Uppercase section labels above feature headings. |

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 1, 2, 3, 4, 5, 6, 8, 9, 10, 11, 12, 14, 15, 16, 20, 24 px.
- Section rhythm 220px · element gap 40px · card padding — · max content width 1064px.

Use a spacious single-page flow with a centered, immersive hero followed by feature sections that sit within a measured 1064px maximum width. The hero centers its headline and interactive product capture inside a full-bleed circular visual; later content shifts toward left-aligned headings and product media. Keep the measured 220px section gap and 40px element gap as the rhythm baseline. Feature content can use a four-column structure, while the visible content stays sparse and product-led. Avoid dense stacking: negative space is a defining part of the composition.

## Shape & elevation

- Radius: card `8px` · media `22px` · xs `4px` · sm `8px` · md `22px`
- Shadow `md` (card): `rgba(0, 0, 0, 0.12) 0px 12px 12px 0px`
- Shadow `inset` (card): `rgba(255, 255, 255, 0.17) 0px -2px 6px 0px, rgba(0, 0, 0, 0.4) 0px 5px 18px 0px, rgba(0, 0, 0, 0.4) 0px 4px 40px 8px, rgba(0, 0, 0, 0.3) 0px 1px 4px -1px, rgba(255, 255, 255, 0.3) 0px 0px 0px 0.3px in`
- Shadow `lg` (card): `rgba(4, 4, 7, 0.45) 0px 2px 2px 0px, rgba(4, 4, 7, 0.6) 0px 8px 24px 0px`
- Shadow `md-2` (other): `rgb(255, 255, 255) 0px 0px 10px 0px`
- Shadow `hairline` (other): `rgb(26, 27, 31) 0px 1px 0px 0px`

Keep most surfaces visually flat and close to the canvas. Product cards use soft dark shadows and subtle edge definition to separate layered interface captures without looking like bright floating panels. Apply the measured 8px card radius and 22px media radius to their corresponding elements. Reserve the more pronounced glow for atmospheric hero lighting or a specific product detail, not every component.

## Imagery

Use product demonstrations, browser-like screenshots, and captured content rather than lifestyle photography or decorative illustration. Frame media inside dark, softly rounded surfaces and let readable white document areas appear as part of the product capture. The hero’s circular backdrop and horizontal light flare are cinematic visual treatments. Keep their brightness controlled so the surrounding page remains nearly black and the product stays legible.

## Components

### Top navigation

Compact, low-contrast navigation over the dark hero: brand mark at left, primary links centered, and account and Get Lazy actions at right.

### Hero headline

Centered headline combining a light Inter phrase with expressive Migra serif emphasis, followed by a subdued one-line product promise.

### Capture demo

Dark capture composer centered in the hero, with restrained borders, layered controls, an Inbox option, and a compact Capture action.

### Feature media

Large product screenshots and browser-like captures sit in rounded dark frames, with captured article content providing the brightest area.

### Capture detail cards

Small dark cards present save-link actions and metadata such as author details and notes; use the measured 8px card radius.

### Section eyebrow

Small uppercase Inter label above centered or left-aligned feature headlines, separated clearly from the main copy.

### Measured component styles

- **Card** (“Save the link”): background #383a42 · text #8a8c93 · radius 8px · padding 0px · 400 14px Inter · shadow rgba(0, 0, 0, 0.12) 0px 12px 12px 0px

## Do

- Use #131416 as the dominant page canvas.
- Keep text hierarchy within white, gray, and near-black tones.
- Pair Inter utility text with occasional Migra serif emphasis.
- Give major sections generous vertical separation.
- Let product screenshots carry the visual detail.
- Use dark, softly rounded surfaces for interface mockups.

## Don't

- Do not introduce bright accent colours absent from the measured palette.
- Do not fill the negative space with extra decoration.
- Do not make every heading serif or highly expressive.
- Do not turn screenshots into generic lifestyle imagery.
- Do not use strong borders around every card.
- Do not crowd the hero with extra calls to action.

## Agent prompt

Build a new page in Lazy’s quiet, product-led visual style. Use Midnight Canvas (#131416) as the dominant background, Slate Surface (#27282d) and Deep Graphite (#17171a) for restrained layering, Quiet White (#ffffff) for primary text, and Soft Graphite (#8a8c93) for supporting copy. Use Inter for navigation, interface labels, and body text; reserve a refined serif such as Cormorant Garamond for Migra-like editorial emphasis. Center the hero around a product capture, then organize later content in spacious, clearly separated sections within the measured 1064px content width. Prefer screenshots and realistic interface mockups over decoration. Keep cards softly rounded, shadows subtle, borders low contrast, and all contrast intentional. Do not add vivid accents or compress the generous whitespace.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed dark hero with centered navigation, headline, capture composer, and circular atmospheric backdrop. | Primary product demo, Top-level navigation, Centered product promise | Dark capture panel, Serif headline emphasis, Horizontal light flare |
| 2 | video | Centered eyebrow and paired headline above a single large product demonstration on the dark canvas. | Workflow benefit explanation, Product demonstration | Centered typography, Captured document media, Subdued section label |
| 3 | product-showcase | Left-aligned title above a wide product showcase, with supporting feature details arranged in columns below. | Multiple capture use cases, Feature explanation, Product-led browsing | Browser capture, Dark action cards, Multi-column supporting copy |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/lazy-so