# 10 · Glass Futuristic — Design System

> A frosted-glass, multi-hue "futuristic SaaS" personal site — glassmorphism panels floating over a slow-drifting mesh-gradient backdrop, in the tradition of modern AI-product landing pages.
> **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 an engineer/designer with a polished, "modern AI product" feel. The single scroll opens on a mesh-gradient hero with stat chips, states an about line in a glass panel, shows glass project cards and experience rows, and closes on a glass contact panel — the primary outcome being a premium, credible impression that leads to email/roles.

## 2. Target Audience
Engineers and designers who want a polished, premium, product-grade portfolio — people targeting principal/staff roles or select freelance builds who want to look current and technical without going neon/cyberpunk.

## 3. Brand Personality
Polished, soft-futuristic, calm-but-vivid, premium, technical. Voice is confident and product-like — concise, forward-looking ("Let's build the future"), never loud or gimmicky.

## 4. Visual Direction
Deep-navy background with a slow-drifting, multi-hue mesh gradient (blue/violet/cyan/pink) blurred behind everything. Frosted `backdrop-filter: blur()` glass panels are the core material — nav, cards, stat chips, and section panels all share translucent fill + hairline border. Rounded geometry throughout; gradient text/buttons carry the accent; glow, not shadow, is the depth cue.

## 5. Color System
Deep navy base + frosted-glass neutrals + a 4-hue cool-to-warm gradient accent system.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#070a14` | page background |
| `--text` | `#eef2ff` | primary text |
| `--dim` | `#9aa4c4` | secondary text, links, meta |
| `--line` | `rgba(255,255,255,.12)` | glass panel/card borders |
| `--glass` | `rgba(255,255,255,.06)` | panel/card/nav fill |
| `--glass-2` | `rgba(255,255,255,.09)` | panel/card hover fill |
| `--c1` | `#5b7cff` | gradient hue — blue |
| `--c2` | `#a855f7` | gradient hue — violet |
| `--c3` | `#22d3ee` | gradient hue — cyan (primary link/status colour) |
| `--c4` | `#f472b6` | gradient hue — pink |

`--c1`–`--c4` are always used together in gradients (mesh blobs, text-gradients, button gradients) — never picked alone as a flat "brand colour." Cyan (`--c3`) is the closest to a primary but still appears inside gradients.

## 6. Typography

| Role | Family | Notes |
|---|---|---|
| Display / headings / UI | **Sora** | weight 400–700, tight letter-spacing (`-.035em` hero) |
| Body / labels | **Manrope** | weight 300–500 |

- Hero `h1` `clamp(3rem, 11vw, 9rem)`, weight 700 — one word rendered as a `--c3 → --c1 → --c2` gradient text fill.
- Lead/body use Manrope weight 300 for a light, airy feel (`line-height:1.65`); contact `h2` `clamp(2.2rem, 7vw, 5rem)`.
- Section labels: Sora, uppercase, letter-spacing `.14em`, cyan; stat numbers Sora weight 700.

## 7. Layout Principles
- Sections `max-width:1180px`, centered, padding `clamp(60px,9vh,120px) clamp(20px,4vw,48px)`.
- Radius rounded throughout: `8px` lang toggle / stack chips, `14–16px` cards / xp-rows / nav / stat chips, `20–26px` glass panels.
- Every panel/card/nav uses `var(--glass)` fill + `backdrop-filter: blur(14–20px)` + `1px var(--line)` border — the core material.
- Depth is glow/blur, not shadow (e.g. primary button `0 10px 40px -12px var(--c2)`); work cards `auto-fit minmax(270px,1fr)`, xp rows `1fr` → `150px 1fr auto` at ≥680px.

## 8. Homepage Sections
1. **Nav** — fixed floating glass pill: gradient-text brand left; "Online · v2026" status dot + EN·中文 toggle right.
2. **Hero** (`#top`) — glass chip tagline, gradient-word headline, lead, gradient-fill primary CTA + glass secondary button, 3 glass stat chips, scroll cue.
3. **About** — a single glass panel with a statement headline containing one bold gradient-text phrase.
4. **Selected work** — glass project cards in an auto-fit grid, gradient border reveal on hover, top meta row + tech-stack chip row.
5. **Experience** — glass `.xp-row` list: cyan year, role, dim org.
6. **Contact** — one large glass panel: centered label, gradient-word headline, subtext, gradient CTA, dim link row.
7. **Footer** — centered, dim, single line.

