# 02 · Bento Bright — Design System

> Modular "bento box" personal site — light, rounded, softly shadowed cards of varying sizes with one electric-indigo accent. Trend: the 2026 bento-grid default of Apple/Google/Spotify keynotes and YC launch pages.
> **All content is placeholder** — the persona "Devon Park" and every stat/project/post are samples; replace them with your own.

---

## 1. Website Goal
A scannable "at-a-glance" homepage where many messages live on one screen. It's built to communicate breadth quickly — stats, stack, current work, and featured projects all visible without scrolling far — and optimizes for a confident, tech-optimistic first impression that reads as "clean, not cold."

## 2. Target Audience
Product designers, front-end / full-stack developers, PMs, and multidisciplinary makers. It flatters people with several parallel signals (metrics, tools, shipped projects) that benefit from a modular grid rather than a linear narrative.

## 3. Brand Personality
Fresh, confident, tech-optimistic, clean, modern. Voice is direct and product-minded — plainspoken about outcomes ("cut time-to-invoice by 62%") without hype or jargon.

## 4. Visual Direction
A responsive bento grid of differently-sized white cards, punctuated by a few colour tiles (indigo / mint / amber / dark) for rhythm. Rounded 22px corners, soft two-layer shadows, and geometric-grotesque display type. This is the one template in the library that deliberately embraces the rounded-card + soft-shadow look; the accent is a single electric indigo, never a purple→pink gradient.

## 5. Color System
White cards dominate; colour tiles are used sparingly for emphasis, and one accent hue does the heavy lifting.

| Token | Hex | Use |
|---|---|---|
| `--bg` | `#eef0f4` | cool off-white page |
| `--card` | `#ffffff` | default tile |
| `--ink` | `#14161c` | primary text |
| `--ink-2` | `#565b66` | secondary text |
| `--faint` | `#8a909c` | labels / meta |
| `--line` | `#e4e7ec` | borders / inputs |
| `--accent` | `#2f4bff` | electric indigo — CTAs, links, focus |
| `--accent-ink` | `#1b2ecc` | accent hover |
| `--tile-indigo` | `#2f4bff` | indigo tile fill |
| `--tile-mint` / `--tile-mint-ink` | `#d8f3e6` / `#0f7a52` | soft mint tile |
| `--tile-amber` / `--tile-amber-ink` | `#ffe9c7` / `#a7691a` | soft amber tile |
| `--tile-ink` | `#16181d` | dark tile (featured / contrast) |

**Rule:** white cards carry the layout; the four colour tiles appear sparingly for rhythm. One accent hue only — deliberately **not** a purple→pink gradient.

## 6. Typography

| Role | Family | Notes |
|---|---|---|
| Display / headings / labels | **Space Grotesk** (`--disp`), system fallback | weights 400–700; tight tracking, used for all UI chrome |
| Body | **Inter** (`--body`), system fallback | weights 400–600 — body only, never the display face |

- Fluid `clamp()` scale: hero `h1` `clamp(30px, 4.4vw, 52px)` at `-0.03em`; tile `h3` `clamp(17px, 1.6vw, 20px)`; band `h2` `clamp(24px, 3.4vw, 40px)`.
- Body 16px / line-height 1.6.
- `.tile-label` and `.eyebrow`: 11–12px, weight 600, `letter-spacing: .12–.14em`, uppercase.
- Signature move: **stat numbers go big** — `.stat-num` at `clamp(34px, 5vw, 56px)`, weight 700, `-0.03em`, as the bento's headline gesture.

