# 04 · Warm Tactile — Design System

> Human-crafted, tactile personal site — warm earthy palette, organic blob shapes, claymorphic soft depth, springy motion, and a characterful display face. Trend: the 2026 counter-reaction to the "generic AI look" — design that feels made by a hand, not a model.
> **All content is placeholder** — the persona "Nadia Rahman" and every project/stat/post are samples; replace them with your own.

---

## 1. Website Goal
An inviting, personable site that says "there's a real person here." It optimizes for warmth and character — making a portfolio feel handmade and approachable rather than clinical — so a visitor feels the maker's personality before they read a word of copy.

## 2. Target Audience
Illustrators, designers, educators, makers, and warm human-first brands. It flatters work that has texture and character, and people who want their site to feel friendly and crafted rather than corporate or "AI-default."

## 3. Brand Personality
Warm, soft, tactile, playful, human. Voice is friendly and first-person, a little whimsical ("Let's make something warm together"), without tipping into cutesy.

## 4. Visual Direction
Warm sand page with a faint paper grain, cream and terracotta/sage/mustard/rose colour cards, and large soft-rounded corners. The signature moves: blurred colour **blobs** floating behind the hero, **irregular blob radii** on the brand mark and avatar, a hand-drawn **mustard marker underline** (`.u`) on a hero word, and springy overshoot motion. Everything is warm-biased — no pure white, black, or cold grey.

## 5. Color System
Warm-biased throughout; cream cards with rotating colour cards to keep the page lively.

| Token | Hex | Use |
|---|---|---|
| `--sand` | `#efe4d2` | page (faint paper grain) |
| `--cream` | `#fbf5ea` | cards |
| `--ink` | `#3a2a20` | warm near-black text |
| `--ink-2` | `#6d5947` | secondary text |
| `--faint` | `#9a866f` | meta / captions |
| `--line` | `#e3d5bf` | inputs / hairlines |
| `--clay` | `#c96f4a` | terracotta accent — CTA / links |
| `--clay-d` | `#ad5734` | accent hover |
| `--sage` | `#7c8b6a` | olive/sage colour card |
| `--mustard` | `#e0a54b` | warm highlight card + marker underline |
| `--rose` | `#d98e7f` | soft rose colour card |

**Rule:** keep everything warm-toned — no pure white/black or cold greys. Colour cards (clay / sage / mustard / rose) rotate for emphasis; the terracotta clay is the single accent.

## 6. Typography

| Role | Family | Notes |
|---|---|---|
| Display / headings / UI | **Bricolage Grotesque** (`--disp`, opsz variable) | weights 500–700; a characterful, slightly quirky grotesque |
| Body | **Work Sans** (`--body`), system fallback | weights 400–600 |

- Body 17px / line-height 1.65.
- Fluid `clamp()`: hero `h1` `clamp(38px, 7vw, 82px)` at `-0.02em`; section `h2` `clamp(28px, 4.4vw, 48px)`; card `h3` `clamp(19px, 2.2vw, 25px)`; `.stat-num` `clamp(40px, 6vw, 64px)`.
- Headings use `text-wrap: balance`. `.eyebrow` / `.kicker`: 12–13px, weight 600, `letter-spacing: .04–.06em`, uppercase.
- Signature move: a **hand-drawn highlight** — `.u` paints a mustard marker underline via a `linear-gradient(transparent 62%, …)` background.

## 7. Layout Principles
- **Spacing** gutter `--pad: clamp(18px, 4vw, 48px)`; section rhythm `clamp(40px, 6vw, 80px)`; grid gap `clamp(16px, 2vw, 24px)`.
- **Container** `.wrap` max-width `1140px`.
- **Grid** `.grid` with `.g2` (`repeat(2,1fr)`) and `.g3` (`repeat(3,1fr)`); blog `.post` is `140px 1fr auto`.
- **Radius** large & soft: `--r: 28px` cards, `--r-lg: 40px` hero, `--r-sm: 16px` inputs, `999px` pills; brand mark and avatar use **irregular blob radii** (e.g. `46% 54% 60% 40% / 50% 44% 56% 50%`).
- **Elevation** soft, warm-tinted claymorphic shadows: `--soft` (`0 2px 4px` + `0 18px 40px -18px`, brown-tinted) rising to `--soft-hover` on hover — pronounced but never harsh.

## 8. Homepage Sections
1. **Nav** — sticky, translucent sand with blur; brand with a blob-radius clay mark, pill links, EN/中文 toggle.
2. **Hero** — two floating colour blobs, blob-radius avatar, eyebrow, headline with a marker-underlined word, lede, two CTAs.
3. **Selected work** — section head + a `.g2` grid of colour work cards (clay / plain / sage / mustard) with kickers, titles, and chips.
4. **About / stats** — a `.g3` row of stat cards (rose / plain / sage) with big numbers.
5. **Now + AI teaser** — a `.g2` row: a "Right now" card and a clay card linking to the Ask AI page, closed by the template note.
6. **Footer** — a clay card ("Let's make something warm together.") with social links, plus copyright.

## 9. Component Style
- **Buttons** — pill (`999px`), no border, `--soft` shadow; hover lifts `-2px` to `--soft-hover`. `.btn.solid` is clay-filled, hovering to `--clay-d`; arrow nudges right.
- **Cards** — `.card` = cream, `--r` 28px, `--soft` shadow; colour variants `.clay` / `.sage` / `.mustard` / `.rose`; `a.card` and `.hoverable` lift `-4px` on hover.
- **Nav** — sticky, `backdrop-filter: blur(8px)`, pill links (hover = cream fill, current = clay fill).
- **Forms** — `--sand`-filled inputs with `--line` border and `--r-sm`; focus adds clay border + a 4px `rgba(201,111,74,.16)` ring.
- **Chips** — pill, `--sand` fill; invert to translucent white inside coloured cards.
- **Chat / AI surface** — a `.chat` card with a header status dot (`--sage` with soft glow), rounded 20px bubbles; `.msg.user` is clay-filled clipping bottom-right, `.msg.ai` clips bottom-left; composer input is a pill.
- **Bilingual EN/中文 toggle** — elements with both `data-en` and `data-zh` are swapped by `app.js` (via `innerHTML` so the inline `<span class="u">` marker survives); inputs use `data-*-ph`. Default English; choice persists in `localStorage` under key **`warm_lang`**; proper nouns carry no `data-*`.

## 10. Motion / Animation
- Scroll reveals: `[data-rise]` starts faded + 20px down and slightly scaled (`scale(.985)`), settling via `.in`, 0.6s on the springy `--ease` `cubic-bezier(.34,1.4,.5,1)` with gentle overshoot; stagger via `data-d="1|2|3"` (0.06 / 0.12 / 0.18s).
- Hover: cards lift `-4px`, buttons `-2px`, arrows translate `3px`.
- Guarded by `html.js`. `@media (prefers-reduced-motion: reduce)` disables rises and transitions.

## 11. Responsive Design
- **≤ 820px** — the `.g3` grid drops from 3 to 2 columns.
- **≤ 700px** — nav wraps; links drop to a full-width row under the brand.
- **≤ 680px** — blog `.post` rows stack to a single column.
- **≤ 620px** — both `.g2` and `.g3` grids collapse to a single column.

## 12. Things to Avoid
- No pure white/black or cold greys — everything stays warm-toned.
- No sharp 0px corners or hard geometric shadows (that's the Neo-Brutalist template's job).
- Don't over-blob — one or two blobs per screen; irregular radii used sparingly for personality.
- Don't swap the springy easing for a linear/clinical curve — the gentle overshoot is the character.