Tokens

Token	Colour	E-ink	Use
`surface`	`#ffffff`	`#ffffff`	Every surface: screens, dialogs, sheets, menus, fields, chips. There is no second surface colour; separation comes from outlines and dividers, never shade or shadow.
`ink`	`#202b25`	`#282828`	Text, icons and the 2 dp dialog/menu frame. Body text on `surface`, `sage` and `sage-selected` (11:1 or better).
`muted`	`#626b62`	`#696969`	Secondary text: subtitles, metadata, helper text, inactive labels. On `surface` 5.5:1 and `sage` 4.7:1. On `sage-selected` it is 4.3:1, below 4.5:1, so selected rows use `ink` for their secondary line.
`forest`	`#315846`	`#505050`	The accent. Primary (filled) buttons, the selected outline, the focus ring, text buttons, the current-day ring. 8:1 on `surface`, 6.3:1 on `sage-selected`. Never the only signal of selection: pair with a check, outline or Bold.
`on-forest`	`#ffffff`	`#ffffff`	Text and icons on a `forest` fill (primary button, selected day, active knob).
`sage`	`#e8ede4`	`#ebebeb`	Quiet fills: disabled buttons, time-input boxes, preview tiles, the dial background, key badges. Not a selection colour.
`sage-selected`	`#dce6d7`	`#e3e3e3`	Selected fill. Always together with a 2 dp `forest` outline, a check icon or Bold text, so selection survives grayscale.
`outline`	`#7c897b`	`#858585`	1 dp outlines of controls (buttons, fields, chips, option rows, cards), the scrollbar thumb, unchecked toggles. 3.7:1 on `surface`.
`divider`	`#b4bdae`	`#bababa`	1 dp dividers, grid lines, scrollbar track, swatch borders. Decorative only (1.9:1): never the only boundary of something tappable.
`meeting-fill`	`#f3f6f0`	`#f5f5f5`	Meeting cards in the agenda and time grid. Fill only, no outline.
`upcoming`	`#4d6895`	`#676767`	Future due dates on ToDo rows. 5.6:1 on `surface`.
`urgent`	`#9b3732`	`#595959`	Overdue/urgent items, errors and destructive actions (outlined Delete, filled confirm Delete). Always with Bold and "!" or an icon. 7:1 on `surface`.
`calendar-rail`	`#3f6e9a`	`#6a6a6a`	Default calendar rail on meeting cards and event chips; otherwise the calendar’s own colour from the cal-* set.
`scrim`	`rgba(32,43,37,0.32)`	`rgba(40,40,40,0)`	Phone bottom-sheet scrim (with a 6 dp backdrop blur). Never on the tablet: the e-ink theme sets it fully transparent.
`cal-black`	`#000000`	`#000000`	“Black” in the pen, calendar and theme-colour pickers; calendar rails and event chips. 21.0:1 on `surface`.
`cal-gray`	`#888888`	`#888888`	“Gray” in the pen, calendar and theme-colour pickers; calendar rails and event chips. 3.5:1 on `surface`.
`cal-light-gray`	`#bbbbbb`	`#bbbbbb`	“Light gray” in the pen, calendar and theme-colour pickers; calendar rails and event chips. 1.9:1 on `surface`. Below 3:1: always drawn inside a 1 dp `divider` border and never used for text.
`cal-red`	`#cc3333`	`#6e6e6e`	“Red” in the pen, calendar and theme-colour pickers; calendar rails and event chips. 5.1:1 on `surface`.
`cal-yellow`	`#ddbb00`	`#bdbdbd`	“Yellow” in the pen, calendar and theme-colour pickers; calendar rails and event chips. 1.9:1 on `surface`. Below 3:1: always drawn inside a 1 dp `divider` border and never used for text.
`cal-green`	`#228844`	`#777777`	“Green” in the pen, calendar and theme-colour pickers; calendar rails and event chips. 4.5:1 on `surface`.
`cal-teal`	`#008888`	`#7a7a7a`	“Teal” in the pen, calendar and theme-colour pickers; calendar rails and event chips. 4.3:1 on `surface`.
`cal-blue`	`#3399bb`	`#8e8e8e`	“Blue” in the pen, calendar and theme-colour pickers; calendar rails and event chips. 3.3:1 on `surface`.
`cal-purple`	`#663399`	`#4d4d4d`	“Purple” in the pen, calendar and theme-colour pickers; calendar rails and event chips. 8.4:1 on `surface`.
`cal-navy`	`#334477`	`#464646`	“Navy” in the pen, calendar and theme-colour pickers; calendar rails and event chips. 9.4:1 on `surface`.
`cal-forest`	`{forest}`	`{forest}`	“Forest green” in the pen, calendar and theme-colour pickers. Same value as `forest`.

