Style

Handmade craft

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

Mood: warm
Mood: friendly
Mood: raw
Density: balanced
Era: timeless
Warmth: warm

See it live

Example: sewing workshop page for Bobbinwick Sewing Rooms, a fictional brand made up for this explorer. Switch the width to see the style on a phone, a tablet and a desktop screen.

Open the example on its own

Copy the idea

Take the style with you as a brief for a person, as instructions for an AI assistant, or as design tokens. It describes the idea and the rules — never the example's code.

# Handmade craft — style 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

## Type

- Headings: Caveat, weights 600, 700 — Handwriting for headings and notes only
- Body: Libre Baskerville, weights 400, 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

Design in the "Handmade craft" style.

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

It suits:
- Workshops, makers and small shops
- Personal projects and community groups
- Brands that sell care and skill
It is a poor fit when:
- The product must look precise or technical
- The brand is formal or corporate

Follow these 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

Use this palette:
- 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
Keep text on the background at least as readable as this palette's 13.80:1 contrast, and never below 4.5:1.

Use Caveat (weights 600, 700) for headings: Handwriting for headings and notes only.
Use Libre Baskerville (weights 400, 700) for body text: Classic, bookish serif for reading.
Use this type scale: 15px, 17px, 20px, 28px, 42px, 64px. Handwriting on top, a book serif underneath; never handwriting for long text.

Space everything from a 8px base unit with the steps 8px, 16px, 24px, 40px, 72px. Comfortable; notes and stamps sit slightly off the grid.
Use corner radii of 2px, 6px.
Borders: Hand-drawn SVG lines and dashed stitches
Shadows: Paper-like, very small

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

Do: Underline with a hand-drawn line
Do: Use a stamp badge once
Do: Keep body text in the book serif
Avoid: No perfect geometric icons
Avoid: No neon colours
Avoid: No handwriting for paragraphs

Apply the idea and the rules above; do not copy any existing website.

:root {
  --color-background: #fbf6ee;
  --color-surface: #f3e9d8;
  --color-text: #2e2620;
  --color-muted: #5e5248;
  --color-accent: #b03a24;
  --color-accent-2: #2f6d8a;
  --color-border: #2e2620;
  --font-heading: "Caveat", cursive;
  --font-body: "Libre Baskerville", serif;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 72px;
  --radius-1: 2px;
  --radius-2: 6px;
}

The recipe

Handmade craft — style recipe: the same text the brief copies.

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

Type

Headings: Caveat, weights 600, 700 — Handwriting for headings and notes only
Body: Libre Baskerville, weights 400, 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

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, weights 600, 700

The quick brown fox jumps over the lazy dog

Handwriting for headings and notes only

Body Libre Baskerville, weights 400, 700

The quick brown fox jumps over the lazy dog

Classic, bookish serif for reading

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

64pxThe quick brown fox jumps over the lazy dog
42pxThe quick brown fox jumps over the lazy dog
28pxThe quick brown fox jumps over the lazy dog
20pxThe quick brown fox jumps over the lazy dog
17pxThe quick brown fox jumps over the lazy dog
15pxThe quick brown fox jumps over the lazy dog

Spacing and shape

Spacing base unit 8px

8px
16px
24px
40px
72px

Comfortable; notes and stamps sit slightly off the grid.

Corner radii

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

Similar styles

The styles closest to this one in mood, density, era, warmth and accent colour.

Handmade craft

See it live

Learn to sew, one stitch at a time.

Classes this season

First stitches

Mend & patch

Your first dress

What to bring

Find the rooms

Copy the idea

The recipe

The idea

Use it when

Avoid it when

Principles

Colour

Type

Spacing and shape

Imagery and motion

Do

Don't

Palette

Type

Spacing and shape

Do and don't

Do

Don't

Similar styles