# 02 · Warm Dark Builder — Design System

> Warm near-black "builder" energy — a developer-tool landing page (Vercel / Linear / Raycast) crossed with a system-status HUD, lit by a single amber accent.
> **All content is placeholder** — the persona ("Jinyu Chen") and every project/link are samples; replace them with your own. Single self-contained HTML file (inline CSS + JS).

---

## 1. Website Goal
Signal "ships in production" confidence for a full-stack / infra engineer. The page opens with a metrics-backed hero and moves through project cards and experience rows to a mailto CTA. Primary outcome: convince a hiring manager or client to reach out.

## 2. Target Audience
Full-stack, platform, and infrastructure engineers — builders who want a product-y, tool-landing-page feel. It flatters people whose work is systems and shipping velocity, not visual portfolios.

## 3. Brand Personality
Confident, warm-technical, pragmatic, "online". Voice reads like a status line: terse, capable, faintly playful (`sys online · v2026.7`), never corporate-SaaS bland.

## 4. Visual Direction
Warm near-black canvas with a faint fixed dot-grid and a top-right amber radial glow. One amber accent does all the work: the status dot, links, a gradient hero word, tag pills, chips, and hover glows. Signature moves: rounded project cards with an amber wash on hover, mono HUD labels, and a gradient-text last line in the headline.

## 5. Color System
Warm near-black scale + one amber accent (plus a soft amber wash).

| Token | Hex / Value | Use |
|---|---|---|
| `--bg` | `#0d0c0b` | page background |
| `--bg-2` | `#17150f` | card gradient base |
| `--panel` | `#1b1813` | card gradient top |
| `--line` | `#2a2620` | borders, hairlines, dot-grid lines |
| `--bone` | `#efe9df` | primary text |
| `--dim` | `#8a8175` | secondary text, meta |
| `--amber` | `#f2a94e` | the one accent — dot, links, gradient text, hover borders |
| `--amber-soft` | `rgba(242,169,78,.12)` | tag/pill backgrounds, glow washes |

**Rule:** amber is the only saturated colour on screen — no second hue. Everything else is warm neutrals. (The hero gradient word blends `--amber → #ffd8a0`.)

## 6. Typography

| Role | Family | Notes |
|---|---|---|
| Display / headings / body | **Space Grotesk** | weight 400–700; hero gradient word `--amber → #ffd8a0` |
| Mono / HUD labels | **JetBrains Mono** | status pill, nav status, section index, chips, buttons, footer |

- Type scale (real `clamp()`): hero `h1` `clamp(2.8rem, 8vw, 6.6rem)` / weight 600 / letter-spacing `-0.03em`; lead `clamp(1rem, 1.7vw, 1.2rem)`; metrics number `clamp(1.6rem, 3vw, 2.2rem)`; section head `h2` `clamp(1.5rem, 3.4vw, 2.4rem)`; about copy `clamp(1.1rem, 2.4vw, 1.7rem)`; contact `h2` `clamp(2rem, 6vw, 4.4rem)`.
- Mono is reserved for system-label things (status text, `sec-head .idx`, chips, CTA buttons, footer) — never body prose.
- Signature type move: the amber-to-cream gradient fill on the final hero line.

## 7. Layout Principles
- Spacing base 8px; sections `padding: clamp(70px, 10vh, 130px) clamp(20px, 4vw, 48px)`, `max-width: 1180px` centered (hero shares the 1180px cap).
- Grid: `.cards` uses `repeat(auto-fit, minmax(280px, 1fr))` with 16px gap; `.xp-row` is `100px 1fr`.
- Radius: rounded throughout — 6px lang toggle, 8px buttons, 14px cards, 20px contact box, 100px tag pill.
- Elevation: amber-tinted glow on hover (`box-shadow: 0 10px 30px -8px var(--amber)`), plus a fixed low-opacity dot grid (`.grid-bg`, 64px cells, radial mask) and a blurred nav (`backdrop-filter: blur(10px)`).

## 8. Homepage Sections
1. **Nav** (fixed, blurred) — glowing dot + `jinyu.chen` brand left; "sys online · v2026.7" status + EN/中文 toggle right.
2. **Hero** — availability tag pill, 3-line headline with an amber-gradient last line, lead paragraph, primary + secondary CTAs, 3 metrics (Years / Disciplines / Stack depth), scroll cue over a dot-grid.
3. **About** (`01`) — one large statement paragraph with bolded amber keywords.
4. **Selected work** (`02`) — rounded project cards in an auto-fit grid: top meta row, title, description, tech-stack chips.
5. **Experience** (`03`) — `.xp-row` list: year column + role / org / description.
6. **Contact** (`04`) — rounded glow-backed box with headline, subtext, mailto CTA.
7. **Footer** — mono, split brand / template name.

