# Art Nouveau Florido 휘감기는 채찍 곡선(whiplash) SVG 장식과 흐르는 가라몬드 세리프, 머스터드·세이지·플럼 벨 에포크 팔레트의 1890년대 아르누보 웹 스타일. - taxonomy: art-nouveau · art-nouveau, whiplash-curve, belle-epoque, ornamental-serif, organic-asymmetric, filigree · complexity=high - page types: landing, portfolio, editorial, marketing - best for: 부티크·공방·살롱 브랜드 사이트, 문화·전시·공연 랜딩, 웨딩·프리미엄 인비테이션, 장인 정신을 강조하는 에디토리얼 - avoid for: 데이터 밀도가 높은 대시보드·SaaS 앱, 미니멀·테크 지향 제품, 빠른 스캔이 필요한 문서·독스 사이트 - provenance: authored (design-diversity 팩 'web-art-nouveau-florido' (MIT) 각색) — confidence: colors=manual, typography=manual, spacing=manual, motion=manual, layout=manual ## Design rules # 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 `
` — 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. ## Tokens (theme.css — use these values verbatim, do not re-derive) ```css /* Art Nouveau Florido — theme.css (generated, do not edit) */ :root { --radius: 60px 8px 60px 8px; --radius-selector: 999px; --radius-field: 20px 6px 20px 6px; --font-sans: 'EB Garamond', Georgia, serif; --font-serif: 'EB Garamond', Georgia, serif; --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --spacing: 8px; --shadow: 0px 1px 2px 0px color-mix(in oklab, oklch(0 0 0) 0%, transparent); --ks-display-weight: 600; --ks-display-tracking: 0; --background: oklch(0.941 0.025 89.2); --foreground: oklch(0.287 0.015 84.6); --card: oklch(0.955 0.022 89.2); --card-foreground: oklch(0.287 0.015 84.6); --popover: oklch(0.955 0.022 89.2); --popover-foreground: oklch(0.287 0.015 84.6); --primary: oklch(0.453 0.068 328.6); --primary-foreground: oklch(0.941 0.025 89.2); --secondary: oklch(0.911 0.031 88.4); --secondary-foreground: oklch(0.287 0.015 84.6); --muted: oklch(0.890 0.030 88.4); --muted-foreground: oklch(0.470 0.030 100.0); --accent: oklch(0.728 0.138 89.7); --accent-foreground: oklch(0.287 0.015 84.6); --destructive: oklch(0.453 0.068 328.6); --destructive-foreground: oklch(0.941 0.025 89.2); --border: oklch(0.728 0.138 89.7); --input: oklch(0.810 0.080 89.7); --ring: oklch(0.728 0.138 89.7); --chart-1: oklch(0.728 0.138 89.7); --chart-2: oklch(0.570 0.055 128.0); --chart-3: oklch(0.453 0.068 328.6); --chart-4: oklch(0.287 0.015 84.6); --chart-5: oklch(0.560 0.110 89.7); } .dark { --background: oklch(0.220 0.015 84.6); --foreground: oklch(0.920 0.025 89.2); --card: oklch(0.260 0.016 84.6); --card-foreground: oklch(0.920 0.025 89.2); --popover: oklch(0.260 0.016 84.6); --popover-foreground: oklch(0.920 0.025 89.2); --primary: oklch(0.620 0.085 328.6); --primary-foreground: oklch(0.941 0.025 89.2); --secondary: oklch(0.300 0.018 85.0); --secondary-foreground: oklch(0.880 0.026 88.4); --muted: oklch(0.300 0.018 85.0); --muted-foreground: oklch(0.700 0.030 89.0); --accent: oklch(0.750 0.135 89.7); --accent-foreground: oklch(0.220 0.015 84.6); --destructive: oklch(0.620 0.085 328.6); --destructive-foreground: oklch(0.941 0.025 89.2); --border: oklch(0.580 0.100 89.7); --input: oklch(0.480 0.070 89.7); --ring: oklch(0.750 0.135 89.7); --chart-1: oklch(0.750 0.135 89.7); --chart-2: oklch(0.660 0.060 128.0); --chart-3: oklch(0.620 0.085 328.6); --chart-4: oklch(0.920 0.025 89.2); --chart-5: oklch(0.560 0.110 89.7); } ``` ## Golden example (exemplar.html — match this structure and token usage) ```html

maison florido · est. 1893

Where every line
blooms into a vine

Borders do not rule here — they wander. Mustard whiplash curves wrap each frame, taper into leaves, and settle where the cream asks for ornament.

enter the atelier the craft
“The whiplash line is nature’s own signature.”
— hector, glasswright of nancy
``` ## Apply - shadcn project: `npx shadcn@latest add https://web.ggum.uk/styles/r/art-nouveau.json` — installs the tokens above into globals.css, then use semantic classes (bg-background, text-primary, …) only. - other stack: paste the theme.css block above into your global stylesheet and style everything via `var(--…)` references. - single HTML/artifact: embed the theme.css block in a `