Change one token. Every page follows.
This is the design system behind intentfirst.ai, made for interfaces that change with context. Colour, type and motion live as tokens in one file, so a single edit reaches every page.
Try it: switch the heading font
- type roles
- 5
- motion durations
- 5
- signal colour
- 1
- languages
- 2
app/globals.css
Four promises to the reader
Each one is a rule the code keeps, not a mood.
- 01
Friendly, not scary
Warm paper, plain words, square corners. The chips you can tap are the one rounded exception.
- 02
Simple, no confusion
Five type roles and ten named sizes — one short list that people and agents both pick from.
Aatext-body 17Aatext-lead 21Aatext-h2 41 - 03
Joyful to read
A 17px body token with room between the lines, and a reading serif for the moments when someone speaks.
“The usual, please.” - 04
Modern, of the future
Taps answer in 100–240ms. Things arrive quickly and settle softly.
--dur-instant 100ms · --dur-base 240ms
People in bold brush, systems in hairline.
Illustrations carry the human situation: bold ink and one red accent. Diagrams carry the system: even 1px lines. You always know which one you are looking at.
- 01Intent
- 02Signals
- 03Dials
- 04Rule Engine
- 05Negotiation Gate
- 06AX Patterns
Five roles. One switch.
Text asks for a role, never a font. Switch the display family and every heading on this page changes — the one at the top too.
- font-displayHeadings · Funnel Display
- Context changes the answer.
- font-bodyReading · Funnel Sans
- A good host remembers what you like, and still asks before choosing for you.
- font-labelButtons, navigation, labels · Funnel Sans
- font-voiceWhat a person says · Newsreader italic
- “The usual, please.”
- font-dataNumbers and code · JetBrains Mono
Light and dark trade places. Red stays one signal.
Dark mode swaps ink and paper; nothing is recoloured by hand. Red marks one thing per screen — the current decision, the main action, or the one place to look. Pick a decision and watch the dot move.
Light
What would you like tonight?
- --paper
- #F8F7F2
- --ink
- #15171C
- --spark
- #E1402F
Current decision: The usual
On both grounds, the dot is the same --spark red.
Crisp entry, soft landing.
Five duration tokens for interface feedback, from a 100ms press to a 560ms entrance; page-level choreography stays under 600ms. Interface movement is transform and opacity, and colour cross-fades. Two exceptions, named: illustrations reveal with a clip-path wipe, and diagram lines draw their strokes as you scroll. With reduced motion on, you get the finished state: lines drawn, pictures shown.
Five duration tokens
- instant100mspress, hover colour
- quick160mslink line, card marks, arrow nudge
- base240mstab slide, switch knob, toast
- move380msthe red dot on this page
- stage560msfirst-load grid, illustration wipe — the limit
Try the grammar
160ms · linear
Hover or tab into this card
Read the Intent chapter160ms · ease-out
100ms · scale 0.97
240ms · ease-in-out
What the person is trying to do.
< 400ms
Real components, real states.
The kit this system ships, wired up so you can try it. Nothing is sent.
TextField
Errors say what to do next, in plain words — never colour alone.
Toggle
Switches move on the spring curve. It is used nowhere else.
SegmentedControl
The selected segment slides across; it never blinks.
Toast
A toast floats above the page, so it may cast a shadow. Site cards never do.
One source of truth, three readers.
Every token value lives in app/globals.css. Everything else reads it or keeps a mirror, and a test fails the moment a mirror drifts.
@theme → Tailwind utilities
Site pages
lib/design/tokens.ts
Motion in JavaScript
public/design-system/v2/tokens.css
Standalone pages and films