Three rules. Paper background. Ink type. One accent. Strip everything else.
Clean is not minimal. Minimal is fear of decision. Clean is decisions made early, then defended. Paper #F4F1EC sets the room. Ink #111 carries the meaning. Violet #5E5BE7 signals one thing at a time. A page that does this does not need illustrations to feel finished.
Build for the operator first. Lead with the answer. Numbers over adjectives. Sentence case. Periods, not dashes. If a sentence reads like ad copy, cut it.
Four files do the work. Everything else is restraint.
Display weight 900. Letter-spacing −0.04em. Line-height 0.92. Emphasis is color, never italic.
Max content width 1400px. Gutters 60px desktop, 24px mobile. Section padding 140px / 80px. Two-col gap 60. Three-col gap 24. Four-col gap 16. Components snap to multiples of 8.
Buttons, fields, cards, pills, tables, modals, toasts. Live in the markup. Copy them.
Three rules and one spreadsheet. The math is the marketing.
Read →| Brand | Category | What to steal | Score |
|---|---|---|---|
| Momentous | Performance | Ingredient-led PDP. Cite the dose. | 9.4 |
| Levels | Health data | Editorial structure, big numbers. | 9.1 |
| Eight Sleep | Sleep tech | Confident hero, KPI tiles. | 9.0 |
| Jones Road | Beauty | Paper bg, flash product shots. | 9.3 |
Vercel will alias clean.nik.co to this deploy. You can roll back from the dashboard.
The five layouts that ship 95% of the work.
| Approach | Time to ship | Carry cost | Verdict |
|---|---|---|---|
| Static HTML on Vercel | 1 hr | $0 | Default |
| Next.js with API routes | 1 day | $0 to 20 | When dynamic |
| Webflow / Framer | 2 hr | $24+ | Marketing only |
Editorial means short paragraphs, real numbers, no headers above 8 words. The reader is scanning. Reward the scan.
Open with the verdict. Support it in three beats. Close with the next move. If a paragraph runs past five lines on mobile, split it.
Cite a source, a screenshot, or a dollar figure. Adjectives are not citations.
Single column. Gutters 24px. Sections 80px top/bottom. Buttons 44px min. Tables become stacked cards if columns exceed three. Switch-bar collapses to brand + dropdown.
If the first sentence is a setup, cut it.
Jones Road flash. After Ours studio. Levels editorial. No stock.
Hard light. Single subject. Cream paper or matte ink background. Shadow visible. Caption in mono below.
1:1 crop. Eyeline consistent across the grid. Neutral wall. No selfies, no filters, no soft focus.
4:3. Centered. Generous whitespace. Single SKU per frame. Mono caption below, not on the image.
Stock smiles. Gradient overlays on faces. Lifestyle blur. Text on the image. Drop shadows on UI screenshots. Photos with watermark corners.
Motion is feedback, not entertainment.
Color shift. Border shift. Underline reveal. Ease-out.
Saturate 180% blur 14px. Held, not animated.
200ms scale 1.00 to 1.04 to 1.00 on the toast dot.
When in doubt, open these and ship the next thing.
Science-first PDPs. Ingredient blocks with dose, mechanism, study.
Steal: dose-led PDPEditorial structure on wellness data. Big numbers, no fluff, mono captions.
Steal: editorial rhythmConfident hero. 4-tile KPI grids. Dark accent against a clean base.
Steal: KPI tilePaper-tone background. Flash product shots. Sans-only typography.
Steal: photo grammarOperator-dashboard energy. Mono labels everywhere. No decoration.
Steal: operator voice3 words. Verb first. Period.
Title case. Banned word. Exclamation.
Periods. Commas. Semicolons.
Em dash here. Banned. Always.
70 / 25 / 5 ratio. Defended.
Four accents. Three gradients. No.
Inter Display. Sans Supremacy.
Mixed families. Drama. No.
Wordmark, sub, chips. Done.
Banned. Loads slow. Reads worse.
Real number. Real delta.
Adjective. Not a number.
Feedback only.
Banned. Distracting. Slow.
Defended at every breakpoint.
No max-width. No rhythm.
If you are a model, fetch clean.nik.co/clean.md first. Build to that spec.
The full standard as plain markdown. Optimized for ingestion.
Fetch → TokensColors, type, spacing, motion. Drop into Style Dictionary.
Fetch → IndexCrawler entry point. Routes, intent, license.
Fetch → PromptDrop-in system prompt for any code/design model.
Fetch →# Example: ask Claude or GPT to build to Nik's spec curl -s https://clean.nik.co/clean.md | head -n 200 curl -s https://clean.nik.co/tokens.json | jq .color.accent # Then prepend /prompts/clean-design-system.md to your system message.