Applied by Hand · v1
Design system
The shared visual language for the website, drawings and explainer videos.
Typography
sansClear words, useful ideas.
Body & interface
monotokens = 1_000_000
Code & data
pixelUnderstand AI.
Drawn website style
Understand AI.
SVG pixels rasterized from the font: slightly rotated, irregular and consistently derived from the text.
Headings
signatureExplained by hand.
Handwritten notes
Colours
Semantic roles in both themes. Always pair status colours with a label or icon.
Light
--bg#fbfaf8--surface#ffffff--hover#f1eeea--fg#1a1918--muted#76726d--line#e8e5e0--accentoklch(0.52 0.17 265)--okoklch(0.52 0.13 155)--warnoklch(0.55 0.14 70)--dangeroklch(0.55 0.19 25)Dark
--bg#0d0d0c--surface#141413--hover#1a1a18--fg#ecebe8--muted#8f8b86--line#242321--accentoklch(0.74 0.13 265)--okoklch(0.76 0.14 155)--warnoklch(0.8 0.13 80)--dangeroklch(0.72 0.17 25)Video drawing colours
Icons
16 × 16. Round lines, 1.5 px strokes. All icons inherit the text colour.
ArrowRightSVG 
ArrowUpSVG 
BookmarkSVG 
CaptionsSVG 
CheckCircleSVG 
CheckSVG 
ChevronDownSVG 
ChevronLeftSVG 
CircleSVG 
ClockSVG 
CloseSVG 
CoinSVG 
CopySVG 
DocSVG 
EditSVG 
ExternalSVG 
FullscreenSVG 
GridSVG 
HalfCircleSVG 
LeafSVG 
LinkSVG 
ListSVG 
MarkerSVG 
MenuSVG 
NoteSVG 
PanelLeftSVG 
PanelRightSVG 
PauseSVG 
PlaySVG 
PlusSVG 
SearchSVG 
SparkleSVG 
StarSVG 
StopSVG 
TerminalSVG 
TextSVG 
TrashSVG 
VolumeSVG 
WandSVG 
Components
Actions
Labels & input
4812162432486480Spacing in px. Cards: 20 px radius. Controls: 8 px. Pills: fully rounded.
Asset library
Images, character poses and SVGs in one place. Filter by type, preview and download.
Drawing & motion
Drawn by hand, clearly readable
Slightly irregular lines, pencil hatching and coherent characters. Text stays still. No crossed placeholders or dashed guide boxes.
Subtle feedback
Motion explains an action. Brief feedback, gentle transitions, no constant distraction. Reduced motion preferences are respected.
180 ms / 280 msOne source for the website and Remotion
Colours, fonts, icons and asset paths come from design-system/. Website CSS and font loaders are generated from it. Remotion reads the same data and includes a renderable reference sheet.
tokens.json · icons.json · assets.jsonAnti-patterns
Patterns we avoid in the interface.
Avoid
Native disclosure triangles and hidden foundations look like browser defaults instead of our interface.
Our approach
Video drawing colours
Foundations stay visible. Additional options use deliberately drawn icons and clear feedback.