Application
Type 00
Card title in Fraunces
A short purpose line in ink-soft.
Now: what it looks like today.
becomes →
Web: what it becomes online.
Self-checkMedium
Demo A mock UI screen
annotation under the mock screen
UI kit reference
One live example of every component, built with the kit classes from globals.css. Copy the markup straight from this file.
Active state is dark; ghost is the dashed add affordance.
Solid button Ghost button
01 Lilac05 Pink08 Blue10 Teal16 Clay18 Indigo
The handwritten accent styles. Use sparingly.
becomes →
This is a handwritten note; it renders with a little arrow in front.
snap! handwritten highlight
A short purpose line in ink-soft.
Now: what it looks like today.
becomes →
Web: what it becomes online.
annotation under the mock screen
A short description of the idea.
Why it fits: a one-line rationale.
Cards reflow to fill the row.
Why it fits: rationale here.
| Training part | Pages | Component type |
|---|---|---|
| Lesson 1 · A lesson subtitle · p1–10 | ||
| An activity a small subtitle | p2–4 | 03 Scenario MCQ |
A dashed placeholder box for unbuilt sections.
Open modal