Memphis Design

---
name: memphis-design
description: Apply the Memphis Design visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Memphis Design, mentions memphis group, memphis style, 80s postmodern, or describes squiggles and zigzags, confetti geometric shapes, clashing candy palette — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Memphis Design Design System

1980s Milan postmodernism on the web: clashing candy colors, black outlines, squiggles, zigzags, confetti dots, and geometric shapes scattered with joyful irreverence over clean backgrounds. Anti-minimalism with rigorous execution.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values are representative interpretations of the aesthetic, not an official spec. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Memphis Design.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (memphis group, memphis style, 80s postmodern, squiggle design), or describes its traits: squiggles and zigzags; confetti geometric shapes; clashing candy palette; thick black outlines; playful pattern fills.

## Design tokens

### Color palette

- Warm off-white canvas: `#fffbf0` (--color-bg)
- Content panels: `#ffffff` (--color-surface)
- Primary text, black ink: `#111111` (--color-text)
- Bubblegum pink: `#ff5d8f` (--color-accent)
- Teal: `#2ec4b6` (--color-accent-teal)
- Sunshine yellow: `#ffd166` (--color-accent-yellow)
- Grape purple: `#7b2cbf` (--color-accent-purple)
- Black outlines on shapes and components: `#111111` (--color-border)

### Typography

- Display / headings: Baloo 2 (fallback: Arial Rounded MT Bold, sans-serif)
- Body: Nunito Sans (fallback: Helvetica, sans-serif)
- Type scale: 1.333 ratio, base 16px — computed steps: 16px / 21px / 28px / 38px / 51px / 67px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 800, line-height 1.1, letter-spacing 0
- Body: line-height 1.6, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 8, 16, 24, 32, 48, 64, 96 — Content stays orderly and spacious; the chaos lives in the ornament layer floating between sections.
- Border radius: sm 8px, lg 24px, pill 999px, blob 40% 60% 55% 45% / 50% 45% 55% 50% — Mixed on purpose: sharp rectangles, pills, and organic blobs coexist.
- Border treatment: 3px solid #111111 — Chunky black outlines on cards, buttons, and every decorative shape.

### Shadows

- offset: `6px 6px 0 #111111` — Cards and CTAs — hard cartoon offset
- offset-color: `6px 6px 0 #2ec4b6` — Alternate offset in teal for variety

### Layout

- Max content width: 1200px
- Ordered underlying grid with a free-floating ornament layer above/behind it
- Section backgrounds occasionally switch to a pattern fill (dots, zigzag) in two colors
- Shapes overlap section edges and peek from viewport edges

### Effects

- SVG squiggle/zigzag/dot ornaments scattered with slight rotations
- Pattern fills: polka dots, diagonal stripes, grid paper
- Marquee text strips between sections
- Slight rotation (-3 to 3deg) on cards and images

### Motion

- Easing: cubic-bezier(0.68, -0.55, 0.265, 1.55); durations 150ms / 300ms / 500ms
- Ornaments gently bob or rotate on loop (slow, subtle)
- Hover wiggles interactive elements ±2deg with the bouncy easing
- Entrances pop with a small overshoot

## CSS variables (drop-in)

```css
:root {
  --color-bg: #fffbf0;
  --color-surface: #ffffff;
  --color-text: #111111;
  --color-accent: #ff5d8f;
  --color-accent-teal: #2ec4b6;
  --color-accent-yellow: #ffd166;
  --color-accent-purple: #7b2cbf;
  --color-border: #111111;
  --radius-sm: 8px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --radius-blob: 40% 60% 55% 45% / 50% 45% 55% 50%;
  --shadow-offset: 6px 6px 0 #111111;
  --shadow-offset-color: 6px 6px 0 #2ec4b6;
  --border-default: 3px solid #111111;
  --font-display: "Baloo 2", "Arial Rounded MT Bold", sans-serif;
  --font-body: "Nunito Sans", Helvetica, sans-serif;
  --text-base: 16px;
  --leading-heading: 1.1;
  --leading-body: 1.6;
  --tracking-heading: 0;
  --tracking-body: 0;
  --ease: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 500ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@700;800&family=Nunito+Sans:wght@400;700&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** White bar, 3px black bottom border, logo in Baloo, links as black text turning into colored pill highlights on hover
- **Hero:** Big Baloo headline with one word on a colored highlight shape, ornament confetti scattered around, offset-shadow CTA
- **Card:** White, 3px black border, hard offset shadow, 24px radius or sharp (alternate per card), colored header shape
- **Button (primary):** Candy accent fill, black text, 3px black border, pill, hard offset shadow, wiggles on hover
- **Button (secondary):** White fill, same border/shadow, black text
- **Form fields:** White, 3px black border, 12px radius; focus swaps border to an accent color

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

Scattered geometric ornaments — squiggles, zigzags, dots, semicircles in clashing candy colors with 3px black outlines — floating around content like confetti frozen mid-air. Spend boldness here; keep everything else quiet.

## Do

- Keep content on an orderly grid and confine chaos to the ornament layer
- Use at least three clashing accents per view — restraint reads as a different style
- Outline every shape and component in black
- Mix pattern fills (dots, zigzags) into at least one section background

## Don't

- No gradients or soft shadows — fills are flat, shadows are hard offsets
- Don't let ornaments overlap text or interactive targets
- Don't use corporate blues/grays; the palette is candy or nothing
- Never animate the whole ornament field at once — pick 2–3 pieces

## Accessibility notes

- Black text passes everywhere, but black on grape purple #7b2cbf is ≈3.9:1 — use white text on purple fills
- Yellow #ffd166 fills need black text (white fails badly)
- Ornament layer must be aria-hidden and pointer-events: none
- Bobbing/wiggle animations must respect prefers-reduced-motion

## Reference sites

- Memphis Group history: https://aesthetics.fandom.com/wiki/Memphis_Design
- Memphis Milano: https://www.memphis-milano.com
- Figma community Memphis kits: https://www.figma.com/community

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip memphis-design.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/memphis-design.json

Settings → Capabilities → Skills → Upload skill → memphis-design.zip