Memphis

# Memphis (Memphis Design)

You are building a frontend UI. Apply the **Memphis** visual style consistently to every screen and component. Treat the tokens and rules below as hard constraints, not suggestions.

## Essence

A postmodern style from the 1980s Memphis Group in Milan: clashing colors, black-and-white patterns (dots, stripes, squiggles), floating geometric fragments and slightly tilted compositions. It deliberately challenges modernist "good taste" and function-first thinking in pursuit of fun and feeling.

## Design tokens

### Colors

- `background` `#FFF8EC` — page background
- `surface` `#FFFFFF` — cards, panels and raised surfaces
- `text` `#1B1B1B` — primary text
- `muted` `#4A4A4A` — secondary text, captions, placeholders
- `accent` `#FF4F8B` — primary actions, links, key highlights
- `on-accent` `#1B1B1B` — text and icons placed on the accent color
- `border` `#1B1B1B` — dividers, outlines, input borders
- `highlight` `#FFCE1F` — secondary emphasis, badges, selection

### Typography

- Display / headings: `Bungee` (Google Fonts, weights 400) → fallback `"Arial Black", Impact, sans-serif`
- Body text: `Work Sans` (Google Fonts, weights 400 / 600) → fallback `system-ui, -apple-system, "Segoe UI", sans-serif`
- Type scale (px): 12 · 14 · 16 · 20 · 28 · 40 · 60

### Spacing & Shape

- Base unit: 8px · Spacing scale (px): 8 · 12 · 16 · 24 · 32 · 48 · 64
- Corner radius (sm / md / lg): 0 / 8 / 24 px
- Border: 3px solid
- Shadows (sm / md / lg): `3px 3px 0 #1B1B1B` / `6px 6px 0 #00B3A4` / `10px 10px 0 #FFCE1F`

### Motion

- Durations (fast / base): 150ms / 320ms
- Easing: `cubic-bezier(0.68, -0.55, 0.27, 1.55)`

### Signature effects

- `--memphis-teal`: `#00B3A4`
- `--memphis-lilac`: `#B79CFF`
- `--pattern-dots`: `radial-gradient(#1B1B1B 1.6px, transparent 1.8px) 0 0 / 14px 14px`
- `--pattern-stripes`: `repeating-linear-gradient(45deg, #1B1B1B 0 3px, transparent 3px 12px)`
- `--pattern-squiggle`: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='14'%3E%3Cpath d='M0 7 Q5 0 10 7 T20 7 T30 7 T40 7' fill='none' stroke='%231B1B1B' stroke-width='3'/%3E%3C/svg%3E") 0 50% / 40px 14px repeat-x`

## Do

- Layer black-and-white patterns over color blocks: dots, 45° stripes, squiggles.
- Combine clashing colors — pink #FF4F8B, yellow #FFCE1F, teal #00B3A4, lilac #B79CFF — unified by 3px near-black outlines.
- Rotate cards, tags and decorative shapes slightly (±2–4°).
- Use colored hard shadows (e.g. 6px 6px 0 #00B3A4).
- Scatter floating triangles, circles and squiggles around the content.

## Don't

- Do not use desaturated or monochrome palettes.
- Do not set body text directly on patterns.
- Do not use hairlines, minimalist whitespace or strict grid alignment.
- Do not use blurred shadows or glass effects.

## Components

- **Buttons**: Solid pink or yellow buttons with a 3px black outline and a colored hard shadow; they tilt slightly on hover, like a toy being flicked.
- **Cards**: Cards with black outlines and colored shadows, with a block of dots, stripes or squiggles at the top or in a corner; the whole card is slightly tilted.
- **Forms**: Black-outlined white inputs whose shadow turns teal on focus; errors use a yellow block with a squiggly underline.
- **Navigation**: Navigation links look like a row of colored tags; the current item is a patterned color block.
- **Layout**: Triangles, circles and squiggles float around the content, and section colors alternate from block to block.
- **Imagery & icons**: Flat geometric illustration and pattern collage instead of realistic photos; photos, when needed, get colorful geometric frames.

## Accessibility

- Never put patterns directly under text; use a solid background behind copy.
- Respect prefers-reduced-motion for tilt and wobble animations.
- Use near-black text on pink and yellow backgrounds for sufficient contrast.

_Generated by Style Museum._