Design style

Handmade craft

Made by a person: paper colours, ink lines, wonky hand-drawn shapes, stamps and handwritten notes.

  • warm
  • friendly
  • raw
  • balanced
  • timeless
  • warm

See it live

Bobbinwick Sewing Rooms is a fictional sewing workshop page, written for this library to show the Handmade craftstyle. Switch the width to see it at phone, tablet and desktop size.

Open the example on its own

Copy the idea

The Handmade craft recipe — its principles, palette, type, spacing and rules — ready to paste into a design tool or an AI assistant.

Download brief (.md)Download tokens (.css)

The recipe

The idea

Made by a person: paper colours, ink lines, wonky hand-drawn shapes, stamps and handwritten notes.

Use it when

  • Workshops, makers and small shops
  • Personal projects and community groups
  • Brands that sell care and skill

Avoid it when

  • The product must look precise or technical
  • The brand is formal or corporate

Principles

  • Paper-coloured backgrounds with subtle grain
  • Hand-drawn, slightly wobbly lines and underlines
  • Handwriting for short notes, a classic serif for text
  • Stamp- and label-like badges
  • Small imperfections on purpose
  • Ink colours: rust red and indigo

Colour

  • Paper (background): #fbf6ee
  • Kraft (surface): #f3e9d8
  • Walnut ink (text): #2e2620
  • Pencil (muted): #5e5248
  • Rust stamp (accent): #b03a24
  • Indigo ink (accent-2): #2f6d8a
  • Ink line (border): #2e2620
  • Text on background contrast: 13.80:1 — passes AA

Type

  • Headings: Caveat, weights 600 and 700 — Handwriting for headings and notes only
  • Body: Libre Baskerville, weights 400 and 700 — Classic, bookish serif for reading
  • Scale: 15px, 17px, 20px, 28px, 42px, 64px
  • Handwriting on top, a book serif underneath; never handwriting for long text.

Spacing and shape

  • Base unit: 8px
  • Spacing steps: 8px, 16px, 24px, 40px, 72px
  • Comfortable; notes and stamps sit slightly off the grid.
  • Corner radii: 2px, 6px
  • Borders: Hand-drawn SVG lines and dashed stitches
  • Shadows: Paper-like, very small

Imagery and motion

  • Imagery: Hand-drawn SVG doodles, stitches, stamps and labels.
  • Motion: A line draws itself; otherwise still.

Do

  • Underline with a hand-drawn line
  • Use a stamp badge once
  • Keep body text in the book serif

Don't

  • No perfect geometric icons
  • No neon colours
  • No handwriting for paragraphs

Similar styles

Styles that share the most of Handmade craft's mood, density, era and warmth.

Palette

  • Paperbackground #fbf6ee
  • Kraftsurface #f3e9d8
  • Walnut inktext #2e2620
  • Pencilmuted #5e5248
  • Rust stampaccent #b03a24
  • Indigo inkaccent-2 #2f6d8a
  • Ink lineborder #2e2620

Text on background: 13.80:1 — passes AA

Type

Headings · Caveat · 600, 700

The quick brown fox jumps over the lazy dog

Handwriting for headings and notes only

Body · Libre Baskerville · 400, 700

The quick brown fox jumps over the lazy dog

Classic, bookish serif for reading

  1. 64pxThe quick brown fox jumps over the lazy dog
  2. 42pxThe quick brown fox jumps over the lazy dog
  3. 28pxThe quick brown fox jumps over the lazy dog
  4. 20pxThe quick brown fox jumps over the lazy dog
  5. 17pxThe quick brown fox jumps over the lazy dog
  6. 15pxThe quick brown fox jumps over the lazy dog

Handwriting on top, a book serif underneath; never handwriting for long text.

Spacing and shape

Spacing on a 8px base

  1. 8px
  2. 16px
  3. 24px
  4. 40px
  5. 72px

Comfortable; notes and stamps sit slightly off the grid.

Corners, borders and shadows

  • 2px
  • 6px
Borders
Hand-drawn SVG lines and dashed stitches
Shadows
Paper-like, very small

Do and don't

Do

  • Underline with a hand-drawn line
  • Use a stamp badge once
  • Keep body text in the book serif

Don't

  • No perfect geometric icons
  • No neon colours
  • No handwriting for paragraphs

Compare with…

See Handmade craft side by side with another style, and what differs.