Cottagecore

---
name: cottagecore
description: Apply the Cottagecore visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Cottagecore, mentions farmcore, countrycore, pastoral aesthetic, or describes sage and dusty-rose palette, warm serif typography, botanical and floral borders — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Cottagecore Design System

Cozy pastoral nostalgia: sage and dusty rose over warm cream, Cormorant serifs with handwritten accents, floral borders and gingham details. The web equivalent of a sun-lit farmhouse kitchen with bread in the oven.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values are representative interpretations of the aesthetic, not an official spec. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Cottagecore.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (farmcore, countrycore, pastoral aesthetic, cozy rustic), or describes its traits: sage and dusty-rose palette; warm serif typography; botanical and floral borders; handwritten accents; gingham and linen textures; soft organic corners.

## Design tokens

### Color palette

- Warm cream, like unbleached linen: `#faf5e9` (--color-bg)
- Card background, fresh cream: `#fffcf4` (--color-surface)
- Soft espresso brown primary text: `#3d3229` (--color-text)
- Secondary text, warm walnut: `#6b5138` (--color-text-muted)
- Sage green — links, buttons, botanical linework: `#596854` (--color-accent)
- Dusty rose — tags, illustration fills, gentle highlights: `#dda6b9` (--color-rose)
- Wheat gold — banner fills and gingham checks: `#f0d9a7` (--color-wheat)
- Muted brown — decorative rules, basket-weave details: `#ad794b` (--color-brown)
- Soft linen-toned hairlines: `#e3d8c2` (--color-border)

### Typography

- Display / headings: Cormorant Garamond (fallback: Garamond, Georgia, serif)
- Body: Lora (fallback: Georgia, serif)
- Type scale: 1.25 ratio, base 17px — computed steps: 17px / 21px / 27px / 33px / 42px / 52px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 500, line-height 1.25, letter-spacing 0.01em
- Body: line-height 1.65, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 4, 8, 16, 24, 32, 48, 64, 96 — Airy and unhurried, like a country morning; generous margins let floral borders breathe, and nothing crowds.
- Border radius: sm 12px, md 16px, lg 20px, scallop 20px 8px 20px 8px — Soft organic rounding; the alternating scallop radius gives cards a hand-sewn, patchwork feel.
- Border treatment: 1px solid #e3d8c2 — Linen-soft hairlines; special frames use a 1px sage double border with 3px gap, like embroidery hoops.

### Shadows

- soft: `0 2px 10px rgba(107, 81, 56, 0.10)` — Default card shadow, warm and faint
- soft-lg: `0 8px 24px rgba(107, 81, 56, 0.14)` — Hover states and featured panels

### Layout

- Max content width: 1080px
- Centered, symmetrical hero with a floral wreath or arch framing the headline
- Recipe-card style panels with scalloped or double-line frames
- Illustration sprigs tucked into corners and between sections
- Gingham or linen texture strips as section dividers

### Effects

- Subtle paper or linen grain over the cream background
- Line-drawn wildflower and herb illustrations in sage and rose
- Handwritten script accents (Caveat-style) for labels, prices, and asides
- Warm photo grain filter on lifestyle imagery

### Motion

- Easing: cubic-bezier(0.25, 0.46, 0.45, 0.94); durations 200ms / 350ms / 600ms
- Gentle fades and 8px rises on scroll — nothing bounces
- Floral linework can draw in slowly on first view
- Hover warms a card: shadow deepens slightly, image scales 1.02

## CSS variables (drop-in)

```css
:root {
  --color-bg: #faf5e9;
  --color-surface: #fffcf4;
  --color-text: #3d3229;
  --color-text-muted: #6b5138;
  --color-accent: #596854;
  --color-rose: #dda6b9;
  --color-wheat: #f0d9a7;
  --color-brown: #ad794b;
  --color-border: #e3d8c2;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-scallop: 20px 8px 20px 8px;
  --shadow-soft: 0 2px 10px rgba(107, 81, 56, 0.10);
  --shadow-soft-lg: 0 8px 24px rgba(107, 81, 56, 0.14);
  --border-default: 1px solid #e3d8c2;
  --font-display: "Cormorant Garamond", Garamond, Georgia, serif;
  --font-body: Lora, Georgia, serif;
  --text-base: 17px;
  --leading-heading: 1.25;
  --leading-body: 1.65;
  --tracking-heading: 0.01em;
  --tracking-body: 0;
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --duration-fast: 200ms;
  --duration-base: 350ms;
  --duration-slow: 600ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600&family=Lora:wght@400;500;600&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** Cream bar, 72px, wordmark in Cormorant Garamond italic; links in small-caps Lora with a rose dot marking the active page
- **Hero:** Centered Cormorant headline framed by a wildflower wreath illustration, handwritten subline in script, sage-green CTA beneath
- **Card:** Fresh cream surface, 16px radius or scallop, soft shadow, sprig illustration at one corner, 24px padding, serif title with script price or label
- **Button (primary):** Sage green fill, cream text, 999px pill, soft shadow; deepens to a darker sage on hover
- **Button (secondary):** Transparent, 1px sage border, sage text; fills pale sage on hover
- **Form fields:** Cream surface, 1px linen border, 12px radius, serif input text; focus shifts border to sage with a faint rose outer glow

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

Delicate floral border illustrations framing key content — a wreath of line-drawn wildflowers around the hero headline, sprigs at card corners — paired with a handwritten script accent for labels and pull-quotes. Spend boldness here; keep everything else quiet.

## Do

- Frame important content with botanical linework — wreaths, arches, corner sprigs
- Keep every color muted and sun-faded; the palette should feel naturally dyed
- Mix warm serifs with a single handwritten script accent
- Add tactile texture: linen grain, gingham strips, stitched borders

## Don't

- No pure white or pure black — everything is cream and espresso
- No sharp corners, hard shadows, or glossy gradients
- Don't over-saturate the rose and wheat tones; keep them dusty
- Avoid more than one script face — it tips from cozy into cluttered

## Accessibility notes

- Sage #596854 on cream passes at ~5.4:1 for text, but dusty rose #dda6b9 and wheat #f0d9a7 are decorative fills only — never use them for text or icons that convey meaning
- Handwritten script accents should be limited to short decorative labels; body copy stays in the serif for readability
- Texture overlays must stay under ~5% opacity so they never reduce text contrast

## Reference sites

- Etsy handmade shops: https://www.etsy.com
- Magnolia: https://magnolia.com
- Kinfolk: https://www.kinfolk.com

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip cottagecore.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/cottagecore.json

Settings → Capabilities → Skills → Upload skill → cottagecore.zip