Squiggles and zigzags
Hand-drawn wavy lines and sharp zigzags scatter across surfaces as pure decoration.
Loud, silly and proud of it. Memphis mixes squiggles, confetti, terrazzo speckles and clashing pastels into objects and pages that refuse to be serious.
Open the kit Copy promptMemphis Design began as a furniture collective in Milan that rejected good taste. Its shapes and patterns became a graphic language of fun.
Hand-drawn wavy lines and sharp zigzags scatter across surfaces as pure decoration.
Speckled patterns of colourful chips imitate cheap laminate and stone.
Pink, teal, yellow and cobalt sit side by side with black outlines.
Cylinders, cones and spheres combine like building blocks.
Memphis lasted only a few years as a group, but its look keeps coming back.
Designers meet at Ettore Sottsass's flat in Milan, and a Bob Dylan song about the Memphis blues gives the group its name.
Memphis presents its furniture in Milan, including bookcases that look more like totems than shelves.
The collective breaks up after a short, famous run.
The squiggles and pastels spread into television graphics, school supplies and fashion.
Brands and illustrators revive the shapes for social media graphics and websites.
Memphis motion bops. Shapes bounce and tilt with an exaggerated overshoot, like toys on a spring.
These three mockups are built only from the kit on this page. Swap the tokens and they change style with it.
Toy stores and learning apps use the shapes to feel playful.
Cafés and snack brands use terrazzo and squiggles for fun packaging.
Festivals and pop-ups borrow the look for energetic posters.
The tokens every component on this page is built from. Copy them as a starting point, then adjust with intent.
Four candy colours, always outlined in black, on white with scattered confetti. Tap a swatch to copy its hex value.
:root{
--pink: #FF9EC7;
--teal: #3CC6C0;
--yellow: #FFD23F;
--cobalt: #2D5BFF;
--black: #111111;
--white: #FFFFFF;
}A chunky display face for headlines and a round, 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: "Dela Gothic One",Impact,sans-serif;
--font-b: "Lexend",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.05;
}
/* fonts: Dela Gothic One and Lexend */A simple grid underneath, with shapes scattered on top as if thrown onto the page.
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; }
}Thick black outlines and colourful offset shadows. Radius only where a shape is truly round.
:root {
--radius: 0px;
--radius-sm: 0px;
--bw: 3px;
--shadow: 8px 8px 0 #FF9EC7;
--shadow-sm: 4px 4px 0 #3CC6C0;
--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.
/* Memphis Design kit · Anti-Boring */
:root{
--bg:#FFFFFF;
--surface:#FFFFFF;
--surface2:#FFF1F7;
--fg:#111111;
--muted:#444444;
--accent:#2D5BFF;
--accent-fg:#FFFFFF;
--accent2:#FFD23F;
--accent2-fg:#111111;
--border:#111111;
--bw:3px;
--radius:0px;
--radius-sm:0px;
--shadow:8px 8px 0 #FF9EC7;
--shadow-sm:4px 4px 0 #3CC6C0;
--font-d:"Dela Gothic One",Impact,sans-serif;
--font-b:"Lexend",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.05;
--gap:24px;
--pad:24px;
--focus:#FFD23F;
--ok:#0E8A6B;
--warn:#9A5A00;
--danger:#D62D6B;
--info:#2D5BFF;
--field-bg:var(--surface);
--field-shadow:none;
--media:radial-gradient(circle,#111 2px,transparent 2.5px) 0 0/16px 16px,linear-gradient(135deg,#FF9EC7 50%,#3CC6C0 50%);
--code-bg:#111;
--code-fg:#FFD23F;
--btn-case:none;
--btn-track:0;
--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{box-shadow:5px 5px 0 #111}
.btn:hover{transform:rotate(-3deg)}
.btn:active{transform:translate(4px,4px);box-shadow:none}
.btn-2{box-shadow:5px 5px 0 #FF9EC7}
.card{background-image:radial-gradient(#111 1.2px,transparent 1.5px);background-size:0 0}
.card:nth-child(3n+1){box-shadow:8px 8px 0 #FF9EC7}.card:nth-child(3n+2){box-shadow:8px 8px 0 #3CC6C0}.card:nth-child(3n){box-shadow:8px 8px 0 #FFD23F}
.badge{border-radius:50%;padding:.9em .7em;background:#FF9EC7;color:#111;transform:rotate(10deg)}
.alert{box-shadow:5px 5px 0 var(--c);border-left-width:3px}
.progress{height:1.1em;border-radius:0}
.progress i{background:repeating-linear-gradient(45deg,#2D5BFF 0 8px,#FFD23F 8px 16px)}
.switch::before{background:#FF9EC7;border:2px solid #111}
.tab{font-family:var(--font-d);font-weight:400}
.tab[aria-selected="true"]{border-bottom:6px solid #FF9EC7}
.table th{background:#3CC6C0;color:#111;font-weight:400}
.table-wrap{box-shadow:8px 8px 0 #FFD23F}
/* dark theme: add class="alt" to <html> */
html.alt{
--bg:#14121A;
--surface:#1F1C28;
--surface2:#1A1722;
--fg:#FFFFFF;
--muted:#C9C4D6;
--border:#FFFFFF;
--code-bg:#000;
}
html.alt body{background-image:radial-gradient(#fff 1.3px,transparent 1.6px),radial-gradient(#FF9EC7 2px,transparent 2.5px)}html.alt .hero .lede{background:#1F1C28}html.alt .btn{box-shadow:5px 5px 0 #FF9EC7}html.alt .tl .yr{color:#FFD23F}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 playful design shop for kids' furniture in an authentic Memphis Design style.
Palette: Pink #FF9EC7, Teal #3CC6C0, Yellow #FFD23F, Cobalt #2D5BFF, Black #111111, White #FFFFFF.
Typography: Dela Gothic One for headlines, Lexend for body.
Layout: Two-column hero: stacked headline with one word on a tilted yellow sticker, an outlined text panel with a teal offset shadow, and a scatter of Memphis shapes on the right (a black squiggle, a terrazzo circle, a striped triangle, a teal cylinder, a zigzag).
Signature details: Pink #FF9EC7, teal #3CC6C0, yellow #FFD23F, cobalt #2D5BFF with 3px black outlines, coloured offset shadows, confetti dots on a white page.
Components: Outlined buttons with black offset shadows that tilt on hover, cards with rotating pink, teal and yellow shadows, round tilted badges, striped progress bars.
Motion: Bouncy overshoot on a few shapes, a slowly spinning striped triangle.
Avoid: text on patterns, gradients (except cylinder shading), thin lines, beige, copies of famous furniture.
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.
Patterns behind paragraphs make reading hard. Put text on solid panels.
Motion on every shape feels chaotic. Animate a few hero shapes only.
Memphis still needs clear hierarchy. Keep one main action obvious.
Famous Memphis pieces belong to their designers. Invent your own shapes.