# 06 · Warm Humanist — Design System

> A warm, "soft software" personal site — cream paper, terracotta accents, and floating blurred blobs, in the tradition of friendly indie-maker landing pages and hospitality-brand warmth.
> **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
Present a maker/engineer as approachable, kind, and human rather than corporate or clinical. The page is a single warm scroll that greets the visitor, states a hospitable philosophy, shows selected work and experience, and lands on an invitation to get in touch — the primary outcome being a friendly first contact (email/links).

## 2. Target Audience
Independent makers, design engineers, and studios who want to feel welcoming and hand-crafted. It flatters people whose work is about care and craft — those who'd rather come across as a good collaborator than a polished agency.

## 3. Brand Personality
Warm, hospitable, gentle, soft, conversational, human. Voice is first-person and friendly — a hand-wave greeting and "nice to meet you" phrasing are on-brand; never cold, techy, or salesy.

## 4. Visual Direction
Cream background with three slow-floating, blurred colour blobs behind a centered serif headline. Fully rounded shapes everywhere (pills, blobs, big card radii), a dominant terracotta accent carried by italic serif words, and soft warm-brown shadows on hover. The signature move is an italic terracotta `<em>` phrase inside each serif heading.

## 5. Color System
Intentionally cream + terracotta — this template *is* the warm-humanist look, so the palette that other templates avoid as cliché is correct here.

| Token | Hex | Use |
|---|---|---|
| `--cream` | `#faf3e7` | page background, lang toggle base |
| `--cream-2` | `#f2e7d3` | card icon chips, portrait gradient base |
| `--brown` | `#3d2b1f` | primary text, contact block background |
| `--terra` | `#c96444` | primary accent — italic words, wave greeting, hover states, section labels |
| `--sage` | `#8a9a6b` | secondary accent — "Open to work" pill, org labels |
| `--gold` | `#e0a458` | tertiary accent — hero blob, contact-block label/links |
| `--muted` | `#8f7b64` | secondary text |
| `--line` | `#e3d5bd` | hairline borders |

Effectively 3 accents max: terra dominant, sage + gold supporting in fixed small roles (pill / links). Don't treat them as interchangeable, and don't lend this cream+terracotta combo to other templates.

## 6. Typography

| Role | Family | Notes |
|---|---|---|
| Display / headings | **Spectral** (serif, italic axis loaded) | weight 400–600; italic `<em>` in terra is the signature |
| Body / UI / labels | **Karla** (sans) | weight 300–600 |

- Hero `h1` `clamp(2.8rem, 9vw, 7rem)`, weight 500, line-height `1.02`, letter-spacing `-.01em`.
- Lead `clamp(1.05rem, 2vw, 1.3rem)`; about/contact headings `clamp(1.7rem, 4vw, 3rem)` / `clamp(2.2rem, 7vw, 5rem)`.
- Section labels: uppercase, letter-spacing `.1em`, terra, prefixed with a `✦` character.
- No condensed or mono type anywhere — the voice is round and soft, type included.

## 7. Layout Principles
- Sections `max-width:1120px`, centered, padding `clamp(60px,9vh,120px) clamp(24px,5vw,64px)`; body `line-height:1.65`.
- Radius is large and consistent: `100px` pills (nav, buttons, tags), `24–28px` cards/portrait, `40px` contact block, `14px` icon chips.
- Grids: about `1fr` → `1.5fr 1fr` at ≥820px; work cards `auto-fit minmax(260px,1fr)`; experience rows `160px 1fr auto` at ≥680px.
- Elevation is soft warm shadow only (`0 24px 40px -22px rgba(61,43,31,.35)` on hover) over `1px var(--line)` hairlines — never hard/black shadows.

## 8. Homepage Sections
1. **Nav** — fixed floating blurred pill: serif brand left; sage "✿ Open to work" pill + EN·中文 toggle right.
2. **Hero** (`#top`) — three floating blobs behind a wave-emoji greeting, serif headline with italic terra phrase, lead, two pill buttons, bobbing scroll cue.
3. **About** — two-column: statement headline with italic terra word + rounded gradient "[ portrait ]" placeholder.
4. **Selected Work** — auto-fit rounded cards, each with emoji icon chip, title, description, terra year label.
5. **Experience** — `.xp-row` list: year / role / sage org label.
6. **Contact** — rounded dark-brown block: gold label, serif headline with italic gold phrase, cream pill CTA, gold link row.
7. **Footer** — centered, muted, single line.

