# Cédric de La Chaise: design system rules for AI

Load this file before generating any UI for design.joininstudy.xyz. The universe is InStudy V3.

## Tokens (source: /system/tokens.json, compiled to /tokens.css)
- Use only CSS variables: `var(--color-*)`, `var(--space-*)`, `var(--radius-*)`, `var(--font-*)`, `var(--size-*)`.
- Never write a hex, rgb or rgba value. Never invent a token; ask.

## Page structure
- Body is ink (`--color-ink`). Content sits in rounded marble panels (`.panel`, radius 18px, 10px apart, generous padding), alternating `.panel` and `.panel.stone`.
- Hero: one large marble panel with a soft radial gradient (`--color-hero-*`), centered: round grayscale photo, `.kicker` pill (mono label in an accent chip + text), H1, a short `.value` paragraph. Bottom-left `.meta` list in mono with ● dots, bottom-right `.hero-actions`.
- Dark bands (`--color-ink-2`, thin `--color-line-dark` borders) for numbers (`.proofs`) and facts (`.facts-row`).
- One dark contact section (`.about`) with photo, then the footer.

## Type
- Headlines: `--font-sans` 500, tight letter-spacing. The second half of a headline is wrapped in `<span class="accent">`: Newsreader italic, `--color-accent`. One accent per headline.
- Eyebrows: `.eyebrow`, mono uppercase 12px, `--color-accent`.
- Body: 16 to 19px, line-height 1.6, `--color-text-2`.

## Components (see /system)
- `.btn.btn-primary` (ink pill, label ends with ↘), `.btn.btn-ghost`, `.kicker`, `.eyebrow`, `.pillar` (number, title, text, proof link), `.decision.d-slate|d-mist|d-night|d-stone` (tinted case tile with big Newsreader number in the background), `.tcard` (quote), `.step` (timeline row), `.slot` (image placeholder).

## Do / don't
- Do: space generously, one idea per panel, real numbers only, English, first person, no em dash.
- Don't: full-width bars, highlight boxes, gradients outside the token set, emoji, stock illustrations, the words "passionate", "synergy", "game-changer".