Skip to content
Teach It Here

Reference

Design system

Every token, primitive, and state Teach It Here is built from. A new demo starts here and adds one feature on top.

Theme

One accent color re-skins everything. The engine walks lightness in OKLCH until every text pair passes WCAG AA, in both modes.

Brand

Appearance

Pick Custom to try any color. Ship one with pnpm theme.

Saved

Body text sits on the canvas. Links use the accent.

Type

Schibsted Grotesk for words, IBM Plex Mono for data only. Use the utilities; never a raw size.

display

Small apps

heading

Section heading

lede

A lede leads into the content below it.

title

Card title

section

Group label

ui

Default interface text, 14px.

ui-sm

Captions and help text.

micro

Column header

num

1,284 · 23 ms · 0x3f2a

Components

Base UI underneath, restyled to the tokens. Every control has hover, focus, pressed, disabled, and loading.

Buttons

Fields

We only use it to reply.

Choices

Overlays

Status

LiveNeeds reviewWaiting on youFailedDraft

Data

1,284

Events this week

23 ms

Median round trip

Storage used72%

Tabs

Routep50p95
/18 ms41 ms
write24 ms66 ms
room · join31 ms80 ms

Motion · useFlip

  1. Atlas
  2. Bolt
  3. Cosmo
  4. Dash
  5. Echo
  6. Flux

Messages

Demo data older than a day is cleared every hour.
Saved. Everyone with this page open sees it.
You are offline. Changes wait and send when you reconnect.

States

Each feature rendered in every state it can be in, with fixture data and no network. None is an afterthought.

Teach It Here

Expenses

Amount and merchant are required.

Drop a receipt hereDrag one from the pileDrag one down, or tap Attach
Optional

Receipts

2 to file
Northline TaxiTaxiAirport to 900 Pine St
Trip dateNov 1, 2026
  • Fare, 14.2 mi21.40
  • Airport fee4.00
Tip4.25
Amount charged$29.65
Mastercard•• 0932
Trip7Q-2291