# 13 · Sketchbook — Design System

> A hand-drawn notebook one-pager — ruled paper, handwriting, washi tape, wobble borders and marker highlights — the tactile "made by hand" aesthetic of an illustrator's sketchbook (think a scanned Moleskine crossed with sticky notes).
> **All content is placeholder** — the persona "Ollie Brooks" and every project/workshop/link are samples; replace them with your own.

---

## 1. Website Goal
Present an illustrator, teacher, or maker as warm, approachable, and human. The primary outcome is to show a portfolio of drawings and invite two actions — browse the "sketchbook" of work and book a workshop or collaboration — all in a friendly, low-pressure tone.

## 2. Target Audience
Illustrators, picture-book makers, muralists, teachers, and hands-on creatives. Flatters playful, character-driven visual work and anyone who wants a personable, un-corporate site.

## 3. Brand Personality
Friendly, tactile, playful, warm, unpretentious. Voice is casual and encouraging — lowercase asides ("the good stuff", "that's me (roughly)"), lots of exclamation, doodled arrows.

## 4. Visual Direction
Warm cream paper with faint blue ruled lines runs behind everything. Headlines are set in a bouncy handwriting face; labels in a marker face, slightly rotated. Content sits on sticky-note and taped-photo cards with thick charcoal outlines, irregular hand-drawn corner radii, hard offset shadows, and small rotations so nothing is perfectly aligned. Marker highlighter swipes, dashed borders, tape strips, and doodle annotations complete the notebook feel.

## 5. Color System
Cream paper with pen-ink accents and highlighter pastels.

| Token | Hex | Use |
|---|---|---|
| `--paper` | `#fbf6e9` | Page background (ruled) |
| `--paper-2` | `#fffdf6` | Card / note fill |
| `--ink` | `#2c2a26` | Text, outlines, shadows |
| `--dim` | `#6b675e` | Body / secondary text |
| `--faint` | `#a49d8c` | Captions, footer, scroll cue |
| `--line` | `#d9d2be` | Dashed borders, picture frames |
| `--rule` | `#cfe3ef` | Blue notebook rule lines |
| `--margin` | `#e7a8a0` | Margin/red-line accent |
| `--pen-red` | `#e0503f` | Kickers, links, red pen |
| `--pen-blue` | `#3a6ea5` | Doodles, wavy underlines, blue pen |
| `--hi` | `#ffe27a` | Highlighter swipe, yellow notes/tape |
| `--lime` | `#bfe3a0` | Green accent |

Note tints beyond tokens: blue notes `#dcebf5`, green notes `#e2f0d4`. Body ruled-line texture uses `--rule` at `background-size:100% 30px`. **Palette is "school supplies" — cream + two pen inks (red/blue) + highlighter yellow/green; don't add saturated brand hues.**

## 6. Typography
Handwriting + marker + a clean sans for readable body.

| Role | Family | Notes |
|---|---|---|
| Headings / handwriting | `--hand` "Caveat", cursive | Weights 500/600/700; hero, section titles, note titles, nav links |
| Labels / marker | `--marker` "Permanent Marker", cursive | Kickers, brand, buttons, mail — slightly rotated |
| Body | `--body` "Nunito", ui-sans-serif | Weights 400/600/700; base `16.5px`, line-height `1.65` |

- Type scale (clamp): hero `clamp(64px,17vw,220px)`; section titles `clamp(38px,6vw,72px)`; note/frame `h3` `clamp(22–24px,2.4–2.6vw,30–32px)`; contact `h2` `clamp(38px,6vw,80px)`; stat number `clamp(46px,6vw,72px)`.
- Weights mostly 600/700 for handwriting headings; body 400/600.
- Signature type move: `.hi` marker highlight (a linear-gradient swipe behind text), wavy `text-decoration: underline wavy` in pen colors, and marker labels rotated `-1.5deg`/`-2deg`.

