# Clean. Nik Sharma's build standard.

A single-fetch spec for designers and AI agents. Build to this and Nik approves on the first try.

Sibling site: identity.nik.co (the brand book). This site is the operating manual.

## 0. House rules (non-negotiable)

1. Sentence case. Always.
2. No em dashes. No en dashes. Use periods, commas, semicolons.
3. Headlines 8 words or less.
4. Numbers over adjectives.
5. Verbs first. Ship, cut, move, decide.
6. Paper background. Ink type. One accent.
7. 70 / 25 / 5 ratio. Paper 70, ink 25, accent 5.
8. 8pt grid. No exceptions.
9. Public, indexable. No noindex on launch.
10. Mobile 390px QA before live. Tap targets 44px minimum.

## 1. The Standard (philosophy)

Clean is not minimal. Minimal is fear of decision. Clean is decisions made early, then defended.

Reference set: Momentous (science-first), Levels (editorial structure on data), Eight Sleep (confident hero with KPI tiles), Jones Road Beauty (paper bg, flash product shots, sans-only), After Ours (operator-dashboard energy).

When in doubt, open those tabs and ship the next thing.

## 2. Foundations

### Color

| Token | Hex / value | Role |
|---|---|---|
| paper | #F4F1EC | Background. 70% of the page. |
| paperDeep | #ECE7DF | Card wells, image placeholders. |
| ink | #111111 | Type. 25% of the page. |
| inkSoft | #1B1B1B | Body emphasis. |
| mute | rgba(17,17,17,0.55) | Secondary body. |
| line | rgba(17,17,17,0.10) | Hairlines. |
| lineStrong | rgba(17,17,17,0.25) | Borders. |
| accent (violet, default) | #5E5BE7 | 5% of the page. One thing at a time. |
| accentStrong | #4C49CC | Accent hover. |
| ok | #1F7A4A | Status only. |
| danger | #C8403F | Status only. |

Accent options (use one per property): violet #5E5BE7 (default), blue #2563EB, green #15803D, red #DC2626, ember #EA580C, ink #111111.

### Type

- Display: Inter Display 900. Tracking -0.04em. Line 0.92. Use for wordmark, h1, h2.
- Body: Inter Variable 400 / 500. 15px base. Line 1.55. Features ss01, cv11, kern.
- Mono: JetBrains Mono 500. 11px. Tracking 0.22em. UPPERCASE. Use for eyebrows, labels, data, captions.
- Emphasis is color (accent), never italic. Sans Supremacy rule.

Scale:
- h1: clamp(48px, 9vw, 132px)
- h2: clamp(36px, 5.5vw, 72px)
- h3: clamp(22px, 2.6vw, 30px)
- lead: clamp(20px, 2.1vw, 28px), weight 500
- body: 15px
- mono: 11px

### Spacing (8pt)

| Token | px |
|---|---|
| 2xs | 8 |
| xs | 16 |
| s | 24 |
| m | 40 |
| l | 60 |
| xl | 80 |
| 2xl | 140 |

### Grid

- Max content width: 1400px.
- Gutter: 60px desktop, 24px mobile.
- Section padding: 140px desktop, 80px mobile.
- Two-col gap 60, three-col gap 24, four-col gap 16.

## 3. Components

Buttons: pill (999px), 44px min height, 12px / 22px padding. Primary = ink fill paper text. Secondary = paper bg ink text ink border. Ghost = transparent bg ink text faint border. Accent = violet fill white text. Hover = swap to accent. Transition 200ms ease-out.

Fields: 6px radius, 44px min height, mono label in accent 11px 0.22em UPPERCASE, accent border on focus.

Cards (three archetypes):
1. Data card: mono eyebrow, 56px display number, mono delta in ok or danger.
2. Editorial card: mono eyebrow, 22px display headline, 14px mute body, mono "Read" footer.
3. Product card: 4:3 paper-deep shot well, 18px display name, mono price.