## 9. Component Style
- **Buttons** — `100px` pills: primary `.btn-p` brown→terra on hover with translateY lift; secondary `.btn-s` outlined, fills brown on hover.
- **Cards** — cream with `1px var(--line)`, `24px` radius, icon chip + title + muted copy + terra year; hover lifts `-6px`, gold border, soft brown shadow.
- **Nav** — floating pill, `backdrop-filter: blur(12px)`, translucent cream fill.
- **Experience rows** — hairline-divided grid, sage org labels.
- **Bilingual EN/中文 toggle** — `data-en`/`data-zh` on every string, swapped via `apply(lang)` (sets `innerHTML`, also `data-en-ph`/`data-zh-ph` placeholders), buttons reflect `aria-pressed`; persisted in localStorage under **`sp06_lang`**; `<html lang>` becomes `zh-Hant` for Chinese.

## 10. Motion / Animation
- Three blurred `.blob` shapes float via `@keyframes float` (`14s ease-in-out infinite`, staggered `-5s`/`-9s` delays).
- `.reveal` → `.in`: fade + translateY(26px), `0.9s cubic-bezier(.2,.7,.2,1)`, staggered by `(i % 4) * 85ms`, triggered by IntersectionObserver (threshold `0.14`).
- Scroll-cue arrow bobs (`@keyframes bob`, `1.8s`); buttons/cards lift + shift on hover.
- `prefers-reduced-motion: reduce` disables reveals, blob float, and scroll-cue bob.

## 11. Responsive Design
- `@media(min-width:820px)` — about grid becomes `1.5fr 1fr` with `64px` gap (single column below).
- `@media(min-width:680px)` — experience rows become `160px 1fr auto` (stacked below).
- Work cards reflow automatically via `auto-fit minmax(260px,1fr)`; type and spacing fluidly scale through `clamp()`; blobs sized in `vw` with `max-width/height` caps.

## 12. Things to Avoid
- Don't sharpen any corner — pills and blobs stay fully rounded.
- Don't switch to a dark default background or add monospace/terminal styling.
- Don't promote sage or gold to primary, or blend accents into gradients.
- Don't use hard black shadows; keep hover shadows warm brown.
- Don't reuse this cream+terracotta palette for other templates — it's reserved for this one.

---

## Rebuild prompt (copy-paste)

> Build a single-page personal site in one self-contained HTML file (inline CSS + JS, no build step). Aesthetic: warm humanist "soft software" — a friendly, hospitable, hand-crafted feel, not corporate or clinical. Cream background `#faf3e7` with a `#f2e7d3` secondary cream, warm brown `#3d2b1f` for text and the contact block, a dominant terracotta accent `#c96444` for italic words/greetings/hover states, sage `#8a9a6b` as a secondary accent for a small availability pill and org labels, and gold `#e0a458` as a tertiary accent for a hero blob and contact-block links — this cream+terracotta combination is intentional for this template. Typography: Spectral (serif, italic axis loaded) for all headings with italic accent phrases in terracotta, Karla (sans) for body/UI — no monospace or condensed type anywhere. Round every corner generously: 100px pill nav/buttons/tags, 24–28px cards and a gradient "portrait" placeholder, 40px contact block; use only soft warm-brown shadows on hover, never hard black shadows. Structure: a fixed floating pill nav (brand + a sage "open to work" pill + EN/中文 toggle) over a hero with three slow-floating blurred colour blobs behind a centered wave-emoji greeting, a serif headline with one italic terracotta phrase, a lead paragraph, two pill buttons, and a bobbing scroll arrow; a two-column About section (statement with italic accent word + a rounded gradient portrait placeholder); a Selected Work section of rounded cards with an emoji icon chip, title, description, and a terracotta year label; an Experience section of rows with year, role, and a sage org label; and a rounded dark-brown Contact block with a gold label, a serif headline with an italic gold phrase, a cream pill CTA, and a gold link row, ending in a centered muted footer. Add scroll-triggered fade+rise reveals via IntersectionObserver, respecting prefers-reduced-motion (also disable blob float and scroll-cue bob in that mode). Add a bilingual EN/中文 toggle using data-en/data-zh attributes on every string, persisted to localStorage under the key `sp06_lang`, switching `<html lang>` to `zh-Hant` when Chinese is active. Replace all placeholder persona and project content with: [USER DETAILS].