Référence
Comment nous construisons l’interface dans Studio, sur les sites artistes et sur la landing. Utilisez des tokens et rôles nommés — ne devinez jamais couleurs, tailles ou chrome.
Document canonique dans le dépôt : docs/DESIGN-SYSTEM.md. Mettez à jour ce fichier et cette page ensemble quand les tokens ou règles changent.
Every screen belongs to one world. Do not mix token ladders across dashboard, artist sites, and platform landing.
| Token / import | Use |
|---|---|
| .dashboard-ui | Studio — --ds-gray-*, MATERIAL.*, TYPE.* |
| .artist-site | Public sites — --gray-*, spacing over borders, SITE_TYPE.* |
| .platform-landing | Marketing — --landing-*, platform-landing-tokens.ts |
Import TYPE from @/lib/geist-typography. Do not invent text-[13px] sizes.
TYPE.heading16 — Page title
TYPE.label14 — Field label
TYPE.copy13 — Supporting copy and dense UI text.
One MATERIAL preset per surface — radius, fill, stroke, and shadow together.
MATERIAL.base
Named surface preset
MATERIAL.small
Named surface preset
MATERIAL.medium
Named surface preset
MATERIAL.modal
Named surface preset
Pick the role first, then the step. Steps 100–1000 on the Geist neutral ladder.
100
Component bg
200
Hover bg
400
Border
900
Secondary text
1000
Primary text
SITE_TYPE maps editorial roles. Page chrome stays sharp; floating UI may use MATERIAL.menu.
SITE_TYPE.pageTitle
SITE_TYPE.artworkCaption
SITE_TYPE.meta — year, medium, dimensions
SITE_TYPE.body — reading paragraphs use copy16, not invented sizes.
Marketing sections use platform-landing-tokens. Panels are rounded-xl; menu rows rounded-lg.
Plan or step title
Pro card — warm highlight + shadow
Basic / Premium — neutral ring
Enforced in .cursor/rules and AGENTS.md. Update docs/DESIGN-SYSTEM.md when these change.