Art Nouveau

---
name: art-nouveau
description: Apply the Art Nouveau visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Art Nouveau, mentions nouveau, Mucha style, Jugendstil, or describes whiplash S-curves, botanical frames and borders, muted natural palette — 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
---

# Art Nouveau Design System

The 1890s–1910s style of organic whiplash curves: botanical frames, flowing hand-drawn linework, muted natural palettes of sage, plum, and cream, and ornamental borders that grow around content like vines. Symmetrical, framed, and illustrative — every page a decorated panel.

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 Art Nouveau.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (nouveau, Mucha style, Jugendstil, Secession style, organic ornament), or describes its traits: whiplash S-curves; botanical frames and borders; muted natural palette; ornamental symmetry; illustrative linework; flowing organic display type.

## Design tokens

### Color palette

- Aged cream paper ground: `#f6f1e3` (--color-bg)
- Deeper parchment panel tone: `#efe7d3` (--color-surface)
- Warm sepia-brown ink text: `#3a3226` (--color-text)
- Faded ink for captions: `#6d6353` (--color-text-muted)
- Plum — links, buttons, and functional accents: `#6b4e71` (--color-accent)
- Sage green — botanical linework and decorative fills: `#7c8b5e` (--color-accent-sage)
- Old gold — ornament highlights and frame details: `#b08d3f` (--color-accent-gold)
- Muted teal — secondary decorative tone: `#4e7a72` (--color-accent-teal)

### Typography

- Display / headings: Cormorant (fallback: Georgia, serif) (ideal: ITC Benguiat / Arnold Böcklin, premium — use Cormorant as the free substitute)
- Body: EB Garamond (fallback: Garamond, Georgia, serif)
- Type scale: 1.333 ratio, base 17px — computed steps: 17px / 23px / 30px / 40px / 54px / 72px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 500, line-height 1.25, letter-spacing 0.04em
- Body: line-height 1.5, letter-spacing 0.01em

### Spacing, radius, border

- Spacing scale (px): 4, 8, 16, 24, 40, 64, 96, 128 — Ornamental margins: wide decorated borders around generous content wells; text blocks are narrow and framed rather than full-width.
- Border radius: sm 4px, arch 160px 160px 0 0, circle 50% — Gentle organic softening on panels; arched tops for portrait frames and feature panels echo poster architecture.
- Border treatment: 2px solid #b08d3f — Frames matter more than borders: double gold rules, or SVG botanical border ornaments at panel corners. Plain boxes should feel drawn, not extruded.

### Shadows

- none: `none` — Lithographic flatness — panels are printed, not floating; depth comes from layered frames and tone

### Layout

- Max content width: 1080px
- Symmetrical, centered compositions with decorated outer margins
- Content enclosed in frames: arched panels, circular medallions, botanical corner ornaments
- Illustrative border SVGs grow inward from corners, never covering text
- Narrow measure (55–65ch) befitting a printed poster caption

### Effects

- SVG whiplash-curve corner ornaments and vine dividers
- Circular halo/medallion backdrop behind portraits, à la Mucha
- Subtle paper-fiber texture on the background at 3–4% opacity
- Drop caps in the display face with a small floral flourish

### Motion

- Easing: cubic-bezier(0.45, 0, 0.15, 1); durations 200ms / 400ms / 800ms
- Ornamental linework may draw itself in (SVG stroke-dashoffset) on first reveal
- Slow, graceful fades; elements bloom rather than pop
- Hover gently deepens plum accents and thickens frame strokes

## CSS variables (drop-in)

```css
:root {
  --color-bg: #f6f1e3;
  --color-surface: #efe7d3;
  --color-text: #3a3226;
  --color-text-muted: #6d6353;
  --color-accent: #6b4e71;
  --color-accent-sage: #7c8b5e;
  --color-accent-gold: #b08d3f;
  --color-accent-teal: #4e7a72;
  --radius-sm: 4px;
  --radius-arch: 160px 160px 0 0;
  --radius-circle: 50%;
  --border-default: 2px solid #b08d3f;
  --font-display: Cormorant, Georgia, serif;
  --font-body: "EB Garamond", Garamond, Georgia, serif;
  --text-base: 17px;
  --leading-heading: 1.25;
  --leading-body: 1.5;
  --tracking-heading: 0.04em;
  --tracking-body: 0.01em;
  --ease: cubic-bezier(0.45, 0, 0.15, 1);
  --duration-fast: 200ms;
  --duration-base: 400ms;
  --duration-slow: 800ms;
}
```

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

## Component recipes

- **Nav:** Cream bar with a thin gold rule and a small vine ornament at center; serif wordmark; links in EB Garamond small caps with a curved flourish underline on hover
- **Hero:** Arched hero panel with botanical corner ornaments, Cormorant headline, circular medallion illustration, plum CTA beneath a vine divider
- **Card:** Parchment surface, 2px gold frame with sage corner ornaments, arched or soft-cornered top, centered serif title, 24–32px padding
- **Button (primary):** Plum fill, cream text, 4px radius, thin gold inner keyline; hover deepens plum and the keyline brightens
- **Button (secondary):** Transparent with 2px plum border, plum text; hover fills plum at 10%
- **Form fields:** Cream field, 2px sepia bottom border with tiny curled ends (SVG), sepia text; focus swaps the underline to plum

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

A content panel enclosed in a hand-drawn botanical frame — stems and blossoms tracing whiplash S-curves around the corners, in the manner of a Mucha poster border. Spend boldness here; keep everything else quiet.

## Do

- Frame content with organic ornament — borders are the star of the composition
- Keep the palette muted and natural: sage, plum, old gold, teal on cream
- Use flowing serif display type with generous line-height
- Let curves be continuous and confident; a whiplash line never wobbles

## Don't

- No neon or fully saturated colors — everything is softened, vegetal, aged
- No hard geometric grids or sharp diagonal bars; that's Deco and Bauhaus territory
- Don't let ornament overlap or crowd body text
- Avoid mechanical sans-serifs except in tiny functional UI labels

## Accessibility notes

- Sage (#7c8b5e) on cream is about 3.2:1 — decorative linework and large display only, never functional text; use plum (#6b4e71, about 6.2:1) for links and labels
- Old gold (#b08d3f) also fails AA for small text on cream; reserve it for frames and ornaments
- Self-drawing SVG ornament animations must be disabled under prefers-reduced-motion
- Keep drop caps and small-caps styling purely presentational so screen readers get plain text

## Reference sites

- Mucha Foundation: https://www.muchafoundation.org
- Musée d'Orsay: https://www.musee-orsay.fr
- V&A — Art Nouveau: https://www.vam.ac.uk

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

Install this skill

unzip art-nouveau.zip -d ~/.claude/skills/

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

Settings → Capabilities → Skills → Upload skill → art-nouveau.zip