# 07 · Split Screen — Design System

> A fixed identity panel on the left with scrolling content on the right — the "half static / half scroll" layout seen across developer and designer personal sites. Ink panel, bone content, one coral accent.
> **All content is placeholder** — the persona and every project/post/link are samples; replace them with your own.

---

## 1. Website Goal
Present a résumé-style story where identity stays anchored while work scrolls. The sticky left panel holds name, role, in-page nav, and socials; the right column scrolls through about, selected work, experience, and contact. Primary outcome: a hire, contract, or intro conversation.

## 2. Target Audience
Engineers, designers, and PMs — anyone with a structured, CV-forward story who wants a calm, professional, content-first site.

## 3. Brand Personality
Reliable, precise, calm, senior, understated. Voice is plain-spoken and competent ("I turn messy systems into calm, well-tested software"), human as much as technical.

## 4. Visual Direction
A two-column split: a persistent dark ink panel (with a soft blurred coral glow) beside a bright bone reading column. High contrast between panel and content; coral used sparingly for accents, hovers, and links. Distinct move: nav links grow a coral tick on hover, work rows indent on hover, and the contact CTA is an inverted ink card inside the light column.

## 5. Color System
High contrast between the dark panel and the light content; coral for accents only.

| Token | Hex / value | Use |
|---|---|---|
| `--ink` | `#161514` | Left panel + contact card |
| `--ink-2` | `#2a2825` | Ink variant |
| `--bone` | `#f6f3ee` | Content background / panel text |
| `--bone-2` | `#ece7de` | Chip fill |
| `--text` | `#1c1a18` | Body text |
| `--dim` | `#6c655c` | Secondary text |
| `--faint` | `#a49b8e` | Meta / labels |
| `--line` | `#ddd5c8` | Hairlines on light |
| `--line-d` | `rgba(255,255,255,.12)` | Hairlines on dark |
| `--accent` | `#ec5a34` | Coral — links, ticks, avatar, hovers |

**Two grounds (ink + bone) plus exactly one accent (coral). No second bright colour.**

## 6. Typography

| Role | Family | Notes |
|---|---|---|
| Display / UI | `--disp` "Syne", ui-sans-serif, system-ui | Distinctive geometric display; weights 600/700/800 |
| Body | `--body` "Inter", ui-sans-serif, system-ui | Weights 400/500/600 |

- Panel name (`h1`): `clamp(38px, 5vw, 72px)`, weight 800, line-height `.98`, `letter-spacing:-.02em`.
- Lede: `clamp(24px, 3.2vw, 40px)`; work titles `clamp(20px, 2.6vw, 30px)`; CTA headline `clamp(26px, 3.6vw, 44px)`.
- Section labels (`.block h2`): `clamp(15px, 1.6vw, 18px)`, uppercase, `letter-spacing:.1em`, with a 26px coral rule before.
- Eyebrows use Syne, 12px, `letter-spacing:.18em`, uppercase, coral.

## 7. Layout Principles
- Root layout `.layout`: `grid-template-columns: 38% 62%`.
- Left `.panel`: `position:sticky; top:0; height:100vh`, flex column space-between, padding `clamp(28px, 3.4vw, 52px)`.
- Right `.content`: padding `clamp(48px, 7vw, 110px) var(--pad)`; `--pad: clamp(22px, 3.4vw, 52px)`.
- Blocks spaced `clamp(56px, 9vw, 120px)`.
- Radius: chips `999px`, contact card `18px` (otherwise square); no shadows — panel glow is a blurred radial via `::before`.
- Easing: `--ease: cubic-bezier(.22,.61,.36,1)`.

## 8. Homepage Sections
1. Left panel (sticky) — avatar monogram, EN/中文 toggle, eyebrow, name, role blurb, in-page nav (About / Selected work / Experience / Contact), social row.
2. About — lede statement + skill chips.
3. Selected work — numbered ruled rows (index · title/desc · year), indent on hover.
4. Experience — dated two-column rows.
5. Contact — inverted ink CTA card with headline, mail link, links; template note.

## 9. Component Style
- **Panel nav:** Syne links at ~62% opacity, coral tick (`::before`) that widens `16px→34px` on hover.
- **Work rows (`.work a`):** 3-col grid (idx / title+desc / year), top hairline, `padding-left:10px` shift on hover.
- **Experience rows (`.xp`):** `120px 1fr` grid, top hairline.
- **Chips:** pill (`999px`), bone-2 fill, Syne.
- **Contact card (`.cta`):** ink fill, `18px` radius, coral mail underline, uppercase links.
- **Lang toggle (EN/中文):** `.lang` pill buttons; `data-en`/`data-zh` swapped by an inline script (no separate app.js), persisted in `localStorage` under key **`t07_lang`** (default EN). Active button fills coral.
- No chat/AI surface in this template.

## 10. Motion / Animation
- Scroll reveals: `[data-rise]` fade + rise (`translateY(22px)`, `.7s`), staggered `data-d="1|2|3"` (`.08/.16/.24s`), IntersectionObserver, guarded by `html.js`.
- Hover: nav coral tick grows; work rows indent; social/CTA links shift to coral.
- `prefers-reduced-motion: reduce` disables reveals and smooth scroll.

## 11. Responsive Design
- `@media (max-width:860px)` — layout becomes single column; panel un-sticks (`position:static`, `min-height:70svh`) and stacks above content.
- `@media (max-width:520px)` — work rows drop the year column; experience rows collapse to one column.

## 12. Things to Avoid
- Don't overfill the fixed panel — it must fit within `100vh`.
- Don't add a second bright colour beside coral.
- Don't let the left panel scroll its own long content; keep it calm and persistent.
- Don't round the square surfaces (only chips and the contact card are rounded) or add drop shadows beyond the panel glow.
- Don't center-align the content column; it's a left-read layout.