Docs✿Cottagecore✿Gallery

A Design Style for StyleKit

Cottagecore

Romanticised rural life — embroidery, wildflowers, honey, and the quiet warmth of handmade things.

"Cottagecore romanticises agrarian life, turning the act of picking berries, kneading dough, or pressing a flower into a radical act of tenderness."

The Garden Calendar

Seasonal Botanicals

Each season brings its own palette of wildflowers, herbs, and forest finds.

Spring

Wild Violet

First to bloom after frost, petals like small purple hearts scattered across the moss.

Spring

Wood Anemone

Delicate white stars that carpet ancient woodland floors each April.

Spring

Primrose

Pale yellow clusters that brighten hedgerows and meadow edges in tender spring light.

Component Gallery

Handcrafted Elements

Each component carries a gentle imperfection — a slight lean, a soft bloom on hover.

Button Variants

Interaction Physics

Hover for a gentle lift and rotation — like picking up a handwritten note from a wooden table. Press for a soft cushion effect: active:scale-[0.97].

Colour Palette

Nature's Own Colours

Pressed from wildflowers, steeped in bark tea, ground from earth itself.

Grass Green

#5a8f5a

Buttons, headings, icons

Cream Linen

#faf6f0

Page & card backgrounds

Daisy Yellow

#f5d75f

Highlights & flower centres

Earth Brown

#8b7355

Body copy & secondary text

Flower Pink

#d4a0a0

Borders & floral details

The Craft Workshop

Made by Hand, Made with Love

Cottagecore celebrates slow crafts — each one a meditation on patience and the beauty of imperfection.

Embroidery Hoop

Needle & Thread

Cross-stitch & satin stitch

Cotton florals stitched by hand onto linen, each petal placed with patience and morning light.

A slow craft, done with care

Wild Herb Pressing

Foraged

Botanical preservation

Lavender, chamomile, and feverfew pressed between the pages of an old field guide.

A slow craft, done with care

Homemade Preserves

Pantry

Bramble jam & elderflower

Summer captured in glass jars, sealed with wax and labelled in fading handwriting.

A slow craft, done with care

Dried Flower Wreath

Seasonal

For the front door

Bundles of dried lavender, wheat, and rose hips wound with twine onto a willow frame.

A slow craft, done with care

Typography

Words Like Handwriting

Serif typography evokes old recipe books and letters tucked beneath dried flowers.

Type Scale

Wander

Display heading — main titles

Gather & Grow

Section heading — h2 level

Where wildflowers bloom.

Subtitle — italic accent

A warm cup of chamomile tea, a good book, and the sound of rain.

Body copy

foraged . pressed . stitched

Eyebrow / label — wide tracking

Quotation Style

"The earth laughs in flowers, and the soul finds rest in meadows too far from clocks to hear them."

— A Cottagecore Proverb

Usage Notes

  • ✿Use italic for quotes, captions, and gentle accents
  • ✿Heading weight: font-semibold or normal — never bold
  • ✿Wide letter-spacing for labels: tracking-[0.3em]
  • ✿Body text: leading-relaxed for breathing room

Design Rules

The Cottage Recipe

Like a recipe card passed down through the family — follow it warmly, not mechanically.

✓

Always Do

  • Warm earth tones — sage greens, dusty yellows, pinks, browns
  • Rounded corners: rounded-full, rounded-3xl, rounded-xl
  • Serif fonts for all headings and key interface text
  • Slight hover rotation (0.8deg–1deg) for handmade feel
  • Cream linen (#faf6f0) as the primary background
  • Botanical SVG decorations with gentle floating animations
  • Soft shadows — never sharp or high-contrast drop shadows
  • Generous whitespace to honour breathing room
✕

Don't

  • ✕Cold blue-grey tones, icy neutrals, or high-saturation neons
  • ✕Sharp right-angle corners or hard geometric rigid frames
  • ✕Tech, industrial, or corporate visual vocabulary
  • ✕Fast snappy transitions — keep duration 500ms to 700ms
  • ✕Sans-serif-only typography in headings or labels
  • ✕Heavy or hard borders — keep them soft and faded
  • ✕Cluttered dense layouts — slow living needs space
  • ✕Flat or sterile flat-design aesthetics

Approved Colour Pairings

Aa

Primary CTA

#5a8f5a / #faf6f0

Aa

Outline / Ghost

#faf6f0 / #5a8f5a

Aa

Floral Accent

#d4a0a0 / #faf6f0

Aa

Daisy Highlight

#f5d75f / #8b7355

Interaction Physics

Handmade Imperfection

Nothing in the cottage is machine-perfect. A slight lean, a gentle bounce — digital rendered as handmade.

Botanical Sway

Decorative elements sway gently with a slow CSS keyframe, like wildflowers in a summer breeze.

animation: sway 5s ease-in-out infinite

Gentle Imperfection

Hover lifts and leans the element slightly. Nothing in the cottage is perfectly straight.

hover:rotate-[0.8deg] hover:-translate-y-0.5

Soft Cushion Press

Clicking feels like pressing into a soft feather cushion — a gentle give, then recovery.

active:scale-[0.97] duration-500

Philosophy

A Slower Way of Living

Pastoral Poetry

Cottagecore romanticises the agrarian — tending a garden, picking berries, kneading bread at dawn. The design reflects this: nothing is hurried, nothing is harsh.

Handmade Warmth

Every interface element should feel as if it was made by hand — a slight imperfection in alignment, a warm colour that doesn't quite match the grid.

Natural Intimacy

Flowers, mushrooms, bees, berries: the natural world is brought indoors. Botanical SVG decorations are never decoration alone — they carry meaning and warmth.

Cosy Domesticity

The warmth of a cottage kitchen: soft light, worn surfaces, the smell of something baking. Cream, brown, green — colours that say 'come in, stay a while'.

StyleKit — Cottagecore Showcase
✿View Documentation✿All Styles✿

Where the digital world slows down and wildflowers grow through the cracks.