design-law

Files (2)

• SKILL.md
• palette.md · references/

SKILL.md (first lines)

# 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

From INERATE/atelier, MIT.

More from INERATE/atelier