Colour, type and the brand marks: the tokens every page is built from, shown live.
--paper
Light #f8f7f2 · Dark #15171c
--ink
Light #15171c · Dark #f8f7f2
--spark
Light #e1402f · Dark #e1402f
Used in
Two neutrals that trade places between light and dark, and one red that stays put. Red is a fill and a border; type set in red uses --spark-ink.
Used in
Every colour on the site is a named token. The values and the contrast against paper are read from the live stylesheet, so they follow the light and dark switch. Text takes ink, ink-2, muted or spark-ink; lines and spark are for shape.
Intent First reads language as intent, context and constraints, not as menu paths.
Intent First reads language as intent, context and constraints, not as menu paths.
Design system · 0123456789
Intent First は、言葉をメニュー操作に当てはめず、意図・文脈・制約として読み取ります。
Intent First は、言葉をメニュー操作に当てはめず、意図・文脈・制約として読み取ります。
デザインシステム · 0123456789
Used in
Text asks for a role — display, body, label, voice or data — never a font. The switch swaps the display family under every heading in the sample; Japanese has its own faces.
| scale | display | body | label | voice | data |
|---|---|---|---|---|---|
| text-caption13px | Intent | Intent | Intent | Intent | Intent |
| text-meta14px | |||||
| text-body17px | Intent | Intent | Intent | Intent | Intent |
| text-lead21px | Intent | Intent | Intent | Intent | Intent |
| text-h426px | Intent | Intent | Intent | Intent | Intent |
| text-h333px | Intent | Intent | Intent | Intent | Intent |
| text-h241px | Aa | Aa | Aa | Aa | Aa |
| text-h152px | Aa | Aa | Aa | Aa | Aa |
| text-display52–65px | Aa | Aa | Aa | Aa | Aa |
| text-hero41–96px | Aa | Aa | Aa | Aa | Aa |
Used in
Every role at every step of the type scale. The pixel figures are approximate: the larger steps are fluid and grow with the screen.
| 4px | |
| 8px | |
| 12px | |
| 16px | |
| 24px | |
| 32px | |
| 48px | |
| 64px |
A reference scale from 4px to 64px, drawn at true size.
Favicon on light browser chrome; apple-touch-icon (square, full bleed).
/brand/favicon-light-32.png · 192 · 512
Favicon on dark browser chrome.
/brand/favicon-dark-32.png · 192 · 512
Used in
The initials of intentfirst set in Newsreader, with the i’s dot in spark. It reads as the start of a condition, which is what the site is about: what the AI should do, if this is the situation.