Design system · v0.1

Draw the interface like you'd draw it on a napkin.

Scribble is a UI kit built from one pencil line: wobbly boxes, hand-lettered type, and stick figures that walk, wave, think and fall over so your product doesn't have to use another illustration pack.

Meet the figures

01 · Principles

Four rules of the pencil

One line weight

Every stroke on the page is --stroke (2.5px). Hierarchy comes from size and wobble, never from thicker borders.

Nothing is straight

Boxes use the asymmetric radius trick and a live noise filter, so no two rectangles look alike and edges quietly "boil".

Two coloured pencils, max

Graphite does 90% of the work. Red pencil means stop / look here. Blue pencil means you can act on this.

Figures do the talking

Loading, empty, error, success: a stick figure carries the state. Text explains what to do next; the figure sets the mood.

02 · Tokens

Colour

Flip the surface with the button up top; the same tokens map to paper or chalkboard.

paper--paper

inset--paper-2

ink--ink

guide--ink-soft

red pencil--pencil-red

blue pencil--pencil-blue

eraser--eraser

Type

Caveat for headings (loud, brushy, used sparingly), Patrick Hand for body (legible handwriting), Courier Prime for anything a machine wrote.

display / h1Big idea, small ink

h2Section title

h3Card title

bodyThe quick brown fox draws a rather wobbly box.

smallCaptions, hints, and pencilled-in notes.

monoborder-radius: var(--wobble);

Shape

The hand-drawn rectangle: border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px. Blobs (tags, swatches, avatars) use uneven percentages. Underlines are wavy. Dividers are dashed. Focus rings are dashed and blue.

03 · Figures

The stick figure library

Each figure is a 100×100 SVG using the shared .stick stroke. Add a state class to animate. Heads are circles, joints are round caps, nothing else.

idle

wave · greeting

walk · in progress

think · loading

cheer · success

fall · error

juggle · busy

heart · favourite

Rule: one figure per view. Two stick figures on screen is a crowd.

04 · Components

Buttons

Hover tilts a degree, press tilts back. Focus is a dashed blue ring.

Inputs

Name your drawingSomething you'll recognise tomorrow.

EmailNeeds a dot after the @. Try mia@nowhere.com

Notes

Show grid lines

Cards

Pinned note

The red pin marks a card the user pinned. Cards get a faint second outline, like a pencil retracing.

draftshared

Empty state

Nothing sketched yet. Start a drawing and it shows up here.

Callouts

Tip: hold Shift while drawing to snap a line straight. It'll still wobble a little; that's the point.

Couldn't save. The connection dropped. Your sketch is kept locally; retry when you're back online.

Progress & tabs

Fill is hatched, never solid: pencil shading.

Tab panels sit inside the drawn box; the selected tab erases the line beneath it.

05 · Motion

Three kinds of movement

Boil — outlines swap between three noise seeds at ~2 fps (.boil). It's the flicker of frame-by-frame animation and it should be barely noticed. Draw-on — strokes reveal with dash-offset (.draw) for first paint and empty states. Act — figures loop a 0.7–1.4 s cycle for a state. All of it turns off under prefers-reduced-motion.

06 · Use it

Drop-in tokens

Copy the variables, load the three fonts, and add data-surface="paper" or "board" to <body>. Everything in this page is plain HTML + CSS + inline SVG; no framework required.

:root, [data-surface="paper"] {
  --paper: #FAF8F2;  --paper-2: #F1EEE5;
  --ink: #2B2B2B;    --ink-soft: #6B6B6B;
  --pencil-red: #C8352E; --pencil-blue: #2F5FA8;
  --eraser: #F0B7B0; --stroke: 2.5px;
}
[data-surface="board"] {
  --paper: #1F2A26;  --paper-2: #27332E;
  --ink: #F1EDE0;    --ink-soft: #A9AFA6;
  --pencil-red: #F2A6B4; --pencil-blue: #F5D67B;
  --eraser: #3A4842;
}
:root {
  --font-display: 'Caveat', cursive;
  --font-body: 'Patrick Hand', cursive;
  --font-mono: 'Courier Prime', monospace;
  --wobble: 255px 15px 225px 15px / 15px 225px 15px 255px;
}
.stick { fill:none; stroke:var(--ink); stroke-width:3.2;
         stroke-linecap:round; stroke-linejoin:round; }
.boil  { animation: boil .55s steps(1) infinite; } /* + 3 SVG filters */

Made with one pencil. Erase responsibly.