## 7. Layout Principles
- **Spacing** gutter `--pad: clamp(18px, 4vw, 40px)`; inter-tile `--gap: clamp(12px, 1.4vw, 18px)`.
- **Container** `.wrap` max-width `1200px`.
- **Grid** `.bento` = `repeat(4, 1fr)`, `grid-auto-rows: minmax(120px, auto)`; tiles span via `.c2` / `.c3` / `.c4` (columns) and `.r2` (rows).
- **Radius** `--radius: 22px` cards, `--radius-sm: 14px` inner (thumbs/inputs), `999px` pills (nav links, chips, lang toggle, buttons).
- **Elevation** soft two-layer `--shadow` (`0 1px 2px` + `0 10px 30px -12px`), rising to `--shadow-hover` and lifting `-3px` on hover.

## 8. Homepage Sections
1. **Nav** — sticky, translucent, blurred; brand with a rounded accent mark, pill links, EN/中文 toggle.
2. **Bento grid** — the homepage body, containing:
   - **Hero tile** (`c3 r2`) — avatar, eyebrow, headline, lede, CTAs.
   - **Stat tiles** — "Shipped 40+" (indigo) and "Experience 10yrs".
   - **Toolkit** (`c2`) — chip stack of tools.
   - **Now** (mint) — current work.
   - **Featured project** (`c2 r2`, dark) — the flagship case study.
   - **Two project tiles** — smaller works (one amber).
   - **Elsewhere** (`c2`) — social chip links.
   - **AI teaser** — link to the Ask AI page.
3. **Footer** — indigo full-width (`c4`) CTA tile with social links, plus the template note.

## 9. Component Style
- **Buttons** — pill (`999px`); default is white card with `--line` border lifting `-1px` on hover; `.btn.solid` is accent-filled, hovering to `--accent-ink`; arrow nudges right.
- **Cards / tiles** — `.tile` rounded 22px with soft shadow; colour variants `.indigo` / `.mint` / `.amber` / `.dark`; `a.tile` and `.hoverable` lift on hover.
- **Nav** — sticky, `backdrop-filter: blur(10px)`, pill links (hover = card fill, current = ink fill).
- **Forms** — `--bg`-filled inputs with `--line` border and `--radius-sm`; focus adds accent border + a 3px `rgba(47,75,255,.14)` focus ring.
- **Chips** — pill, `--bg` fill, `--line` border; invert to translucent white inside dark/indigo tiles.
- **Chat / AI surface** — a `.chat` tile with a header status dot (`#16c784` with soft glow), rounded 16px bubbles; `.msg.user` is accent-filled with a clipped bottom-right corner, `.msg.ai` clips bottom-left; composer input is a pill.
- **Bilingual EN/中文 toggle** — elements with both `data-en` and `data-zh` are swapped by `app.js` (`applyLang`, via `innerHTML`); inputs use `data-en-ph` / `data-zh-ph`. Default English; choice persists in `localStorage` under key **`bento_lang`**; proper nouns carry no `data-*`.

## 10. Motion / Animation
- Scroll reveals: `[data-rise]` starts faded + 16px down and settles via `.in`, 0.6s on `--ease` `cubic-bezier(.22,.61,.36,1)`; a small stagger is driven by `data-d="1|2|3"` (0.05 / 0.1 / 0.15s delays).
- Hover: tiles lift `-3px` to `--shadow-hover`; buttons lift `-1px`; arrows translate `3px`.
- Guarded by `html.js` so content stays visible without JS. `@media (prefers-reduced-motion: reduce)` disables the rises.

## 11. Responsive Design
- **≤ 900px** — `.bento` collapses to 2 columns; `.c3` / `.c4` clamp to span 2.
- **≤ 680px** — nav wraps; links drop to a full-width row under the brand.
- **≤ 560px** — `.bento` becomes a single column; `.c2` / `.c3` / `.c4` span 1 and `.r2` collapses to a single row.

## 12. Things to Avoid
- Don't make every tile the same size — varied spans (hero biggest, side projects small) are the whole point of a bento.
- No second accent hue and no purple→pink gradients.
- Don't drop below a 44px touch target on mobile.
- Don't strip the rounded corners or soft shadows — unlike the other templates, this aesthetic depends on them.