# Art Nouveau Florido

## Overview
An 1890s Art Nouveau web style: whiplash plant curves wrap section boundaries, frames, and dividers; flowing Garamond serifs carry the hierarchy; and a calm belle-époque palette of mustard gold, sage, and plum sits on warm cream. You know it is this style when SVG whiplash curves flow around content instead of straight borders, headlines and body are both serif, colors are 19th-century muted (never saturated primaries), and curve ornaments draw themselves in like growing vines.

## Colors & Roles
Canonical mode is light (cream). `background` is cream (oklch 0.941/0.025/89), `foreground` near-black warm ink (~11:1 contrast, AAA). Exactly three chromatic accents, and no others: mustard gold (`accent`, `border`, `ring` — the main ornament and curve-stroke color), sage (secondary surfaces and dividers; chart-2), and plum (`primary` — solid buttons, deep emphasis, kicker labels). `secondary` is the pack's own surface variant (#EAE1CB); card/popover, muted, and input are derived tonal steps on the cream–ink axis, not new hues. There is no error color in the source spec, so `destructive` reuses plum. Dark mode is a non-canonical adaptation: the ink deepened into a warm brown ground, with mustard and plum lifted in lightness at the same hue angles.

## Typography Rules
Serif only — sans-serif is banned outright, so even the `font-sans` role maps to EB Garamond. Display: Cormorant Garamond 600, `clamp(2.6rem, 5vw, 4.8rem)`, line-height 1.1, zero tracking (Cormorant SC small-caps is an allowed headline option). Body: EB Garamond 400, 1.1rem, line-height 1.7, measure 60–70 characters. Kickers/labels: EB Garamond 500, 0.82rem, small-caps (or uppercase), letter-spacing 0.16em, colored plum. Drop cap: the first letter of body copy set in Cormorant 600, three lines tall, mustard, wrapped in a leaf-and-curve filigree frame.

## Layout Principles
Content max-width 1080px; side padding 24px mobile / 56px desktop; breakpoints 720px and 1080px. Avoid strict rectangular grids — text blocks and images offset asymmetrically, following the flow of the whiplash curves. Section boundaries are curved SVG bands, not straight rules, with `clamp(32px, 4vw, 56px)` clearance so curves never invade text. Vertical rhythm: `clamp(80px, 9vw, 128px)`. Ornament density is mandatory: every section carries (a) a pair of whiplash curve bands at its top/bottom edges (1.5–2.5px stroke, tapering into bud/leaf motifs), (b) corner filigree vines on the content frame (e.g. top-left and bottom-right), and (c) one faint (opacity 0.12–0.2) large curve or floral watermark in empty cream areas. Blank flat cream is a defect, not restraint.

## Depth & Elevation
No shadows at all. Depth comes from curve frames and tonal surface steps (`background` vs `secondary`). No gradients, glass, blur, or noise either.

## Shapes
Asymmetric organic corners are the identity: cards and images use radii like `60px 8px 60px 8px` (arch on top only, or opposite diagonal corners rounded). Uniform border-radius on all four corners is forbidden. Buttons are curve-framed pills (999px). Images take arched or curved `clip-path` masks with mustard/sage curve frames on top.

## Component Stylings
- **Button**: curve-framed pill — mustard 1.5px border (outline) or solid plum (primary, cream text), padding 12px 30px, EB Garamond small-caps, small plant-curve details at each end. Hover: the plant detail blooms, scale 1.0→1.08 over 360ms. Focus: mustard ring, 2px offset.
- **Card**: asymmetric organic corners (`60px 8px 60px 8px`), mustard 1.5px curve-stroke frame, cream surface, padding 32px. Inside: mustard drop cap or Cormorant title + EB Garamond body + a plant motif at the curve's end. Fill empty corners with small vine filigree — no dead whitespace inside boxes. Inner spacing: title↔body 16px, body↔bottom motif 20px.
- **Divider**: never a straight `<hr>` — an asymmetric left-to-right whiplash curve with a small flower motif at center.
- **Nav**: 76px cream header; Cormorant SC wordmark left, EB Garamond small-caps menu (28px item gap), curve-framed CTA right. The bottom edge is a faint mustard whiplash band ending in leaf motifs, not a straight rule. Menu hover draws a curved underline left→right.
- **Quote block**: large Cormorant italic quote wrapped by whiplash quote-mark ornaments left and right, sage small-caps attribution, two floral filigree points at the corners.
- **Icons**: no generic line icons — craft leaf/bud/vine-curl motifs at 1.5px stroke in mustard or sage.
- **Gallery tile**: arch-masked image + mustard 1.5px curve frame + small-caps caption below; asymmetric 2–3 column layout with varied heights; faint plant curves linking tiles.

## Motion
Flowing and blooming, never mechanical. Base transition 420ms `cubic-bezier(0.34, 1.2, 0.64, 1)` (gentle overshoot). Curve ornaments enter by `stroke-dashoffset` draw (800ms ease-in-out) — vines growing — with terminal plant motifs fading/scaling in after the draw completes. Scroll entry: opacity + translateY(20px→0), 420ms. Links draw a curved underline left→right. `prefers-reduced-motion`: drop draws and wobbles, keep opacity only.

## Do's and Don'ts
**Do:** fill every section with the three-ornament set (boundary curve bands + corner filigree + faint watermark); taper curve strokes into leaf/bud endings; use asymmetric radii; open body copy with a three-line mustard drop cap; draw curves in vine-like.
**Don't:** reduce ornament to "a couple of thin gold lines and a flat arch" — that is identity loss; use straight borders, uniform radii, sans-serif type, saturated primaries, gradients, shadows, glass, or emoji; use modern hand-drawn botanicals or organic blobs (only canonical 19th-century whiplash — asymmetric, tapering); use fast snappy motion, dead flat voids, or generic placeholder icons.

## Responsive Behavior
Asymmetric two-column compositions stack to a single column below 720px; display type scales via `clamp()`. Side padding drops to 24px; nav collapses to a curved (not generic) hamburger icon on the right. Keep the ornament set alive at every breakpoint — mobile sections still get boundary curves and watermarks, scaled down.

## Agent Prompt Guide
> Build this in the 'Art Nouveau Florido' style: an 1890s belle-époque composition on warm cream with exactly three muted accents (mustard gold, sage, plum); replace every straight border with SVG whiplash curves (1.5–2.5px, tapering into leaf/bud motifs) wrapping section edges, frame corners, and faint filigree watermarks in empty areas; Cormorant Garamond 600 display + EB Garamond body with plum small-caps labels and a mustard three-line drop cap; asymmetric organic corners (60px 8px 60px 8px), pill buttons with mustard curve borders or solid plum; no shadows, gradients, or sans-serifs; animate curves growing via stroke-dashoffset (800ms) with gentle 420ms overshoot easing elsewhere.

## Known Gaps / Confidence
Adapted from the MIT-licensed design-diversity pack `web-art-nouveau-florido` — an authored design spec, not measured from a live site, so all confidence fields are `manual`. The six palette hexes are the pack's own specified values (converted to OKLCH); card/muted/input tonal steps are derived, and the dark mode is an authored adaptation (the pack is cream-native). Fonts are open Google Fonts (Cormorant Garamond, EB Garamond — OFL), so no commercial-font substitution is needed. The pack prescribes SVG ornament density in detail; actual filigree artwork quality depends on the implementing agent's SVG craft.