Sunbursts and fans
Rays spreading from a point appear on doors, posters and ceilings.
The Anti-Boring presents
The glamour of the jazz age. Gold sunbursts, stepped towers, fans and bold geometry turned skyscrapers, cinemas and ocean liners into symbols of speed and luxury.
Open the kit Copy the promptArt Deco mixes machine-age geometry with luxury materials. It loves symmetry, repeated lines and gold on dark, rich colours.
Rays spreading from a point appear on doors, posters and ceilings.
Ziggurat-like steps, as in 1930s skyscraper tops, frame titles and cards.
Centred compositions with repeating parallel lines and chevrons.
Gold, black lacquer and deep emerald, like polished metal and marble.
Art Deco got its name decades after its heyday, from the exhibition that launched it.
The International Exhibition of Modern Decorative and Industrial Arts in Paris showcases the style and later gives it its name.
The Chrysler Building in New York opens with its stepped, sunburst crown.
Ocean liners like the Normandie carry Art Deco interiors across the Atlantic.
Historian Bevis Hillier's book popularises the term Art Deco.
Films and party themes revive the look, and it returns in hotel, bar and event branding.
Art Deco motion is ceremonial. A fan of golden rays opens like a curtain, and the title appears in the centre.
These three mockups are built only from the kit on this page. Swap the tokens and they change style with it.
Hospitality brands use gold and geometry to promise a night out.
Weddings and galas borrow sunbursts and stepped frames.
Product pages echo vintage labels with gold lines and symmetry.
The tokens every component on this page is built from. Copy them as a starting point, then adjust with intent.
Deep emerald and black lacquer, lit by metallic gold. Ivory keeps text readable. Tap a swatch to copy its hex value.
:root{
--emerald-night: #0E1F1B;
--lacquer-green: #13291F;
--gold: #D4AF37;
--antique-gold: #A8841F;
--jade: #1F6B57;
--ivory: #F3E9D2;
}A geometric display face with contrast for titles, a thin geometric face for elegant small caps, and a clean geometric sans for reading.
Body text carries the explanation. Keep lines under about 75 characters so the eye can find the next line.
:root{
--font-d: "Limelight",Georgia,serif;
--font-b: "Josefin Sans",system-ui,sans-serif;
--font-m: ui-monospace,Menlo,monospace;
--fs-d: clamp(49px, 9vw, 107px);
--fs-1: 48.6px; --fs-2: 37.3px;
--fs-3: 28.7px; --fs-4: 22.1px;
--fs-body: 17px; --fs-sm: 13.1px;
}
h1,h2,h3,h4 {
font-family: var(--font-d);
font-weight: 400;
letter-spacing: .06em;
text-transform: uppercase;
line-height: 1.05;
}
/* fonts: Limelight, Poiret One and Josefin Sans */Symmetrical and centred. Arches, frames and stepped borders organise the space.
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; }
}No radius on panels, but arches crown hero frames. Double gold frames replace shadows.
:root {
--radius: 0px;
--radius-sm: 0px;
--bw: 1px;
--shadow: 0 0 0 4px #0E1F1B, 0 0 0 5px rgba(212,175,55,.6);
--shadow-sm: 0 0 0 3px #0E1F1B, 0 0 0 4px rgba(212,175,55,.5);
--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 Deco kit · Anti-Boring */
:root{
--bg:#0E1F1B;
--surface:#13291F;
--surface2:#0B1815;
--fg:#F3E9D2;
--muted:#CBBF9F;
--accent:#D4AF37;
--accent-fg:#0E1F1B;
--accent2:#1F6B57;
--accent2-fg:#F3E9D2;
--border:#D4AF37;
--bw:1px;
--radius:0px;
--radius-sm:0px;
--shadow:0 0 0 4px #0E1F1B, 0 0 0 5px rgba(212,175,55,.6);
--shadow-sm:0 0 0 3px #0E1F1B, 0 0 0 4px rgba(212,175,55,.5);
--font-d:"Limelight",Georgia,serif;
--font-b:"Josefin Sans",system-ui,sans-serif;
--font-m:ui-monospace,Menlo,monospace;
--h-weight:400;
--h-track:.06em;
--h-case:uppercase;
--h-style:normal;
--h-lh:1.05;
--gap:24px;
--pad:24px;
--focus:rgba(212,175,55,.5);
--ok:#7FC8A9;
--warn:#E0B872;
--danger:#E07A6B;
--info:#D4AF37;
--field-bg:#0B1815;
--field-shadow:none;
--media:repeating-conic-gradient(from -90deg at 50% 100%,#D4AF37 0 4deg,#13291F 4deg 12deg);
--code-bg:#07100E;
--code-fg:#E8D7A5;
--btn-case:uppercase;
--btn-track:.2em;
--btn-weight:600;
--badge-radius:999px;
--maxw:1160px;
--fs-sm:13.1px;
--fs-body:17px;
--fs-4:22.1px;
--fs-3:28.7px;
--fs-2:37.3px;
--fs-1:48.6px;
--fs-d:clamp(49px, 9vw, 107px);
}
*,*::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{clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,12px 100%,0 50%);border:0;padding:1em 2.2em;background:linear-gradient(#F0D78C,#D4AF37 50%,#A8841F)}
.btn:hover{transform:none;filter:brightness(1.12)}
.btn-2{background:#1F6B57;color:#F3E9D2}
.btn-ghost{clip-path:none;border:1px solid #D4AF37;color:#D4AF37;background:transparent}
.card{text-align:center;padding-top:40px}
.card::before{content:"";position:absolute;top:12px;left:50%;width:60px;height:14px;transform:translateX(-50%);background:linear-gradient(90deg,transparent 0 20%,#D4AF37 20% 24%,transparent 24% 38%,#D4AF37 38% 62%,transparent 62% 76%,#D4AF37 76% 80%,transparent 80%)}
.card-media{border:1px solid #D4AF37}
.badge{border-radius:0;background:transparent;color:#D4AF37;border-color:#D4AF37;letter-spacing:.2em;text-transform:uppercase;font-weight:400}
.label{letter-spacing:.14em;text-transform:uppercase;font-size:.78rem;color:var(--muted)}
.input,.select,.textarea{border-color:rgba(212,175,55,.6)}
.select option{background:#0E1F1B}
.check:checked::after{border-color:#0E1F1B}.radio:checked::after{background:#0E1F1B}
.switch{background:#0B1815}.switch::before{background:#D4AF37}.switch:checked::before{background:#0E1F1B}
.alert{background:#0B1815;border-left:6px double #D4AF37}
.progress{border-radius:0;background:#0B1815}
.progress i{background:repeating-linear-gradient(90deg,#D4AF37 0 10px,#A8841F 10px 12px)}
.tab{letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.tab[aria-selected="true"]{color:#D4AF37;border-bottom-color:#D4AF37}
.pager a{border-radius:0;background:#0B1815}
.pager a[aria-current]{background:#D4AF37}
.table th{font-family:var(--font-d);letter-spacing:.1em;color:#D4AF37;font-weight:400}
/* light theme: add class="alt" to <html> */
html.alt{
--bg:#F3E9D2;
--surface:#FBF5E6;
--surface2:#EADDBE;
--fg:#0E1F1B;
--muted:#4A5A50;
--border:#A8841F;
--accent-fg:#0E1F1B;
--field-bg:#FFFDF6;
--code-bg:#0E1F1B;
}
html.alt .switch,html.alt .alert,html.alt .pager a,html.alt .progress{background:#FBF5E6}html.alt .select option{background:#fff}html.alt .tab{color:#4A5A50}html.alt .tab[aria-selected="true"],html.alt .table th,html.alt .tl .yr,html.alt .badge,html.alt .btn-ghost{color:#8A6A12}html.alt .arch{background:rgba(251,245,230,.92);box-shadow:0 0 0 8px #F3E9D2,0 0 0 9px #A8841F}html.alt .stage{background:#0E1F1B}html.alt body{background-image:repeating-linear-gradient(90deg,rgba(168,132,31,.08) 0 1px,transparent 1px 40px)!important}html.alt .demo{border-color:rgba(168,132,31,.4)!important}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 1920s-inspired cocktail bar and jazz club in an authentic Art Deco style.
Palette: Emerald night #0E1F1B, Lacquer green #13291F, Gold #D4AF37, Antique gold #A8841F, Jade #1F6B57, Ivory #F3E9D2.
Typography: Limelight for titles in uppercase with wide tracking, Poiret One for small caps, Josefin Sans for body.
Layout: Centred hero with a slowly rotating golden sunburst behind an arched panel with a stepped crown ornament, a small tracked line, a big gold-gradient title and two buttons.
Signature details: Deep emerald background, gold gradient text, double gold frames via box-shadow, repeating vertical pinstripes, chevron and stepped ornaments.
Components: Elongated hexagon gold buttons, outlined ghost buttons, centred cards with a stepped gold ornament on top, diamond-shaped pagination, double-line alerts.
Motion: A golden fan opening from the centre, slow sunburst rotation, symmetrical reveals.
Avoid: rounded corners, pastel colours, flat grey backgrounds, feathers and champagne clip art, thin fonts for 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.
Gold loses glamour when it covers every surface. Use it for lines and highlights.
Hairline deco fonts are for titles. Body text needs a sturdier sans.
Feathers and champagne clip art feel like a party supply shop. Let geometry carry the style.
Centred text over long reading areas tires the eye. Left-align longer paragraphs.