Overview
A system-wide reference for tokens, components, and the rules that tie Dino together.
Principles
Four beliefs that drive every decision in the system: from token naming to shadow depth.
Details matter
Shadows, pressed states, gradient fills: each one imperceptible on its own. Together they make the product feel crafted, not assembled.
Feedback is constant
Every action gets a visual reaction. Hover, pressed, disabled, error, success: all distinct. In a learning app, clarity keeps the flow.
One source of truth
No hardcoded values, ever. Every color, size, and shadow flows from tokens. Change the token, change everything at once.
Dark by default
Reduces eye strain in late-night study sessions and gives the app the visual energy of a game, not a textbook.
Architecture
Tokens follow three layers of abstraction. Each layer has one job. Components only ever consume the third.
Raw values with no context. #4ed21e, 16px, Rubik.
They exist only to be referenced, never used directly in components.
--green-default --grey-800 --scale-400 Names with intent. Primary, Error, Spacing. They say what a value is for, not what it looks like.
--primary-600 --error-default --spacing-16 What components consume. Named by surface and state. Dark mode is the default; light is a theme override.
--surface-button-primary-default --text-headings --border-action-default