Expressive & trend · 2010s – present
Hand-Drawn
Imperfect lines, sketch textures, ink fills, and type that wobbles just enough — the warmth of something made by a human hand, intentionally.
Live preview base style — press Wear
$2,100
Revenue, up 12% from last month.
| Customer | Plan | Status | MRR |
|---|---|---|---|
| Northwind | Studio | Active | $1,240 |
| Acme Labs | Team | Trial | $0 |
| Kaldi Coffee | Studio | Active | $860 |
Use this style 15 tokens
- --bg
oklch(96% 0.025 80) - --fg
oklch(18% 0.02 55) - --muted
oklch(48% 0.03 60) - --surface
oklch(98% 0.015 85) - --surface-2
oklch(92% 0.03 78) - --border
oklch(60% 0.05 68) - --accent
oklch(52% 0.22 25) - --accent-fg
oklch(99% 0 0) - --focus
oklch(52% 0.22 25)
| Token | Value |
|---|---|
| --font-body | 'Patrick Hand', cursive, system-ui, sans-serif |
| --font-display | 'Caveat', cursive, system-ui, sans-serif |
| --radius | 2px |
| --radius-sm | 2px |
| --shadow | 3px 3px 0 oklch(55% 0.04 65), 4px 4px 0 oklch(55% 0.04 65 / 0.4) |
| --shadow-lg | 5px 5px 0 oklch(48% 0.04 62), 7px 7px 0 oklch(48% 0.04 62 / 0.3) |
@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&family=Caveat:wght@400;700&display=swap');
:root {
--bg: oklch(96% 0.025 80);
--fg: oklch(18% 0.02 55);
--muted: oklch(48% 0.03 60);
--surface: oklch(98% 0.015 85);
--surface-2: oklch(92% 0.03 78);
--border: oklch(60% 0.05 68);
--accent: oklch(52% 0.22 25);
--accent-fg: oklch(99% 0 0);
--focus: oklch(52% 0.22 25);
--font-body: 'Patrick Hand', cursive, system-ui, sans-serif;
--font-display: 'Caveat', cursive, system-ui, sans-serif;
--radius: 2px;
--radius-sm: 2px;
--shadow: 3px 3px 0 oklch(55% 0.04 65), 4px 4px 0 oklch(55% 0.04 65 / 0.4);
--shadow-lg: 5px 5px 0 oklch(48% 0.04 62), 7px 7px 0 oklch(48% 0.04 62 / 0.3);
}Where it came from
Origin: Whiteboard product videos, sketch-note culture, Mailchimp illustration era
As digital interfaces got smoother and more polished, some brands moved in the opposite direction — choosing rough, hand-made illustration to signal approachability and character. Mailchimp's Freddie mascot and the loose, hand-drawn illustrations of its 2018 rebrand were an influential example. The style proliferated across startup landing pages and fintech onboarding flows through the late 2010s.
How to spot it
- Slightly imperfect, wobbling lines and borders
- Ink-wash or hatching textures in fills
- Rough brush or handwritten display type
- Pencil or ink sketch illustration style
Trade-offs
| Strengths | Weaknesses |
|---|---|
| Warm, approachable, and humanising | Hard to maintain quality at scale |
| Signals craft and personality | Can feel infantile if executed carelessly |
| Stands out in a world of perfectly smooth UI | Wrong tone for serious enterprise or financial products |
In the wild
- Mailchimp brand illustration system
- Early Basecamp marketing design
- Whiteboard explainer video aesthetics
Use it when
Consumer apps, education, or human-services brands where warmth is a competitive advantage.