Tokens - Project Tessera

Tessera uses one set of design tokens. The screens, the prototype, the component app, and this page all read from the same file, so a token change shows up everywhere.

The palette is warm paper and ink with one teal accent. Violet is reserved for AI content. Warning text uses warning-text; warning is for dots, bars, and icons only.

Colors

	Token	Value	Use
	`paper`	`#F4F1EB`	Page ground
	`surface`	`#FFFFFF`	Cards, panels
	`surface-alt`	`#FAF8F4`	Rails, headers, footers
	`surface-sunk`	`#EBE6DD`	Segmented-control track, code background
	`line`	`#E3DED4`	Borders
	`line-soft`	`#EDE8DF`	Inner dividers
	`control-line`	`#D5CFC4`	Button and input borders
	`ink`	`#1C1B19`	Primary text
	`ink-2`	`#2A2825`	Reading text
	`ink-3`	`#3A3833`	Secondary body text
	`muted`	`#5F5B54`	Secondary/meta text; 6.3:1 on white
	`accent`	`#0E6B63`	The single brand accent: primary buttons, progress, current item
	`accent-hover`	`#0A4F49`
	`accent-soft`	`#E3F0EE`	Selected nav, accent tints
	`ai`	`#5B4BAF`	AI glyph, attribution, footnote numbers. Never a stripe or a meaning-bearing fill.
	`ai-strong`	`#3F3380`	AI label text on tints
	`ai-soft`	`#EEEBF8`
	`ai-softer`	`#F7F5FC`
	`success`	`#2E7D4F`
	`success-text`	`#1F5A37`
	`success-soft`	`#E4F2E8`
	`warning`	`#9A6A12`	Dots, bars, icons ONLY (4.2:1 on its tint fails as text)
	`warning-text`	`#7A5310`	Warning text; 6.4:1 on warning-soft
	`warning-soft`	`#FBF1DC`
	`error`	`#B3382C`
	`error-text`	`#7A2A20`
	`error-soft`	`#FBE7E4`
	`focus`	`#1F4F9C`	Focus ring (3px, 2px offset)
	`surface-bubble`	`#F0EDE6`	Learner chat bubbles, soft dividers
	`track`	`#ECE8E0`	Progress-bar and meter tracks
	`ring-track`	`#E8E3DA`	Weekly time ring track
	`line-strong`	`#CFC8BB`	Empty/pending state outlines
	`line-dashed`	`#C9C2B5`	Dashed affordances (add block, ⌘K rail button)
	`disabled-text`	`#6F6A62`	Disabled or locked option text; 5.2:1 on white
	`ai-line`	`#D0C8EA`	Borders on AI tints (tutor toggle, chips)

Typefaces

Token	Stack	Use
`serif`	Fraunces, Georgia, serif	Titles, lesson reading, and ALL AI text (Marginalia)
`sans`	IBM Plex Sans, system-ui, sans-serif	All human UI
`mono`	IBM Plex Mono, ui-monospace, monospace	Shortcuts, slash commands, footnote numerals

Sizes

Token	Value	Use
`text-learner`	15px	Comfortable density base
`text-compact`	13.5px	Instructor/admin base
`text-reading`	19px	Lesson prose; ~68ch measure; line-height 1.6
`text-ai`	15.5px	Marginalia body
`text-label`	12px	Uppercase section labels, letter-spacing .06em
`title-page`	26px–34px
`target-learner`	44px	Minimum touch target on learner surfaces
`target-compact`	28px	Minimum on compact surfaces (WCAG 2.2 floor is 24px)
`rail-width`	76px
`artboard-desktop`	1440x900
`artboard-phone`	390x844

Radii

Token	Value	Use
`sm`	7px	Small buttons, chips in rows
`md`	10px	Buttons, inputs
`lg`	14px	Cards
`pill`	999px

Density

Learner surfaces use comfortable density: a 15px base, 19px lesson reading at about 68 characters per line, and 44px primary buttons. Instructor and admin surfaces use compact density: a 13.5px base, 28–36px controls, and denser tables.