Design Law

---
name: design-law
description: The Atelier Design Law — premium, industrial-grade UI. Load BEFORE any UI/design work (pages, components, animations, icons, landing pages). Defines the style vocabulary, tokens, motion physics, component canon, reference canon, and the banned AI-slop anti-style.
---

# Atelier Design Law

When a prompt says "make it premium", it means **exactly this document**. If a
choice isn't covered, pick the calmer, quieter option. First run the gateway
skill — overlays in `design_guide_versions` may extend this law. Before UI code,
read [palette inference](references/palette.md) and write the short design
direction it requires. Public pages also load the web-quality skill.

## 1. Vocabulary (say these words, get this taste)

| Term | Meaning | Exemplars |
|------|---------|-----------|
| Apple HIG | Clarity, deference to content, depth via layers | macOS, iOS |
| Editorial minimalism / Swiss style | Typography IS the design: strict grid, huge type-scale contrast, whitespace, near-monochrome, ONE accent | Linear, Vercel, Stripe |
| Glassmorphism (chrome only) | backdrop-blur panels for navbars/docks/overlays — never every card | macOS Big Sur |
| Enterprise motion choreography | Motion as physics system: springs, scroll-scrub, staggers | Cloudflare, Apple product pages |
| Scrollytelling | Scroll-scrubbed narrative scenes, pinned sections, frame sequences | Apple AirPods, Cloudflare home |
| Blueprint motif | Dotted/dashed hairline grid background, corner tick marks on cards, schematic diagrams | Cloudflare 2026 |
| Quiet depth | Depth from top-light insets and layering, not drop shadows | macOS windows |

### 1a. UI movements glossary (recognize the term, know Atelier's default)

Atelier's default taste is **editorial minimalism + chrome-only
glassmorphism + quiet depth** (§1 above). These other named styles exist so
you recognize a user's explicit request — don't default into them uninvited:

| Term | What it is | Use in Atelier when |
|------|-----------|---------------------|
| Skeuomorphism | Mimics real-world material (leather, brushed metal, paper) | Never by default; only if explicitly requested (retro/nostalgia brief) |
| Neumorphism | Soft extruded/inset shapes, same-hue dual shadows | Avoid — poor contrast/accessibility; explicit request only |
| Glassmorphism | Frosted blur panels over vivid backdrop | Chrome only (navbars/docks/overlays), per §1 — never every card |
| Claymorphism | Puffy, rounded, saturated soft-shadow shapes | Playful/consumer brief only, explicit request |
| Minimalism | Content over decoration, heavy whitespace | Atelier's baseline — default assumption |
| Maximalism | Dense pattern, color, layered ornament | Explicit request only (fashion/editorial/art briefs) |
| Brutalism | Raw, high-contrast, unstyled-looking, monospace | Explicit request only (dev-tool/portfolio edge briefs) |
| Liquid glass | Apple's 2025+ specular/refractive glass with real-time distortion | Native OS-chrome contexts only; on web, treat as glassmorphism §1 |
| Spatial UI | Depth/parallax layers for AR/VR or 3D-native surfaces | Only with [[web-3d]] work, not flat 2D pages |

## 2. Reference canon (studied, not copied)

- **Cloudflare.com (2026)** — the gold standard for dark editorial marketing:
  near-black `#0B0B0C` base, dotted blueprint grid with corner ticks framing
  sections, ONE saturated accent (their orange) used for CTA bands and state,
  massive grotesk display headlines ("Build without boundaries"), bento feature
  cards with hairlines + live product mock terminals, full-bleed accent CTA
  bands with floating outlined glyph cards, pill segmented pricing toggles,
  logo-tab quote carousel, benefit ticker strip above the footer.
- **GitHub.com** — dark hero with a single soft radial glow behind centered
  display type, product screenshot in a framed window below the fold, gradient
  restraint everywhere else.
- **Linear / Vercel / Stripe** — hairlines, tabular numerals, serif-italic
  editorial accents, monochrome discipline.
- **GC Design Language** (GrowthCharters) — the parent of this law; its emerald
  is ONE brand instance proving the system is brand-parameterizable. The accent
  is a **parameter, not a default** — Cloudflare's is orange, Linear's is
  near-white, GC's is emerald. Never inherit green as the house color.
- **Layers (getlayers.ai)** — "AI builds generic. We make it cinematic." Their
  library proves premium pages are assembled from a **cinematic layer stack**,
  not improvised per page: a named background layer (their catalog: 53
  backgrounds vs 27 full templates), one three.js hero/3D scene as the single
  showpiece, then calm sections beneath. Adopt the discipline: backgrounds and
  3D scenes are reusable named assets picked from a catalog (registry/web-3d),
  ONE cinematic moment per page — the hero; everything below it earns quiet.

## 3. Tokens (numbers, not vibes)

```
--bg:        #0A0A0B dark / #FAFAF8 light      --bg-raised: #141518 / #FFFFFF
--ink:       #F5F5F3 / #1A1A18                 --ink-2: #9B9B98   --ink-3: #5C5C5A
--hairline:  rgba(255,255,255,.08) / rgba(0,0,0,.08)
--accent:    ONE evidence-backed brand color selected by references/palette.md.
             NEVER default to green/emerald. Budget ≤10% of any viewport.
Radius: 8 inputs / 12 cards / 16 modals / full pills.  Spacing: 4-scale, ≥96px between landing sections.
Depth: layering + inset top-light `0 1px 0 rgba(255,255,255,.04)`; drop shadows ONLY on floating layers.
```