## 9. Component Style
- **Buttons** — `14px` radius; `.btn-p` blue→violet gradient fill with cyan/violet glow, lifts on hover; `.btn-s` glass with hairline border, brightens to `--glass-2` on hover.
- **Cards** — glass fill, `20px` radius, `.top` meta row + title + dim copy + tech `.stack` chips; hover lifts `-6px`, brightens fill, and reveals a masked gradient border (`::before`, `linear-gradient(140deg,var(--c3),transparent 40%)`).
- **Stat chips** — glass `16px` panels with Sora number + uppercase dim key.
- **Nav** — floating glass pill; brand uses cyan→blue gradient text; status dot glows cyan.
- **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`; active button fills cyan; persisted in localStorage under **`sp10_lang`**; `<html lang>` becomes `zh-Hant` for Chinese.

## 10. Motion / Animation
- `.reveal` → `.in`: fade + translateY(26px), `0.9s cubic-bezier(.2,.7,.2,1)`, staggered by `(i % 4) * 80ms` via IntersectionObserver (threshold `0.14`).
- Fixed `.mesh` of 4 blurred blobs (`filter: blur(70px)`, `mix-blend-mode: screen`) drifts via `@keyframes drift` (`20s ease-in-out infinite`, staggered `-4s/-8s/-12s`), faded at edges by a radial mask (`body::after`).
- Cards lift + reveal gradient border on hover; buttons lift with intensified glow.
- `prefers-reduced-motion: reduce` disables reveals and freezes the mesh drift.

## 11. Responsive Design
- `@media(min-width:680px)` — `.xp-row` becomes `150px 1fr auto` (single column, stacked below).
- Work cards reflow via `auto-fit minmax(270px,1fr)`; hero/contact type, panel padding, and section padding scale fluidly via `clamp()`.
- Nav is a floating pill inset `14px`; mesh blobs sized in `vw` with off-screen bleed and `overflow-x:hidden` on body to avoid horizontal scroll.

## 12. Things to Avoid
- Don't make any panel fully opaque — translucent glass + hairline border is mandatory.
- Don't use a single accent as a flat solid fill; keep the 4-hue gradient system for text/buttons/mesh/card borders.
- Don't sharpen corners or add hard black shadows (glow/blur is the depth cue).
- Don't switch the background to pure black or a light/paper tone, or use serif type.
- Don't drop the animated mesh backdrop.

---

## Rebuild prompt (copy-paste)

> Build a single-page personal site in one self-contained HTML file (inline CSS + JS, no build step). Aesthetic: frosted-glass "futuristic SaaS" — like a modern AI-product landing page with glassmorphism panels floating over an animated mesh-gradient backdrop. Deep navy background `#070a14`, primary text `#eef2ff`, secondary text `#9aa4c4`, translucent glass fill `rgba(255,255,255,.06)` (hover: `.09`) with `rgba(255,255,255,.12)` hairline borders and `backdrop-filter: blur(14-20px)` on every panel/card/nav, and a 4-hue gradient accent system used together (never alone as a flat colour): blue `#5b7cff`, violet `#a855f7`, cyan `#22d3ee`, pink `#f472b6` — apply these as gradients on hero text, buttons, mesh blobs, and card hover borders. Typography: Sora (weight 500–700, tight letter-spacing) for headings/UI, Manrope (weight 300–500) for body/lead text. Round every corner (8px small controls, 14–16px cards, 20–26px panels). Add a fixed full-page backdrop of four large blurred colour blobs (one per gradient hue, mix-blend-mode screen) drifting slowly and continuously, faded at the edges with a radial mask. Structure: a fixed floating glass-pill nav with a gradient-text brand, an "Online · v2026" status dot, and an EN/中文 toggle; a hero with a glass tagline chip, a large headline with one gradient-fill word, a lead paragraph, a gradient-fill primary CTA button plus a glass secondary button, three glass stat chips, and a scroll cue; a single glass-panel About section with a statement headline containing one bold gradient-text phrase; a Selected Work section of glass project cards in an auto-fit grid that reveal a gradient border on hover, each with a tech-stack chip row; a glass Experience section of rows with a cyan year and dim org text; and one large glass-panel Contact section with a gradient-word headline, subtext, a gradient CTA button, and a dim link row, ending in a centered dim footer. Add scroll-triggered fade+rise reveals via IntersectionObserver, respecting prefers-reduced-motion (also freeze the mesh drift in that mode). Add a bilingual EN/中文 toggle using data-en/data-zh attributes on every string, persisted to localStorage under the key `sp10_lang`, switching `<html lang>` to `zh-Hant` when Chinese is active. Replace all placeholder persona and project content with: [USER DETAILS].