✦ Design Style 2026

Looks hand-drawn.
Feels alive.

A design system that mimics pencil sketches, rough strokes, and imperfect geometry — perfect for creative tools and portfolios that want to feel genuinely human.

Get started → See examples
← rough edges! ⭐ hand-drawn feel

trusted by creative tools →


Imperfection is the feature

Every rule here is designed to make your UI feel like it was drawn by a human, not generated by a machine.

Pencil borders

Hard offset shadows and dashed outlines mimic the real pencil aesthetic without heavy assets.

🎨

Color washes

Fill areas with 20–40% opacity washes — like watercolor on a pencil sketch. Soft, not flat.

📝

Handwriting fonts

Caveat, Kalam, Patrick Hand — one font choice shifts the entire vibe from sterile to warm.

📐

Slight rotations

Cards and elements rotated 0.5–1° — nothing rigidly grid-locked. Organic layouts always.

Margin annotations

Tiny notes and arrows that look like a designer left them in — "← try this!" style callouts.

📄

Paper texture

Off-white backgrounds like #FAFAF5 with subtle noise — swap pure white for this single change.


Three steps to sketchy

1

Set the canvas

Switch background to #FAFAF5, add noise texture, import Caveat or Kalam font.

2

Sketch the elements

Apply 2px solid borders, hard offset shadows, and slight rotations to all cards.

3

Add personality

Drop in annotations, dashed borders, color washes and wobble hover animations.


Warm, not loud

Inspired by pencil, paper, and a single terracotta accent marker.

Paper White

Pencil Dark

Sketch Gray

Terracotta

Soft Yellow

Card Cream


Makers love it

Finally a UI system that doesn't look like every other SaaS tool. My portfolio finally feels like me.

LK

Lena K.

Illustrator & product designer

The hard offset shadows and dashed borders took me 20 minutes to implement. The warmth? Immediately there.

MR

Marco R.

Indie hacker & developer

I used this for an educational kids app. Parents and teachers both told me it felt "friendly and safe." That's the sketch vibe.

SJ

Sara J.

EdTech founder

Annotation arrows and margin notes turned our onboarding from bland tooltips into something that actually feels human-made.

TC

Tom C.

Design tool startup


Pay for what you actually need

No hidden fees, no enterprise gatekeeping. Pick a plan and start sketching. → (it's pretty simple)

✏ starter

Free

Perfect for side projects and personal portfolios.

$0 / forever
  • Full design system docs
  • Core CSS variables & tokens
  • 3 starter templates
  • Community support
  • Component library
  • Figma kit
Start for free →
★ most popular
🎨 maker

Pro

For designers and developers building real products.

$ 12 / month
  • Everything in Free
  • Full component library
  • Figma & Sketch kit
  • 20+ page templates
  • Annotation toolkit
  • Priority email support
Get Pro →
🖋 studio

Team

For studios and teams shipping multiple products.

$ 39 / month
  • Everything in Pro
  • Unlimited team seats
  • White-label license
  • Custom token export
  • Slack & Discord access
  • 1-on-1 onboarding call
Get Team →

Make it feel human.

In 2026, pixel-perfect is everywhere. Hand-drawn is rare — and genuinely valuable. ✏

Start sketching → ← it's pretty simple ★ humans made this