Pattern on pattern
Stripes, checks, dots and florals sit side by side. Scale changes keep them from blending into mud.
Maximalism celebrates excess. Clashing patterns, saturated color, layered objects and loud type share one page, held together by confident choices instead of restraint.
Open the kit Copy promptMaximalism answers years of minimal sameness with abundance. It layers pattern, color and ornament until the page feels like a room full of treasures.
Stripes, checks, dots and florals sit side by side. Scale changes keep them from blending into mud.
Pink next to orange next to cobalt. Colors fight, and a dark ink line holds the peace.
Shapes overlap, rotate and spill out of their frames. Depth comes from stacking.
A fat serif, a chunky display face and a friendly sans work together, each at full volume.
Every era of restraint has been followed by an era of excess. Maximalism is the latest swing of that pendulum.
European art and architecture embrace ornament, gold, drama and movement as expressions of power and emotion.
Concert posters and album covers swirl with vibrating color and lettering you have to decode.
Ettore Sottsass and designers in Milan launch the Memphis Group, mixing loud patterns, primary colors and odd shapes in furniture.
Alessandro Michele becomes creative director at Gucci and makes clashing prints and eclectic styling a luxury look.
Interiors, brands and websites embrace bright color and pattern as a reaction to years of beige minimalism.
Maximalist motion is joyful and busy. Stripes slide, shapes bounce and nothing stays still for long.
These three mockups are built only from the kit on this page. Swap the tokens and they change style with it.
Collections and campaigns use pattern and color clashes to feel expressive.
Restaurants, snacks and cafés use maximalism to feel generous and fun.
Events use layered collage to promise variety and energy.
The tokens every component on this page is built from. Copy them as a starting point, then adjust with intent.
Six saturated colors used together, with one deep ink for every outline and all text. Tap a swatch to copy its hex value.
:root{
--sunflower: #FFD23F;
--hot-pink: #FF3E8A;
--cobalt: #2941D6;
--tangerine: #FF7A1A;
--emerald: #16A36B;
--lilac: #E5DBFF;
--ink: #15102A;
}A fat display serif for headlines, a chunky display sans for buttons and labels, and a friendly 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: "Abril Fatface",Georgia,serif;
--font-b: "Rubik",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: 0;
text-transform: none;
line-height: 1;
}
/* fonts: Abril Fatface, Bungee and Rubik */Keep an underlying grid for content, then let decorative objects break out of it freely.
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; }
}Mixed radii, thick ink borders and double color shadows. Nothing is flat.
:root {
--radius: 18px;
--radius-sm: 12px;
--bw: 3px;
--shadow: 6px 6px 0 #FF3E8A, 12px 12px 0 #2941D6;
--shadow-sm: 4px 4px 0 #15102A;
--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.
/* Maximalism kit · Anti-Boring */
:root{
--bg:#FFD23F;
--surface:#FFF6E0;
--surface2:#FF3E8A;
--fg:#15102A;
--muted:#3F355E;
--accent:#2941D6;
--accent-fg:#FFFFFF;
--accent2:#FF7A1A;
--accent2-fg:#15102A;
--border:#15102A;
--bw:3px;
--radius:18px;
--radius-sm:12px;
--shadow:6px 6px 0 #FF3E8A, 12px 12px 0 #2941D6;
--shadow-sm:4px 4px 0 #15102A;
--font-d:"Abril Fatface",Georgia,serif;
--font-b:"Rubik",system-ui,sans-serif;
--font-m:ui-monospace,Menlo,monospace;
--h-weight:400;
--h-track:0;
--h-case:none;
--h-style:normal;
--h-lh:1;
--gap:24px;
--pad:24px;
--focus:#16A36B;
--ok:#0E7A4E;
--warn:#9A4A00;
--danger:#C0103E;
--info:#2941D6;
--field-bg:var(--surface);
--field-shadow:none;
--media:repeating-conic-gradient(#FF3E8A 0 25%,#FFD23F 0 50%) 0 0/28px 28px;
--code-bg:#15102A;
--code-fg:#FFD23F;
--btn-case:none;
--btn-track:0;
--btn-weight:800;
--badge-radius:50%;
--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{font-family:"Bungee",sans-serif;font-weight:400;border-radius:999px;box-shadow:4px 4px 0 #FF3E8A,8px 8px 0 #15102A}
.btn:hover{transform:rotate(-2deg) scale(1.03)}
.btn:active{transform:translate(4px,4px);box-shadow:0 0 0 #15102A}
.btn-2{box-shadow:4px 4px 0 #2941D6,8px 8px 0 #15102A}
.btn-ghost{box-shadow:none;background:repeating-linear-gradient(45deg,#FFF6E0 0 8px,#FFE59A 8px 16px)}
.card{background:#FFF6E0}
.card:nth-child(3n+2){--rot:1.5deg;background:#C8F0DD}
.card:nth-child(3n){background:#E5DBFF}
.card{transform:rotate(var(--rot,-1deg))}
.card-media{border:3px solid var(--border)}
.badge{font-family:"Bungee",sans-serif;font-weight:400;padding:.9em .8em;transform:rotate(-12deg);background:#16A36B;color:#fff;box-shadow:3px 3px 0 #15102A}
.label{font-family:"Bungee",sans-serif;font-weight:400;font-size:.8rem}
.input,.select,.textarea{box-shadow:4px 4px 0 #2941D6}
.input:focus,.select:focus,.textarea:focus{box-shadow:4px 4px 0 #FF3E8A,0 0 0 3px #16A36B}
.alert{box-shadow:4px 4px 0 #15102A;background:#FFF6E0;border-left-width:14px}
.progress i{background:repeating-linear-gradient(-45deg,#2941D6 0 10px,#FF3E8A 10px 20px)}
.tab{font-family:"Bungee",sans-serif;font-weight:400;color:var(--fg);border:3px solid transparent;border-radius:12px 12px 0 0}
.tab[aria-selected="true"]{background:#FF3E8A;border-color:var(--border);border-bottom-color:transparent}
.pager a{box-shadow:3px 3px 0 #15102A;border-radius:50%}
.table-wrap{box-shadow:6px 6px 0 #FF3E8A}
.table th{font-family:"Bungee",sans-serif;font-weight:400;background:#2941D6;color:#fff}
.switch::before{background:#FFD23F;border:2px solid #15102A}
/* dark theme: add class="alt" to <html> */
html.alt{
--bg:#15102A;
--surface:#221A40;
--surface2:#1C1535;
--fg:#FFF6E0;
--muted:#D8CFF0;
--border:#FFF6E0;
--code-bg:#0A0718;
}
html.alt body{background-image:radial-gradient(#FFD23F 1.2px,transparent 1.5px)!important}html.alt .card,html.alt .demo,html.alt .hero .lede,html.alt .alert,html.alt .table-wrap{color:#15102A}html.alt .demo .card{color:#15102A}html.alt .docnav a:not(.brand){color:#FFF6E0}html.alt .label,html.alt .help{color:inherit}html.alt .sec.alt{background:#2941D6!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 late-night taco and cocktail bar in an authentic Maximalism style.
Palette: Sunflower #FFD23F, Hot pink #FF3E8A, Cobalt #2941D6, Tangerine #FF7A1A, Emerald #16A36B, Lilac #E5DBFF, Ink #15102A.
Typography: Abril Fatface for headlines in stacked multi-color lines, Bungee for buttons and labels, Rubik for body.
Layout: Hero with a three-line stacked headline (More / is / more) each in a different color and treatment, a text panel on cream with a double color shadow, and a collage of a rotating striped sun, a striped arch, a checkerboard and a squiggle on the right. Dotted yellow page background.
Signature details: Six saturated colors plus ink, 3px ink borders, double offset shadows in pink and cobalt, rotated cards and badges, pattern fills (stripes, checks, conic sunbursts).
Components: Chunky pill buttons with double shadows, inputs with cobalt offset shadow, round rotated sticker badges, striped progress bars, tabbed menus with loud active tabs.
Motion: Bouncy overshoot, sliding stripes, a slowly rotating sunburst. Always with a pause option.
Avoid: text directly on patterns, beige, thin hairlines, a single typeface, empty white space as the main device.
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.
If everything shouts, nothing is heard. Keep one clear focal point per screen.
Always place text on a calm solid panel, never directly on a pattern.
Many moving patterns can cause discomfort. Offer pause and respect reduced motion.
Maximalism still needs rules: a fixed palette, a pattern set and repeated shapes.