Memphis Pack

Bold flat colour, geometric surface patterns on every face, hard drop shadows, zigzag borders, and anti-functionalist ornament. Inspired by the Memphis Group (Milan, 1981–88).

Type	Full (theme + effects)
Theme CSS	`packs/memphis.theme.css`
Effects CSS	`packs/memphis.effects.css`
Effects JS	`packs/memphis.effects.js`
Fonts	Boogaloo (display), Outfit (body), Space Mono (mono) — ~70KB total

Loading

<link rel="stylesheet" href="/cdn/packs/memphis.theme.css">

<theme-picker></theme-picker>

What's Included

Pattern System

18 CSS custom properties for pure-CSS geometric patterns. The heart of Memphis design.

Stripes: --m-pat-stripe-y, -p, -b, -t, -vert (diagonal + vertical)
Polka dots: --m-pat-dots-y, -r, -b, -p, -sm, -lg
Checkerboard: --m-pat-check-sm, -md, -y, -p
Crosshatch: --m-pat-cross
Zigzag: --m-pat-zigzag-y, -b
Squiggle: --m-pat-squiggle-r, -b, -p, -bk (SVG data URIs)
Confetti: --m-pat-confetti (layered radial gradients)

Typography

Display: Boogaloo — geometric rounded boldness (single weight)
Body: Outfit (400, 700, 900) — clean geometric sans
Mono: Space Mono (400, 700) — typewriter/plotter aesthetic

Effects

Opt-in decorative CSS effects via data-effect attributes:

data-effect="memphis-zigzag" — 16px zigzag pattern band with borders
data-effect="memphis-dots" — 24px polka dot pattern band
data-effect="memphis-stripe" — 12px diagonal stripe band
data-effect="memphis-confetti" — confetti pattern overlay
data-effect="memphis-squiggle" — squiggle pattern background

Usage

<article style=" border: 2.5px solid var(--m-black); box-shadow: 6px 6px 0 var(--m-black); overflow: hidden; "> <header style=" height: 100px; background: var(--m-pat-check-y); border-block-end: 2.5px solid var(--m-black); "></header> <section style="padding: 1.5rem;"> <h3>Card Title</h3> <p>Card with checkerboard pattern face.</p> </section> </article>

Demo

View the full Memphis demo page with pattern swatches, typography, buttons, cards, alerts, forms, and decorative bands.