Design System

Embroidery

Handcrafted textile aesthetics with cross-stitch charm

01

Thread Palette

A vibrant collection of embroidery floss colors inspired by classic DMC thread palettes, designed for rich contrast on natural fabric backgrounds.

Cherry Red #C41E3A
Burgundy #722F37
Coral #E07A5F
Rose Pink #E8A0BF
Pumpkin #E67E22
Gold #D4A017
Sunshine #F4D03F
Spring Lime #8BC34A
Forest #2E8B57
Teal #008080
Sky Blue #4A90D9
Navy #1A3A5C
Lavender #9B7BB8
Plum #6B3FA0
Chestnut #8B4513
Charcoal #2C2C2C

Fabric Backgrounds

Aida White #FAF8F5
Aida Ecru #F0E8D8
Linen Cream #F5F0E6
Natural Linen #E8E0D0
Burlap Tan #D4C4A8
02

Typography

Pixel-perfect cross-stitch letterforms paired with warm, readable body text for that handcrafted sampler aesthetic.

Display

Silkscreen / 48px

Stitched

Heading 1

Silkscreen / 32px

Home Sweet Home

Heading 2

Silkscreen / 24px

Cross-Stitch Sampler

Subheading

VT323 / 24px

Handmade with Love and Care

Body

Nunito / 16px

The art of embroidery brings warmth and personality to every stitch. Each thread carefully placed tells a story of patience, creativity, and timeless craftsmanship passed down through generations.

Caption

Nunito / 14px

14-count Aida cloth with DMC floss, backstitch outline
03

Spacing Scale

A 4px base unit that aligns with cross-stitch grid patterns for pixel-perfect layouts.

4px
xs
8px
sm
12px
md
16px
base
24px
lg
32px
xl
48px
2xl
64px
3xl
96px
4xl
04

Buttons

Buttons with decorative stitched borders that feel like embroidered patches.

Button Variants

Outline Style

Button Sizes

05

Form Elements

Input fields on fabric-textured backgrounds with cross-stitch style checkboxes.

06

Cards

Cards styled as embroidery hoops and fabric swatches for that cozy craft room feel.

07

Data Table

Organized information on fabric-textured surfaces with stitched details.

Thread Color DMC Code Fabric Type Skeins Needed
Cherry Red 321 14-ct Aida 3
Navy Blue 336 18-ct Aida 2
Antique Gold 729 Linen 4
Forest Green 890 Evenweave 2
Lavender 554 14-ct Aida 1
08

Badges

Small embroidered patches and labels for status indicators and categories.

Thread Color Badges

Cherry Sky Gold Forest Plum Rose

Patch Style Badges

New Pattern Beginner Featured

French Knot Accent

In Progress Completed Favorite
09

Design Principles

The philosophy behind the embroidery aesthetic.

Grid Alignment

Like Aida cloth with its counted squares, maintain strict grid alignment. Every element should snap to the pixel grid for that authentic cross-stitch precision.

Texture & Depth

Layer fabric textures and thread shadows to create tactile warmth. The raised quality of stitches should feel dimensional, not flat.

Handmade Warmth

Embrace the cozy, nostalgic feeling of handcrafted items. Each interface should feel like it was made with love, patience, and care.

Color Harmony

Draw from traditional embroidery floss palettes. Vibrant thread colors pop against natural fabric backgrounds, creating cheerful contrast.