Style	Sample	Size	Use
`phone-title-large`	Settings	22px / 28px · 400	Sheet and dialog titles, screen titles.
`phone-title-medium`	Thu 5 Nov	16px / 24px · 500	App-bar title, list-row titles, section headings in sheets.
`phone-title-small`	Topic name	14px / 20px · 500	Field labels, group labels, card titles.
`phone-body-large`	10 minutes before	16px / 24px · 400	Option rows, field values, settings row labels.
`phone-body-medium`	Completed ToDos stay in the collapsed list.	14px / 20px · 400	Body copy, helper paragraphs, button labels (Medium).
`phone-body-small`	Edited 5 Nov 2026, 19:31 · 1 page	12px / 16px · 400	Metadata, subtitles, counters.
`phone-label-medium`	Today	12px / 16px · 500	Nav labels, pills, key badges.

Style	Sample	Size	Use
`tablet-headline`	Send revised quote to Halden	28px / 36px · 500	ToDo task text in ToDo details.
`tablet-title`	Settings	24px / 32px · 500	Dialog titles.
`tablet-app-bar-date`	November 2026	22px / 28px · 500	Overview app-bar date.
`tablet-section`	ToDos	20px / 28px · 500	Section headings on screens (ToDos, Agenda).
`tablet-body`	Draft agenda for the offsite	18px / 26px · 400	Body, row labels, field values, option rows, menu items.
`tablet-button`	Save	18px / 24px · 500	Button labels (17–18 sp Medium); section headings inside dialogs use Bold.
`tablet-label`	10:30–11:30 · Fri 13 Nov	16px / 22px · 500	Metadata, subtitles, chips, page label, time stamps.

Style	Sample	Size	Use
`ink-sample`	Slow start, coffee on the balcony	28px / 36px · 400	Stand-in for the user’s pen strokes in mockups only. The app renders real ink, never this font.

Token	Value	Use
`space-1`	4px	Only between an icon and its label, and inside tight chip stacks.
`space-2`	8px	Between related controls: buttons in a footer, chips (both axes), list cards, label → field.
`space-3`	12px	Field inner padding (12 × 10), row gaps in compact dialogs.
`space-4`	16px	Phone screen edge and sheet padding; tablet gap between sections.
`space-6`	24px	Tablet dialog padding; gap between sections inside a dialog body; phone gap between sheet sections.

Token	Value	Use
`radius-sm`	4px	Paper previews inside tiles, check boxes.
`radius-md`	8px	Everything else: buttons, fields, chips, cards, dialogs, menus, the 36 dp selected-tool box, sheet top corners.
`radius-full`	9999px	Pills only: the journal date pill, meeting-details pill, toggles, scrollbar thumb, key badges, selected day.

Token	Value	Use
`stroke-hairline`	1px	Outlines of controls (`outline`) and dividers (`divider`).
`stroke-frame`	2px	Dialog, popover and menu frame in `ink`; the selected outline in `forest`; the focus ring.

Token	Value	Use
`target-min`	48px	Minimum touch target everywhere. Icon buttons are 48 × 48 with a 24 dp icon.
`control-height`	48px	Buttons, fields, segmented controls, option rows (56 on the tablet).
`chip-height`	40px	Option chips: 40 dp visual inside a 48 dp target.
`selected-tool-box`	36px	The `sage-selected` + 2 dp `forest` box behind a selected tool inside its 48 dp target.
`app-bar-phone`	64px	Phone app bar (56 in editors).
`app-bar-tablet`	48px	Tablet app bar: context zone, editing tools, fixed 5 × 48 global group.
`nav-bar-phone`	64px	Phone bottom navigation; 56 × 28 pill indicator.
`sidebar-tablet`	300px	Tablet overview sidebar (mini calendar, agenda, ToDos).
`dialog-narrow`	400px	Tablet pickers and compact dialogs: dates, time, colours, pen presets, confirmations.
`dialog-standard`	560px	Tablet default dialog width. Lists and Settings are 800 dp tall.
`dialog-editor`	720px	Tablet editors (ToDo editor, event editor), capped at screen width − 48 (654 dp in portrait).
`sheet-max-height`	800px	Phone bottom sheets: full width, at most 800 dp tall, resting on max(navigationBars, ime).
`scrollbar-lane`	16px	Persistent scrollbar lane whenever content scrolls: 1 dp `divider` track, 6 dp `outline` thumb.

Colour

Type

Phone (Material 3 roles)

Tablet (e-ink sp scale)

Handwriting (mockup stand-in)

Spacing

Corner radius

Lines

Sizes

Depth