# 08 · Aurora Glass — Design System

> A one-pager on an animated aurora-gradient backdrop with frosted glassmorphism cards — the soft, dreamy modern SaaS/product look (aurora UI + glass). Light, pastel, and airy.
> **All content is placeholder** — the persona and every project/post/link are samples; replace them with your own.

---

## 1. Website Goal
Give a product designer or founder a bright, contemporary landing page that feels like a polished product. Drifting colour blobs and translucent glass panels frame a centered hero, capability cards, a work grid, and a contact band. Primary outcome: a role, advisory, or founding-team conversation.

## 2. Target Audience
Product designers, founders, SaaS makers, and PMs who want a light, modern, on-trend aesthetic rather than a dark or editorial one.

## 3. Brand Personality
Calm, modern, friendly, optimistic, polished. Voice is warm and reassuring ("designing calm software for anxious moments"), confident without hype.

## 4. Visual Direction
A fixed field of four blurred, drifting colour blobs behind frosted glass surfaces. Signature moves: the `.glass` utility (translucent fill + `backdrop-filter: blur(18px) saturate(1.4)` + soft shadow + light border), a floating pill nav, a centered full-viewport hero, gradient-text headline words via `--grad`, and pill buttons. Everything sits *over* the aurora — never on a flat white block.

## 5. Color System
Pale ground, violet→cyan gradient accent, four aurora hues seen only through glass.

| Token | Hex / value | Use |
|---|---|---|
| `--bg` | `#eef0fb` | Pale page background |
| `--text` | `#191b2e` | Body text |
| `--dim` | `#565a75` | Secondary text |
| `--faint` | `#8b8fa8` | Meta / labels |
| `--line` | `rgba(25,27,46,.09)` | Hairlines |
| `--glass` | `rgba(255,255,255,.55)` | Glass fill |
| `--glass-2` | `rgba(255,255,255,.72)` | Denser glass / button |
| `--glass-line` | `rgba(255,255,255,.7)` | Glass border |
| `--a1` | `#7c6cff` | Aurora violet |
| `--a2` | `#4bc0e8` | Aurora cyan |
| `--a3` | `#ff8fce` | Aurora pink |
| `--a4` | `#8be9c8` | Aurora mint (also "live" dot) |
| `--grad` | `linear-gradient(120deg, --a1, --a2)` | Logo, buttons, gradient text |

**Keep text dark for contrast; the four aurora hues appear only softened behind glass. Don't let blob opacity swamp the text.**

## 6. Typography

| Role | Family | Notes |
|---|---|---|
| Display + body | `--disp` / `--body` "Plus Jakarta Sans", ui-sans-serif, system-ui | One friendly geometric sans throughout; weights 400–800 |

- Hero `h1`: `clamp(40px, 8vw, 92px)`, weight 800, line-height `1.02`, tight `letter-spacing:-.035em`.
- Section headings: `clamp(28px, 4.6vw, 52px)`, `-.03em`; card titles `clamp(18px, 2vw, 22px)`; stats `clamp(34px, 5vw, 54px)`.
- Eyebrow: 12px, weight 700, `letter-spacing:.14em`, uppercase, painted with `--grad` via background-clip.
- Signature move: `.grad-text` spans clip `--grad` into headline words (works inside the bilingual swap).

## 7. Layout Principles
- `.wrap` `max-width:1140px`; `--pad: clamp(18px, 4vw, 44px)`; radius `--r: 22px`.
- Sections padded `clamp(48px, 8vw, 110px)`.
- Card grids: `.g3` 3-col / `.g2` 2-col, `gap:clamp(14px, 1.8vw, 20px)`; `.card.big` spans 2.
- Glass elevation: `box-shadow: 0 8px 40px -16px rgba(60,50,120,.35)` + light border; corners rounded (`22px`, buttons/chips `999px`).
- Easing: `--ease: cubic-bezier(.22,.61,.36,1)`.

## 8. Homepage Sections
1. Aurora field — fixed four-blob background.
2. Floating glass pill nav — brand + gradient dot, About / Work / Contact, EN/中文 toggle.
3. Hero — availability pill, gradient-word headline, lede, two CTA buttons, scroll cue.
4. About / capabilities — section head + 3 glass cards.
5. Selected work — glass card grid mixing project cards, a big card, and stat cards; template note.
6. Contact — glass CTA band with headline, blurb, mail button, links.
7. Footer — copyright + template label.

## 9. Component Style
- **Glass (`.glass`):** translucent fill, `backdrop-filter: blur(18px) saturate(1.4)`, light border, soft shadow — the base for nav, cards, pills, band.
- **Buttons:** pill (`999px`); `.btn` glass, `.btn.solid` gradient fill; hover `translateY(-2px)`.
- **Cards:** padded glass tiles with gradient icon chips; `.stat` shows a gradient number; `.chip` pills.
- **Nav:** fixed floating pill, centered, `min(1140px, 100% - 28px)` wide.
- **Lang toggle (EN/中文):** `.lang` pill group; `data-en`/`data-zh` swapped by an inline script (no separate app.js), persisted in `localStorage` under key **`t08_lang`** (default EN). Active button takes the gradient. Swap works inside `.grad-text` spans.
- No chat/AI surface in this template.

## 10. Motion / Animation
- Aurora drift: blobs animate on `@keyframes drift1/drift2/drift3`, 20–26s, `infinite alternate`.
- Scroll reveals: `[data-rise]` fade + rise (`translateY(22px)`, `.7s`), staggered `data-d="1|2|3"` (`.08/.16/.24s`), IntersectionObserver, guarded by `html.js`.
- Hover: buttons lift; nav links get a soft white background.
- `prefers-reduced-motion: reduce` stops both aurora drift and reveals (and smooth scroll).

## 11. Responsive Design
- `@media (max-width:820px)` — `.g3` becomes 2 columns.
- `@media (max-width:660px)` — nav text links hide (brand + toggle remain).
- `@media (max-width:600px)` — all grids single-column; `.card.big` spans 1.
- Hero uses `100svh` min-height.

## 12. Things to Avoid
- Don't stack glass on glass on glass — readability dies.
- Don't use pure-opaque cards — it breaks the frosted effect.
- Don't crank blob opacity so text loses contrast; keep text dark.
- Don't put glass on a flat white block — it must sit over the aurora.
- Don't speed up the drift or add hard shadows/sharp corners — keep it slow, soft, rounded.