Pillar
Short text with its proof.
SYSTEMTokens · components · rules for AI
One source of truth, readable by machines.
Every page of this site is generated from these tokens and components. The same rules ship as a plain-text file any AI can load.
--color-ink--color-ink-2--color-marble--color-stone--color-muted--color-muted-dark--color-accent--color-accent-ink--color-accent-light--color-line--color-line-dark--color-panel--color-panel-glow--color-on-dark--color-glass--color-glass-line--color-white--color-text-2--color-text-strong--color-soft--color-hero-top--color-hero-mid--color-hero-bottom--color-slate-a--color-slate-b--color-mist-a--color-mist-b--color-night--color-night-glow--color-stone-a--color-stone-b--color-on-slate--color-on-night--color-white-70--color-white-55--color-accent-20--color-marble-88--color-shadow--color-shadow-soft
--space-1--space-2--space-3--space-4--space-5--space-6--space-7
KICKERLabel Eyebrow
Image to come · Screen
# 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".