Pills / badges: 999px radius, mono UPPERCASE 0.22em, 6px / 12px padding. Variants: default (ink), accent, ok, danger, solid (ink filled).

Tables: mono UPPERCASE header in accent, ink-soft body, hairline rows, 14px body / 10px header.

Modals: 360px max card, mono eyebrow, display headline, mute body, button row at bottom.

Toasts: ink fill, paper text, 8px status dot (ok / warn / danger). One line.

## 4. Layout patterns

- Hero: wordmark + one-line sub in accent + mono chip row at bottom.
- 4-tile KPI grid: 1px ink-line gap, paper tile, mono label + 56px display number + mono meta.
- Pull-quote: bordered top + bottom, 80px accent hairline marks, display 28 to 56px, mono attribution in accent.
- Comparison table: 3 to 4 cols, pill in the verdict column.
- Editorial long-form: 65ch max, short paragraphs, optional left-rail sidebar with 2px accent border.
- Mobile (390px): single column, 24px gutters, 80px section padding, tap targets 44px, sticky nav collapses.

## 5. Voice + copy

Rules:
1. Sentence case.
2. No em dashes, no en dashes.
3. Headlines 8 words or less.
4. Numbers over adjectives.
5. Verbs first.
6. No emojis in headlines.
7. No exclamation marks.
8. Lead with the answer.

Banned words: unlock, empower, revolutionary, game-changing, disrupt, elevate, synergy, curated, best-in-class, world-class, robust, seamless, powerful, cutting-edge, innovative.

Use instead: ship, cut, move, decide, test, measure, operator, honest.

## 6. Imagery

- Flash photography (Jones Road / After Ours). Hard light, neutral bg, shadow visible.
- Headshots 1:1, consistent eyeline across grid, neutral wall, no filters.
- Product 4:3, centered, generous whitespace, single SKU per frame.
- Captions in mono BELOW the image, never on it.
- Avoid: stock smiles, gradient overlays on faces, lifestyle blur, text on image, drop shadows on UI shots.

## 7. Motion

- 200ms ease-out for hover, focus, active state changes.
- Backdrop blur (saturate 180% blur 14px) on sticky surfaces. Held, not animated.
- One small pulse OK on accept (toast dot).

Banned: parallax scroll, autoplay hero video, marquee, scroll-snap drama, number count-up on view, carousel auto-advance.

## 8. Reference shelf

1. Momentous. Steal the dose-led PDP.
2. Levels. Steal the editorial rhythm on data.
3. Eight Sleep. Steal the 4-tile KPI grid.
4. Jones Road Beauty. Steal the photo grammar.
5. After Ours. Steal the operator voice and mono labels.

## 9. Do / Don't (quick)

- Do: "Build the answer." Don't: "Unlock Your Brand's Potential Today!"
- Do: "Ship fast. Cut more." Don't: an em-dashed version of the same line.
- Do: paper, ink, one accent. Don't: gradient brand palette.
- Do: Sans Display 900. Don't: serif drop-cap on hero.
- Do: one line hero, one CTA. Don't: autoplay video with overlay copy.
- Do: real numbers and deltas. Don't: "industry-leading growth."
- Do: 200ms ease-out hover. Don't: parallax.
- Do: 8pt grid, 1400 max. Don't: full-bleed text wall.

## 10. For AI agents

If you are a model building a Nik Sharma property, do this:

1. Fetch https://clean.nik.co/clean.md (this file).
2. Fetch https://clean.nik.co/tokens.json. Treat it as the source of truth for color, type, spacing.
3. Use https://clean.nik.co/prompts/clean-design-system.md as a system prompt.
4. Scrub em dashes and en dashes from every file before output.
5. Set lang="en", canonical URL, complete OG / Twitter cards, no noindex.
6. Mobile 390px QA: scrollWidth must equal clientWidth.

License: free to use. Credit appreciated. Built by Nik Sharma. Operator.