## 7. Layout Principles
- Spacing base: `--pad:clamp(18px,4vw,52px)`; sections `padding:clamp(48px,7vw,100px) 0`.
- Container: `.wrap` `max-width:1080px`, centered.
- Grids: `.g3` `repeat(3,1fr)`, `.g2` `repeat(2,1fr)`, gap `clamp(18px,2.6vw,30px)`; about is `1.3fr 1fr`.
- Radius: intentionally irregular hand-drawn corners — notes `14px 20px 16px 22px`, buttons `16px 22px 18px 24px`, CTA `20px 28px 22px 30px`, lang toggle `12px`. Nothing is a uniform radius.
- Elevation: hard offset shadows in ink (`4px 4px 0`, buttons `3px 3px 0`, CTA `6px 6px 0 var(--ink)`), thick `2.5px solid var(--ink)` outlines, small nth-child rotations (`±1–1.4deg`), tape strips and dashed picture frames.

## 8. Homepage Sections
1. Sticky nav — `✎`-prefixed marker brand, handwriting links (wavy-underline hover), EN/中文 toggle; dashed bottom border.
2. Notebook hero — doodle annotations, marker kicker, huge handwriting name with wavy underline, sub-line, two buttons, scroll cue (fills `100svh`).
3. `#work` — "Selected doodles": 3-column taped picture frames (6 items) + template note.
4. `#about` — lead + bio + a 3-up sticky-note stat row, beside a rotated taped self-portrait.
5. `#teach` — "Drawing, for everyone": 3 colored sticky-note cards (workshops/course/school visits).
6. `#contact` — yellow taped CTA note with mailto + social row.
7. Footer — "drawn with love" credit + template name.

## 9. Component Style
- **Buttons:** `.btn` — `2.5px solid var(--ink)`, hand-drawn radius, `3px 3px 0` shadow that grows to `5px 5px 0` and nudges `-1px,-1px` on hover; `.yellow` variant fills `--hi`.
- **Cards:** `.note` sticky notes (`2.5px` outline, irregular radius, `4px 4px 0` shadow, alternating rotation; `.y/.b/.g` color variants) and `.frame` taped photos (dashed `.pic` placeholder with a tape strip).
- **Nav:** sticky, translucent paper + `backdrop-filter:blur(4px)`, dashed bottom border; active language fills highlighter yellow.
- **Chips:** none as such; workshop cards use a marker `.em` glyph badge.
- **Forms:** none (contact is a mailto + link row).
- **Chat/AI surface:** none.
- **Bilingual EN/中文 toggle:** elements carry `data-en` / `data-zh` (and `data-en-ph`/`data-zh-ph`); an inline script swaps them via `innerHTML` (preserving `<span class="u/hi">`, `<br>`), sets `<html lang>`, and persists to `localStorage` key **`t13_lang`** (default `en`).

## 10. Motion / Animation
- Scroll reveals: `[data-rise]` start `opacity:0; translateY(22px) rotate(-1deg)` → settle to `.in` (un-rotate), IntersectionObserver threshold `.12`, guarded by `html.js`; stagger `data-d` → `.08/.16/.24s`, transition `.6s var(--ease)`.
- Ease: `--ease:cubic-bezier(.34,1.3,.5,1)` — a springy overshoot that suits the bouncy handwriting.
- Hover: buttons lift with a growing hard shadow; nav links get a wavy red underline; the reveal's tiny rotation makes cards feel "tossed" onto the page.
- `prefers-reduced-motion: reduce` disables reveals, rotation, and smooth scroll.

## 11. Responsive Design
- `max-width:820px` — `.g3` grids drop to 2 columns.
- `max-width:760px` — about grid collapses to one column.
- `max-width:680px` — nav links hide (brand + toggle remain).
- `max-width:560px` — `.g3` and `.g2` collapse to a single column.

## 12. Things to Avoid
- Don't make it neat and uniform — perfectly straight, same-radius, shadow-free cards kill the hand-made feel.
- Don't drop the ruled-paper texture, tape, dashed frames, or wobble borders.
- Avoid corporate sans headlines — the handwriting/marker mix is the identity.
- No glossy gradients, blur-heavy glass, or saturated brand colors; stay in the "school supplies" palette.
- Don't over-tilt everything — small rotations (±1–2°) read as charming; large ones read as broken.