## 9. Component Style
- **Buttons:** mono, rounded 8px; `.btn-p` amber fill (lifts + amber glow on hover), `.btn-s` bordered (border/text → amber on hover).
- **Cards:** `--panel → --bg-2` gradient, `--line` border, 14px radius; hover lifts `-4px`, border → `rgba(242,169,78,.4)`, and an amber radial `::before` fades in. Chips are mono, amber-bordered.
- **Nav:** blurred translucent bar with bottom hairline; status uses mono with amber `<b>`.
- **Tag pill:** amber-soft fill, amber text, 100px radius, small pulsing dot.
- **Bilingual EN/中文 toggle:** a small bordered pill pair in the nav (amber fill = active); every string carries `data-en` / `data-zh`, swapped via `apply(lang)` (sets `innerHTML`, `<html lang>` → `zh-Hant`, toggles `aria-pressed`), persisted in `localStorage` under **`sp02_lang`**; inputs use `data-en-ph` / `data-zh-ph`.

## 10. Motion / Animation
- Scroll reveals: `.reveal` (opacity 0 + `translateY(24px)`) → `.in` via `IntersectionObserver` (threshold `0.15`), transition `0.9s cubic-bezier(.2,.7,.2,1)`, staggered `(i % 4) * 80ms`.
- Hover: buttons translate up with amber glow; cards lift + reveal amber radial wash + brighten border.
- `@media (prefers-reduced-motion: reduce)` disables `.reveal` transforms.

## 11. Responsive Design
- `.cards` is intrinsically responsive via `auto-fit`/`minmax(280px, 1fr)` — cards reflow from multi-column to single-column as width shrinks (no explicit breakpoint).
- Fluid `clamp()` on type, section padding, hero padding, and metric gaps handles all sizes; flex rows (`cta-row`, `metrics`) wrap when cramped.
- Hero keeps `min-height: 100vh`; nav padding scales `18px clamp(20px, 4vw, 48px)`.

## 12. Things to Avoid
- No second accent hue; don't switch to a cool navy/SaaS-blue palette.
- No serif type; no glassmorphism/frosted panels (that's template 10); don't make the whole page monospace.
- Keep the background warm near-black, not cool black.
- Don't drop the amber glow on cards/buttons — flat hover states read as unfinished here.

---

## Rebuild prompt (copy-paste)

> Build a single-page personal site in one self-contained HTML file (inline CSS + JS, no build step). Aesthetic: warm near-black "builder" energy — like a developer-tool landing page crossed with a system status HUD. Background `#0d0c0b` with a `#17150f`/`#1b1813` panel gradient for cards, hairline borders `#2a2620`, primary text `#efe9df`, secondary text `#8a8175`, and a single amber accent `#f2a94e` (with a soft `rgba(242,169,78,.12)` wash) used for the status dot, links, gradient hero text, tag pills, and hover glows — no second accent colour. Typography: Space Grotesk for all display/heading/body text, JetBrains Mono strictly for HUD-style labels (status line, section index numbers, tech chips, footer) — never for prose. Structure: a fixed blurred nav with a glowing dot + brand, a "sys online" mono status, and an EN/中文 toggle; a full-viewport hero with an availability tag pill, a large headline whose final line is an amber-to-cream gradient, a lead paragraph, two CTA buttons, three metric stats, and a scroll cue, over a faint fixed dot-grid background; a numbered About section (single bold statement paragraph); a numbered Selected Work section of rounded (14px) project cards in an auto-fit grid with tech-stack chips and an amber glow on hover; a numbered Experience section of year-led rows; and a rounded, amber-glow Contact box with a large headline and a mailto CTA, ending in a mono footer. Add scroll-triggered fade+rise reveals via IntersectionObserver, staggered, respecting prefers-reduced-motion. Add a bilingual EN/中文 toggle using data-en/data-zh attributes on every string, persisted to localStorage under the key `sp02_lang`, switching `<html lang>` to `zh-Hant` when Chinese is active. Replace all placeholder persona and project content with: [USER DETAILS].