Type: grotesk UI/display (weights 400/500/600, -2% tracking on display), serif
italic for ONE emphasized phrase per major headline + big stats. Kickers: 11px
uppercase 0.14em `--ink-3`. Display: `clamp(3rem, 8vw, 7rem)`. Data numerals:
`tabular-nums`.

**Theming is centralized — NEVER hardcoded.** Every color/radius/shadow lives as
a CSS variable in ONE place (`globals.css` / tokens file); components reference
semantic tokens (`bg-background`, `text-ink-2`, `border-hairline`), never hex
values or `dark:` one-offs per page. Dark, light, or any future theme = flip the
variable set on `:root[data-theme]` — zero per-page edits. A hardcoded color in
a component is a review failure.

## 4. Motion system

- Entrances: `cubic-bezier(0.16,1,0.3,1)`; interactive: spring `{stiffness:260,
  damping:32, mass:0.9}` — max one overshoot. Micro 150–250ms, element
  300–500ms, scene 600–900ms; >1s only scroll-scrubbed.
- Stagger lists 60–80ms, 24px rise+fade. **Scrub narrative (GSAP ScrollTrigger
  + Lenis), trigger UI (Framer Motion).** Shared-element morphs via `layoutId`.
- **Any gesture-driven surface (drag, swipe, sheet/drawer, momentum, translucent
  chrome) — load [[apple-design]] first.** It supplies the physics this section
  only summarizes: damping/response spring params, interruptibility (animate
  from the live presentation value, never the target), velocity handoff on
  release, and momentum projection for flick-to-snap.
- ONE hero moment per page. Exits ~60% of enter, opacity-led. Interruptible.
  `prefers-reduced-motion` → fades only. Animate transform/opacity/canvas ONLY.
- Signature micro-interactions: hover lift −2px + border brighten; press
  scale(.98) spring; count-up stats (once); checkmark stroke-draw; word-reveal
  AI streaming; per-component skeletons (no full-page spinners).

## 5. Iconography & imagery

Lucide only, 1.5px stroke, 16/20/24, `currentColor` monochrome — never filled,
multicolor, or in colored circles. Accent only on state (verified/live/active).
Gaps → Phosphor thin or custom SVG on the 24px grid. Animated: Rive/Lottie,
monochrome+accent, single-loop. Emoji never in chrome. Illustrations: abstract
geometric blueprint motif (dot grids, wireframe globes, hairline schematics).
Product imagery: real UI in device frames on dotted-grid pedestals with corner
ticks — never fake dashboards. Fonts via Google Fonts (or system).

## 6. Component canon & registry

Card = raised surface, hairline, radius 12–16, 24px padding, top-light; header
row = 36px bordered icon square + title + uppercase tag. Stat block = serif
numeral over uppercase label, vertical hairline dividers. Nav = glass pill,
condenses on scroll. Buttons: primary ink-filled pill (inverts on hover),
secondary ghost hairline; ONE primary per view. Inputs: sunken + accent hairline
focus glow. Tables: hairline separators, 11px uppercase heads.

**Never hallucinate components.** Query the registries first — shadcn/ui (MCP),
Aceternity (MCP), ReactBits (MCP), MagicUI, Motion.dev, Kokonut UI (`@kokonutui`)
and Bklit charts (`@bklit`) via the shadcn MCP, Radix — then adapt to these
tokens. For JS animation timelines/SVG morph/draggable see the [[anime-js]]
skill. `python <plugin>/db/store.py registry component` lists what's available.

## 7. Landing-page anatomy (the Cloudflare-grade default)

1. Hero: one massive claim, subline, single primary CTA; ONE hero moment.
2. Proof strip: customer logos / "42% of Fortune 500"-style stat.
3. Quote carousel with logo tabs (real quotes only).
4. Problem→solution split panel (dark chaos vs accent-clean, à la "fighting
   infra" vs "shipping").
5. Bento grid of features with live product mocks.
6. Pricing: pill segment toggle, hairline tier cards, honest numbers.
7. Full-bleed accent CTA band + benefit ticker.
8. Dense multi-column footer.
Scrollytelling (video→frames scrub) when the product has a narrative.

## 8. The anti-style (BANNED — the "AI-slop" look)

Rainbow/purple-pink gradient heroes · glossy 3D emoji icons · colored icon
circles in 8 hues · heavy card shadows · bounce-in animations · centered
feature-grid walls · fake dashboard screenshots · multiple accent colors ·
full-page spinners. If it looks like a template, delete it.

Generic copy is also an AI tell: no “revolutionize,” “unlock,” “seamless,” or
unsupported superlatives. Headlines name the user's outcome; proof uses real
product behavior, data, screenshots, or attributed quotes. A premium page has
one visual thesis, one typographic voice, and details specific to its subject.

## 9. Review checklist (UI may not ship failing any)

- [ ] One accent, ≤10% viewport; near-monochrome otherwise
- [ ] Palette direction cites its evidence; green appears only when justified
- [ ] Hairlines not shadows; top-light insets; correct radii
- [ ] Type scale + serif-italic accent used once per headline; tabular numerals
- [ ] Motion: springs/expo, staggered, reduced-motion fallback, no layout thrash
- [ ] Lucide monochrome icons only; no emoji in chrome
- [ ] Components sourced from registry, restyled to tokens
- [ ] Dark AND light themes resolve; responsive at 360/768/1280
- [ ] Zero anti-style items present
- [ ] Public page passes the web-quality Playwright checks or records blockers