Hand Draw Design System

01 — Color

Paper surfaces

--color-paper

#F7F3E9

Cream paper

--color-paper-aged

#EDE8D5

Aged paper

--color-paper-dark

#E2DBCA

Dark paper

--color-paper-white

#FDFAF3

Near-white

--color-pencil

#D6D3D1

Pencil gray

Ink tones

--color-ink

#1C1917

Ink black

--color-ink-soft

#44403C

Soft ink

--color-ink-faded

#78716C

Faded ink

--color-ink-ghost

#A8A29E

Ghost ink

Marker palette

--color-marker-red

#C8534A

Marker red

--color-marker-yellow

#E8C547

Marker yellow

--color-marker-green

#5A9E6F

Marker green

--color-marker-blue

#4A7FA5

Marker blue

--color-marker-purple

#8B6BAE

Marker purple

--color-marker-orange

#D4845A

Marker orange

Watercolor washes

--color-wash-red

#F9ECEA

--color-wash-yellow

#FDF8E3

--color-wash-green

#EAF4EE

--color-wash-blue

#E8F2F8

--color-wash-purple

#F3EFF8

--color-wash-orange

#FDF0E8

02 — Typography

Type scale

--type-4xl · 72px · Caveat 700 Hand Draw

--type-3xl · 56px · Caveat 700 Sketch everything

--type-2xl · 42px · Caveat 700 Page title here

--type-xl · 32px · Caveat 700 Section heading

--type-lg · 24px · Caveat 600 Subtitle or callout

--type-md · 19px · Lora italic Lead paragraph or intro text

--type-base · 16px · Lora Body text for reading. The pen traces where the eye follows.

--type-sm · 13px · Patrick Hand Labels, captions, helper text

--type-xs · 11px · Patrick Hand Micro-notes · metadata · timestamps

03 — Components

Buttons

Every button frame is an SVG with hand-drawn distortion via feTurbulence filter.

Cards

Cards feel like pages placed by hand on a surface. Slight rotations and SVG frame distortion create the handmade effect.

A simple note

Cards feel like pages placed by hand on a surface.

Stacked sheets

Like papers on a desk, layered with offset shadows.

Remember:

The imperfect line is the honest line.

DRAFT

In progress

Stamped and ready for review.

Feature card

Wash-fill backgrounds add watercolor softness.

Info card

Different wash colors signal different tones.

Badges & stamps

default info success error warning

note done feature warm

hand-made urgent shipped

Stamps & seals

DRAFT

APPROVED

TODO

DONE

REVIEW

Circle emphasis (hover me)

important key idea

Drawn arrows

.arrow-right

.arrow-left

.arrow-up

.arrow-down

.arrow-curved-right

Alerts

Heads up

Something worth knowing before you continue.

Looks good to me

Everything went through without a hitch.

Worth checking

This might cause issues down the road.

Something went wrong

That didn't work — try again or check your input.

Forms

Your name

Password

Too short — try again

I agree to the terms

Already checked

Option one

Option two

Toggle switch

Table

Name	Role	Status	Joined
Mara Breen	Designer	Active	Mar 2024
Oliver Kast	Engineer	Remote	Jan 2024
Sena Idris	Writer	Draft	Apr 2024
Priya Voss	PM	Away	Feb 2024

Progress

Progress bar

66% complete

Loading spinner

Skeleton

Empty state

Nothing here yet...

Add your first item to get started.

Tooltips

Paper textures

Plain paper
Default surface

Lined paper
With rule lines

Grid paper
Graph paper

Dotted paper
Bullet journal

Craft paper — Aged + grain texture

04 — Motion & Spacing

Duration tokens

--duration-snap

100ms — toggle feedback

--duration-quick

180ms — hover color

--duration-base

280ms — state transition

--duration-draw

400ms — SVG draw-on

--duration-page

500ms — page transition

Easing curves

bounce-soft

0.34,1.4,0.64,1

organic

0.45,0.05,0.55,1

spring

0.175,0.885,0.32,1.1

Spacing scale

--space-1

4px

--space-2

8px

--space-3

12px

--space-4

16px

--space-5

24px

--space-6

32px

--space-7

48px

--space-8

64px

--space-9

96px

05 — Elevation

Shadow tokens

All shadows use warm ink tint rgba(28,25,23,...) — never cool gray. The stacked shadow is the signature paper-pile effect.

flat

--shadow-flat

On the surface

paper

--shadow-paper

Card at rest

lifted

--shadow-lifted

Card on hover

floating

--shadow-floating

Dropdown / tooltip

stacked

--shadow-stacked

Layered sheets

Design that feels drawn by hand