# 15 · Playful Memphis — Design System

> A bright, primary-colored geometric one-pager — squiggles, dots, zigzags, thick black outlines and hard offset shadows — a Memphis-design revival (the 1980s Memphis Group / Milton Glaser pop energy translated to a motion designer's portfolio). Loud and joyful.
> **All content is placeholder** — the persona "Theo Santos" and every project/skill/stat/link are samples; replace them with your own.

---

## 1. Website Goal
Present a motion designer, animator, or playful creative with maximum personality and fun. The primary outcome is to get visitors to watch the reel and reach out — with bouncy shapes and bold color signaling an energetic, memorable brand.

## 2. Target Audience
Motion designers, animators, illustrators, and playful creative studios/brands. Flatters vivid, character-forward work and anyone who wants a joyful, high-energy site that stands out.

## 3. Brand Personality
Bouncy, bold, joyful, friendly, energetic. Voice is upbeat and casual — lowercase kickers ("selected work", "the toolbox"), lots of movement metaphors ("move & bounce", "years bouncing").

## 4. Visual Direction
Warm cream background scattered with decorative Memphis shapes — rings, triangles, dot grids, rotated squares, zigzags — in bold primaries. Everything sits on white cards with thick black outlines, generous rounded corners, and hard black offset shadows. Headlines use a rounded geometric display face; buttons and pills are fully pill-shaped. Color-coded tiles and stats keep the palette loud, and reveals scale in with a springy overshoot.

## 5. Color System
Cream base with a full bright-primary palette.

| Token | Hex | Use |
|---|---|---|
| `--bg` | `#fdf3e7` | Page background, chips |
| `--card` | `#ffffff` | Card / tile fill |
| `--ink` | `#1a1a1a` | Text, 3px outlines, hard shadows |
| `--dim` | `#4a4741` | Body / secondary text |
| `--red` | `#ff5a5f` | Accent, tiles, buttons, stats |
| `--yellow` | `#ffcf3f` | Accent, badge, mail pill, tiles |
| `--blue` | `#3d6dff` | Accent, active toggle, CTA band, buttons |
| `--teal` | `#20c4b0` | Accent, kicker pill, zigzags |
| `--pink` | `#ff5aa8` | Accent, rings, tiles |
| `--purple` | `#8b5cf6` | Accent, dot grids |

Structural tokens: `--border:3px solid var(--ink)`, `--shadow:6px 6px 0 var(--ink)`, `--shadow-sm:4px 4px 0 var(--ink)`, `--r:20px`. **The palette is deliberately loud (6 primaries) — but always anchor with thick black outlines + cream so it reads designed, not chaotic.**

## 6. Typography
Rounded geometric display + a clean geometric sans.

| Role | Family | Notes |
|---|---|---|
| Display / headings | `--disp` "Fredoka", ui-sans-serif | Weights 500/600/700; rounded, friendly; nav, headings, buttons, chips, stats |
| Body | `--body` "DM Sans", ui-sans-serif | Weights 400/500/700; base `16.5px`, line-height `1.62` |

- Type scale (clamp): hero `clamp(48px,12vw,150px)`; section titles `clamp(32px,5.4vw,64px)`; card `h3` `clamp(19px,2.2vw,24px)`; stat number `clamp(42px,6vw,68px)`; CTA `h2` `clamp(32px,5.4vw,64px)`.
- Weights lean 600/700 for display headings; body 400/500.
- Signature type move: color-spot words inside the hero headline (`.red`/`.blue`), rotated pill kickers (`transform:rotate(-2deg)`), and everything friendly & rounded — no tight tracking.

## 7. Layout Principles
- Spacing base: `--pad:clamp(18px,4vw,52px)`; sections `padding:clamp(52px,8vw,110px) 0`.
- Container: `.wrap` `max-width:1140px`, centered.
- Grids: `.g3` `repeat(3,1fr)`, `.g2` `repeat(2,1fr)`, gap `clamp(16px,2.2vw,26px)`.
- Radius: generous & rounded — cards `--r:20px`, CTA band `28px`, pills/chips/buttons `999px`, icon badges `14px`.
- Elevation: hard offset shadows (`--shadow:6px 6px 0`, `--shadow-sm:4px 4px 0`, all in solid `--ink`) plus thick `3px` black outlines — no blur, no soft shadow. Decorative `.shape` elements are absolutely positioned at `z-index:0` behind content.

## 8. Homepage Sections
1. Sticky nav — `Theo.Santos` brand (red dot), pill links (yellow hover), EN/中文 toggle; thick black bottom border.
2. Playful hero — scattered Memphis shapes, availability badge, big headline with color-spot words, sub-line, two buttons, scroll cue (`100svh`).
3. `#work` — "Stuff that moves": 2-column color-filled reel tiles (4) + a 3-up colored stat row + template note.
4. `#about` — "A friendly animator": 3 color-coded Who/What/Why cards with icon badges.
5. `#skills` — "How I make it": 2 color cards (design/animation + sound/delivery) with tool chips.
6. `#contact` — blue CTA band with a decorative shape, yellow-pill mailto + social row.
7. Footer — copyright + template credit.

## 9. Component Style
- **Buttons:** `.btn` — pill (`999px`), `--border`, `--shadow-sm` growing to `7px 7px 0` and nudging `-2px,-2px` on hover; `.red`/`.blue` filled variants (white text).
- **Cards:** `.card` white, `--border`, `--r` radius, `--shadow`; colored icon badges (`.ico`, per-color background). `.tile` reel tiles have a color-filled `.top` + white `.info`; `.stat` cards show a color-coded number.
- **Nav:** sticky, opaque `--bg`, thick black bottom border; pill links fill yellow (with a 2px outline) on hover; active language fills blue.
- **Chips:** `.chip` pill, `2px solid var(--ink)`, `--bg` fill, Fredoka 500.
- **Forms:** none (contact is a mailto pill + link row).
- **Chat/AI surface:** none.
- **Bilingual EN/中文 toggle:** elements carry `data-en` / `data-zh` (and `data-en-ph`/`data-zh-ph`); an inline script swaps them via `innerHTML` (preserving `<span class="red/blue">`, `<br>`), sets `<html lang>`, and persists to `localStorage` key **`t15_lang`** (default `en`).

## 10. Motion / Animation
- Scroll reveals: `[data-rise]` start `opacity:0; translateY(24px) scale(.97)` → `.in`, IntersectionObserver threshold `.12`, guarded by `html.js`; stagger `data-d` → `.08/.16/.24s`, transition `.6s var(--ease)`.
- Ease: `--ease:cubic-bezier(.34,1.4,.5,1)` — a strong springy overshoot; reveals "pop" in and buttons bounce on hover.
- Hover: buttons/pills lift with a growing hard shadow; nav pills fill yellow; CTA social links underline.
- `prefers-reduced-motion: reduce` disables reveals, scale, and smooth scroll.

## 11. Responsive Design
- `max-width:820px` — `.g3` grids drop to 2 columns.
- `max-width:680px` — nav links hide (brand + toggle remain).
- `max-width:540px` — `.g3` and `.g2` collapse to a single column.

## 12. Things to Avoid
- Don't go quiet or muted — the loud primaries and playful energy are the point.
- Don't drop the thick black outlines or hard offset shadows — without them the color reads chaotic instead of designed.
- No blur, soft shadows, or subtle gradients; keep edges hard and shapes flat.
- Don't remove the decorative Memphis shapes, but keep them behind content (`z-index:0`) so text stays legible.
- Avoid tight, corporate typography — the rounded Fredoka display and pill shapes are the identity.