Whiplash curves
Long S-shaped lines that thicken and taper, like a cracking whip or a growing vine.
Design that grows like a plant. Whiplash curves, flowers and flowing hair wrap around arched frames, turning posters, buildings and metro entrances into living ornament.
Open the kit Copy the promptArt Nouveau took its forms from nature. Lines curve and branch like stems, and decoration becomes part of the structure instead of an extra layer.
Long S-shaped lines that thicken and taper, like a cracking whip or a growing vine.
Flowers, leaves, insects and flowing hair frame text and images.
Rounded arches and circular halos sit behind titles and portraits.
Sage, olive, gold and plum on warm cream paper.
Art Nouveau was a short, international burst of design around 1900, from Paris to Brussels, Vienna and Riga.
Architects and designers in Brussels and Paris start using flowing plant-like lines in buildings and objects.
Siegfried Bing opens his Paris gallery, Maison de l'Art Nouveau, which gives the style its name.
Alphonse Mucha's posters, with haloed figures and flowing hair, make the look famous.
Hector Guimard's cast-iron entrances for the Paris Métro bring Art Nouveau to street level.
Rock posters borrow the swirling lines and lettering of Art Nouveau.
Art Nouveau motion grows. Vines draw themselves outward from the base, slowly and organically.
These three mockups are built only from the kit on this page. Swap the tokens and they change style with it.
Beauty brands use botanical frames for a romantic, natural feel.
Food and drink labels echo 1900s ornament.
Cultural events and publishers use arched frames and flowing type.
The tokens every component on this page is built from. Copy them as a starting point, then adjust with intent.
Colours from dried flowers and old gold, never pure or saturated. Tap a swatch to copy its hex value.
:root{
--cream: #F3EBD9;
--sage: #8FA67A;
--olive: #4E5B31;
--gold: #C9A45C;
--plum: #7A4B5C;
--ink: #2F2A24;
}A display face with Nouveau curves for titles and a warm humanist serif for reading.
Body text carries the explanation. Keep lines under about 75 characters so the eye can find the next line.
:root{
--font-d: "Federo",Georgia,serif;
--font-b: "Alegreya",Georgia,serif;
--font-m: ui-monospace,Menlo,monospace;
--fs-d: clamp(51px, 9vw, 113px);
--fs-1: 51.4px; --fs-2: 39.5px;
--fs-3: 30.4px; --fs-4: 23.4px;
--fs-body: 18px; --fs-sm: 13.8px;
}
h1,h2,h3,h4 {
font-family: var(--font-d);
font-weight: 400;
letter-spacing: .04em;
text-transform: none;
line-height: 1.1;
}
/* fonts: Federo and Alegreya */Symmetrical, framed compositions. Ornament wraps around content instead of filling it.
Equal cards, product tiles, feature lists.
<div class="row"><div class="col-4">4</div><div class="col-4">4</div><div class="col-4">4</div></div>Articles, documentation, settings pages.
<div class="row"><div class="col-8">8</div><div class="col-4">4</div></div>Heroes and feature sections with tension.
<div class="row"><div class="col-5">5</div><div class="col-7">7</div></div>Dense galleries and logo walls.
<div class="row"><div class="col-3">3</div><div class="col-3">3</div><div class="col-3">3</div><div class="col-3">3</div></div>.row {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 24px;
}
.col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; } .col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
@media (max-width: 760px) {
.row { grid-template-columns: 1fr; }
.row > * { grid-column: auto; }
}Asymmetric leaf-shaped radii, inner decorative borders and arched image frames.
:root {
--radius: 28px 4px 28px 4px;
--radius-sm: 14px 3px 14px 3px;
--bw: 1.5px;
--shadow: 0 12px 26px -16px rgba(47,42,36,.5);
--shadow-sm: 0 4px 10px -6px rgba(47,42,36,.45);
--gap: 24px;
--pad: 24px;
}Change three tokens and the whole page responds, because every component reads from them. Reset brings back the style defaults.
Move a control to see the token change.Every component below is plain HTML with class names from the kit. Copy the full kit CSS once, then paste any snippet.
/* Art Nouveau kit · Anti-Boring */
:root{
--bg:#F3EBD9;
--surface:#FBF6EA;
--surface2:#E9DDC4;
--fg:#2F2A24;
--muted:#5E5446;
--accent:#4E5B31;
--accent-fg:#FBF6EA;
--accent2:#C9A45C;
--accent2-fg:#2F2A24;
--border:#8C7A55;
--bw:1.5px;
--radius:28px 4px 28px 4px;
--radius-sm:14px 3px 14px 3px;
--shadow:0 12px 26px -16px rgba(47,42,36,.5);
--shadow-sm:0 4px 10px -6px rgba(47,42,36,.45);
--font-d:"Federo",Georgia,serif;
--font-b:"Alegreya",Georgia,serif;
--font-m:ui-monospace,Menlo,monospace;
--h-weight:400;
--h-track:.04em;
--h-case:none;
--h-style:normal;
--h-lh:1.1;
--gap:24px;
--pad:24px;
--focus:rgba(201,164,92,.5);
--ok:#4E5B31;
--warn:#8A5A00;
--danger:#8C2F39;
--info:#4F6A7A;
--field-bg:#FFFDF6;
--field-shadow:none;
--media:radial-gradient(circle at 50% 110%,#C9A45C 0 30%,transparent 31%),repeating-radial-gradient(circle at 50% 110%,#8FA67A 0 6px,#E9DDC4 6px 12px);
--code-bg:#2F2A24;
--code-fg:#E9DDC4;
--btn-case:none;
--btn-track:.06em;
--btn-weight:700;
--badge-radius:999px;
--maxw:1160px;
--fs-sm:13.8px;
--fs-body:18px;
--fs-4:23.4px;
--fs-3:30.4px;
--fs-2:39.5px;
--fs-1:51.4px;
--fs-d:clamp(51px, 9vw, 113px);
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:400 var(--fs-body)/1.6 var(--font-b);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-d);font-weight:var(--h-weight);letter-spacing:var(--h-track);text-transform:var(--h-case);font-style:var(--h-style);line-height:var(--h-lh);margin:0 0 .4em}
h1{font-size:var(--fs-1)} h2{font-size:var(--fs-2)} h3{font-size:var(--fs-3)} h4{font-size:var(--fs-4)}
p{margin:0 0 1em}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
code,pre,kbd{font-family:var(--font-m)}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font:var(--btn-weight) 1rem/1 var(--font-b);text-transform:var(--btn-case);letter-spacing:var(--btn-track);padding:.85em 1.4em;border:var(--bw) solid var(--border);border-radius:var(--radius);background:var(--accent);color:var(--accent-fg);box-shadow:var(--shadow-sm);text-decoration:none;cursor:pointer;transition:transform .12s,box-shadow .12s,background-color .12s,color .12s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn-2{background:var(--accent2);color:var(--accent2-fg)}
.btn-ghost{background:transparent;color:var(--fg);box-shadow:none}
.btn-sm{font-size:.85rem;padding:.6em 1em}
.btn-lg{font-size:1.15rem;padding:1em 1.7em}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
/* forms */
.field{display:grid;gap:.4em;margin-bottom:1.1em}
.label{font-weight:600;font-size:.95rem}
.help{font-size:.85rem;color:var(--muted)}
.input,.select,.textarea{width:100%;font:1rem/1.4 var(--font-b);color:var(--fg);padding:.75em .9em;background:var(--field-bg);border:var(--bw) solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--field-shadow);appearance:none}
.select{background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px;background-repeat:no-repeat;padding-right:2.4em}
.textarea{min-height:110px;resize:vertical}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--field-shadow),0 0 0 3px var(--focus)}
.is-error .input{border-color:var(--danger)} .is-error .help{color:var(--danger)}
.choice{display:flex;align-items:center;gap:.6em;margin:.35em 0;cursor:pointer}
.check,.radio{appearance:none;width:1.25em;height:1.25em;margin:0;flex:none;border:var(--bw) solid var(--border);background:var(--field-bg);box-shadow:var(--field-shadow);display:grid;place-items:center;cursor:pointer}
.check{border-radius:calc(var(--radius-sm)/2)} .radio{border-radius:50%}
.check::after{content:"";width:.55em;height:.3em;border-left:2.5px solid var(--accent-fg);border-bottom:2.5px solid var(--accent-fg);transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.radio::after{content:"";width:.5em;height:.5em;border-radius:50%;background:var(--accent-fg);opacity:0}
.check:checked,.radio:checked{background:var(--accent);border-color:var(--border)}
.check:checked::after,.radio:checked::after{opacity:1}
.switch{appearance:none;width:2.8em;height:1.6em;margin:0;flex:none;border-radius:999px;border:var(--bw) solid var(--border);background:var(--surface2);position:relative;cursor:pointer;transition:background .15s;box-shadow:var(--field-shadow)}
.switch::before{content:"";position:absolute;top:50%;left:.18em;width:1.1em;height:1.1em;border-radius:50%;background:var(--fg);transform:translateY(-50%);transition:left .15s}
.switch:checked{background:var(--accent)}
.switch:checked::before{left:calc(100% - 1.28em);background:var(--accent-fg)}
.range{width:100%;accent-color:var(--accent)}
/* surfaces */
.card{background:var(--surface);color:var(--fg);border:var(--bw) solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--pad);position:relative}
.card-media{aspect-ratio:16/9;border-radius:var(--radius-sm);background:var(--media);margin-bottom:1em}
.badge{display:inline-block;font:600 .75rem/1 var(--font-b);padding:.45em .75em;border-radius:var(--badge-radius);background:var(--accent2);color:var(--accent2-fg);border:var(--bw) solid var(--border)}
.alert{padding:1em 1.2em;border:var(--bw) solid var(--border);border-left:6px solid var(--c,var(--info));border-radius:var(--radius-sm);background:var(--surface);margin-bottom:.8em}
.alert b{color:var(--c,var(--info))}
.alert-ok{--c:var(--ok)} .alert-warn{--c:var(--warn)} .alert-danger{--c:var(--danger)}
.progress{height:.8em;border-radius:999px;background:var(--surface2);border:var(--bw) solid var(--border);overflow:hidden}
.progress i{display:block;height:100%;background:var(--accent)}
/* navigation */
.tabs{display:flex;gap:.25em;border-bottom:var(--bw) solid var(--border);flex-wrap:wrap}
.tab{font:600 .95rem var(--font-b);padding:.7em 1em;background:none;border:0;border-bottom:3px solid transparent;color:var(--muted);cursor:pointer;margin-bottom:calc(var(--bw) * -1)}
.tab[aria-selected="true"]{color:var(--fg);border-bottom-color:var(--accent)}
.crumbs{display:flex;gap:.5em;flex-wrap:wrap;font-size:.9rem;color:var(--muted);list-style:none;padding:0;margin:0}
.crumbs li+li::before{content:"/";margin-right:.5em;opacity:.6}
.pager{display:flex;gap:.4em;list-style:none;padding:0;margin:0;flex-wrap:wrap}
.pager a{display:grid;place-items:center;min-width:2.4em;height:2.4em;border:var(--bw) solid var(--border);border-radius:var(--radius-sm);text-decoration:none;background:var(--surface)}
.pager a[aria-current]{background:var(--accent);color:var(--accent-fg)}
/* table */
.table-wrap{overflow-x:auto;border:var(--bw) solid var(--border);border-radius:var(--radius-sm);background:var(--surface)}
.table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:460px}
.table th,.table td{text-align:left;padding:.75em 1em;border-bottom:1px solid color-mix(in srgb,var(--border) 30%,transparent)}
.table th{font-family:var(--font-d);font-weight:var(--h-weight)}
/* grid */
.row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
.col-3{grid-column:span 3}.col-4{grid-column:span 4}.col-5{grid-column:span 5}.col-6{grid-column:span 6}.col-7{grid-column:span 7}.col-8{grid-column:span 8}.col-12{grid-column:span 12}
@media (max-width:760px){.row{grid-template-columns:minmax(0,1fr);gap:min(var(--gap),16px)}.row>*{grid-column:auto!important;grid-row:auto!important}}
/* signature */
.btn{border-radius:999px 6px 999px 6px;border-color:var(--border)}
.btn:hover{transform:none;border-radius:6px 999px 6px 999px}
.card{border-width:1.5px}
.card::before{content:"";position:absolute;inset:6px;border:1px solid color-mix(in srgb,var(--border) 45%,transparent);border-radius:inherit;pointer-events:none}
.card-media{border-radius:999px 999px 8px 8px}
.badge{border-radius:999px 4px 999px 4px;font-style:italic;font-weight:400}
.input,.select,.textarea{border-radius:14px 3px 14px 3px}
.alert{border-radius:20px 4px 20px 4px;border-left-width:1.5px;font-style:italic}
.alert b{font-style:normal;font-family:var(--font-d)}
.tab{font-family:var(--font-d);font-weight:400;letter-spacing:.06em}
.table-wrap{border-radius:20px 4px 20px 4px}
/* dark theme: add class="alt" to <html> */
html.alt{
--bg:#1E2218;
--surface:#262B1F;
--surface2:#22271B;
--fg:#EFE6D2;
--muted:#C3B89E;
--border:#8C7A55;
--accent:#C9A45C;
--accent-fg:#1E2218;
--accent2:#8FA67A;
--accent2-fg:#1E2218;
--field-bg:#22271B;
--code-bg:#12150E;
}
html.alt .vines path,html.alt .stage path{stroke:#8FA67A}html.alt .hero h1,html.alt .tl .yr{color:#C9A45C}html.alt .stage path:nth-child(3){stroke:#C9A45C}Three emphasis levels, three sizes and a disabled state. Keep one primary button per view.
<div class="demo-row">
<button class="btn">Primary</button>
<button class="btn btn-2">Secondary</button>
<button class="btn btn-ghost">Ghost</button>
<button class="btn" disabled>Disabled</button>
</div>
<div class="demo-row" style="margin-top:14px">
<button class="btn btn-sm">Small</button>
<button class="btn">Default</button>
<button class="btn btn-lg">Large</button>
</div>Text fields, choices and toggles share the same border, radius and focus ring, so a form reads as one family.
<form class="formgrid" onsubmit="return false">
<div>
<div class="field">
<label class="label" for="f-name">Full name</label>
<input class="input" id="f-name" placeholder="Ada Lovelace">
<span class="help">As it appears on your ID.</span>
</div>
<div class="field is-error">
<label class="label" for="f-mail">Email</label>
<input class="input" id="f-mail" type="email" value="ada@">
<span class="help">Enter a complete email address.</span>
</div>
<div class="field">
<label class="label" for="f-plan">Plan</label>
<select class="select" id="f-plan"><option>Starter</option><option>Studio</option><option>Team</option></select>
</div>
</div>
<div>
<div class="field">
<label class="label" for="f-msg">Message</label>
<textarea class="textarea" id="f-msg" placeholder="Tell us about your project"></textarea>
</div>
<fieldset class="field" style="border:0;padding:0;margin:0 0 1.1em">
<legend class="label">Interests</legend>
<label class="choice"><input type="checkbox" class="check" checked> Typography</label>
<label class="choice"><input type="checkbox" class="check"> Motion</label>
</fieldset>
<fieldset class="field" style="border:0;padding:0;margin:0 0 1.1em">
<legend class="label">Billing</legend>
<label class="choice"><input type="radio" name="bill" class="radio" checked> Monthly</label>
<label class="choice"><input type="radio" name="bill" class="radio"> Yearly</label>
</fieldset>
<label class="choice"><input type="checkbox" class="switch" checked> Email me updates</label>
<div class="field" style="margin-top:1em">
<label class="label" for="f-range">Budget</label>
<input class="range" id="f-range" type="range" value="60">
</div>
<button class="btn">Send request</button>
</div>
</form>A container for one idea. Media sits on top, then a badge, title, short text and one action.
<div class="auto">
<article class="card">
<div class="card-media"></div>
<span class="badge">New</span>
<h4 style="margin-top:.6em">Card title</h4>
<p>Short supporting text that explains what this card is about.</p>
<a class="btn btn-sm" href="#">Read more</a>
</article>
<article class="card">
<div class="card-media" style="filter:hue-rotate(40deg)"></div>
<span class="badge">Guide</span>
<h4 style="margin-top:.6em">Second card</h4>
<p>Cards in a row share height and spacing, so the grid stays calm.</p>
<a class="btn btn-sm btn-2" href="#">Open</a>
</article>
</div>Alerts, badges and progress tell people what just happened and what to do next.
<div class="alert"><b>Info.</b> Your draft saves every 30 seconds.</div>
<div class="alert alert-ok"><b>Saved.</b> Changes are live on your site.</div>
<div class="alert alert-warn"><b>Check this.</b> Two images are missing alt text.</div>
<div class="alert alert-danger"><b>Upload failed.</b> Files must be under 10 MB. Try a smaller file.</div>
<div class="demo-row" style="margin-top:14px">
<span class="badge">Default</span>
<span class="badge" style="background:var(--accent);color:var(--accent-fg)">Accent</span>
</div>
<div style="margin-top:18px"><div class="progress" role="progressbar" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100" aria-label="Upload progress"><i style="width:64%"></i></div></div>Tables scroll sideways on small screens instead of squashing columns.
| Project | Owner | Status | Due |
|---|---|---|---|
| Homepage | Rūta | Review | 12 Oct |
| Checkout | Tomas | Draft | 19 Oct |
| Onboarding | Ieva | Live | 2 Oct |
<div class="table-wrap">
<table class="table">
<thead><tr><th>Project</th><th>Owner</th><th>Status</th><th>Due</th></tr></thead>
<tbody>
<tr><td>Homepage</td><td>Rūta</td><td><span class="badge">Review</span></td><td>12 Oct</td></tr>
<tr><td>Checkout</td><td>Tomas</td><td><span class="badge">Draft</span></td><td>19 Oct</td></tr>
<tr><td>Onboarding</td><td>Ieva</td><td><span class="badge">Live</span></td><td>2 Oct</td></tr>
</tbody>
</table>
</div>A ready prompt for AI design and coding tools. It names exact tokens and bans the usual defaults, so the output keeps this style's point of view.
Design a responsive landing page for a botanical skincare brand in an authentic Art Nouveau style.
Palette: Cream #F3EBD9, Sage #8FA67A, Olive #4E5B31, Gold #C9A45C, Plum #7A4B5C, Ink #2F2A24.
Typography: Federo for titles with slight letter spacing, Alegreya for body with italics for emphasis.
Layout: A centred arched frame (big rounded top) on cream paper with a patterned circular halo behind the title and curving vines drawn in SVG along both sides.
Signature details: Sage, olive, gold and plum palette, whiplash curves, leaf-shaped asymmetric radii (28px 4px 28px 4px), inner decorative borders on cards.
Components: Leaf-shaped buttons whose corners flip on hover, arched image frames, italic badges and alerts.
Motion: Vines drawing themselves with slow SVG stroke animation.
Avoid: copies of famous posters, neon, sharp geometric shapes, ornament behind body text.
Do not fall back on generic AI defaults: no centered hero with a gradient blob, no identical rounded cards with soft grey shadows, no purple-to-blue gradients, no emoji icons, unless this style explicitly calls for them.
Accessibility: body text contrast of at least 4.5:1, visible keyboard focus on every control, labels on all form fields, and respect prefers-reduced-motion.
Deliver one self-contained HTML file with CSS variables for every color, font, radius and shadow token.Where this style usually goes wrong, and how to keep it honest.
Famous posters belong to their artists and museums. Draw your own motifs.
Too many vines make text hard to find. Keep ornament at the edges.
Nouveau display fonts are for titles only.
Generic flower clip art looks cheap. Stylise simple curves instead.