# Worked example — AlphaBlue

A full run of the method for **AlphaBlue**, a done-for-you web-presence studio for local
businesses. Treat the specific colors/fonts as *one instance*, not defaults — the value is in
seeing the decisions and reasoning.

## Phase 1 — intent

One-line intent: **"a living, modern web — warm and human, deliberately not the cold
corporate/SaaS look."** The "not corporate" half is what kept every later choice off the
generic path.

Directional answers from the user:
- Typography → modern grotesk (but must extend to Thai/CJK later → architecture kept
  multi-script).
- Color → warm paper base + keep blue as the anchor + one warm spark.
- Motion → medium (slow hero gradient + light parallax).

## Phase 2 — palette (locked)

| Role | Ramp (hex) |
| --- | --- |
| **paper** (warm neutral) | 50 `#FCFAF5` · 100 `#F6F1E7` · 200 `#ECE4D5` (border) · 300 `#DCD1BC` |
| **ink** (deep navy text/surfaces) | 950 `#0A1220` · 900 `#0F1B2E` · 800 `#17293F` · 700 `#274058` |
| **accent** (blue — primary/trust) | 600 `#1F5FD6` · 500 `#2F7CF6` · 400 `#5A97F8` · 50 `#EAF2FE` |
| **spark** (coral — small-area life) | 500 `#F0623C` (UI) |

Key move: replacing cold grey neutrals with **warm paper** removed most of the "cold corporate"
feeling in one step. Blue stays functional; coral is only ever a small accent. Shown to the
user as ramps **plus** a dark-hero + button + card mock — the applied view is what earned the
"一击即中" sign-off.

## Phase 3 — logo

Motif: the code tag **`<AB/>`** — reads as *code* and as *A/B testing*. Concepts explored:
code-tag wordmark, geometric-chevron mark, icon tile, and an "A / B split". The code-tag
wordmark was chosen as closest to the idea.

Two reasoning moments worth studying (both in `references/logo.md`):

1. **The cheap clash.** First execution colored `A` blue and `B` coral — cold + warm, equal
   weight, full saturation. The user felt it looked cheap. Fix applied: the restrained "R1" —
   the whole mark in ink `#16233A`, only the `/` slash in a **deepened terracotta `#C65A3C`**
   (muted, sharing value with the ink). Calm mark + one deliberate spark = premium.

2. **Name-vs-mark tension.** The user still wanted the name "Blue" represented. Rather than
   forcing blue into the mark (where it would blend into the blue UI and read as a weak literal
   idea), blue moved to the **wordmark lockup**: the word "Blue" set in `#2456C9` next to the
   warm mark. Mark stays distinctive; the name's meaning still lands.

Logo-specific colors: bracket/ink `#16233A`, terracotta `#C65A3C` (on dark `#E08A6A`), wordmark
"Blue" `#2456C9`.

## Phase 4 — production

Built from **Space Grotesk Bold**, glyphs outlined to paths via `scripts/outline_glyphs.py`
(variable font instanced at wght 700). Variant set: `mark` / `-dark` / `-mono`,
`lockup` / `-dark`, and a `favicon` = `A / B` tile (the full `<AB/>` was too wide for a legible
16px square, so the smallest recognizable fragment was used, slash in terracotta). Rasterized
to PNG + WebP with `scripts/generate-raster.sh`. Canonical folder `assets/brand/` at the repo
root; the app symlinks to it.

## Phase 5 — licensing

Space Grotesk and Inter confirmed **SIL OFL 1.1** by reading the font's name table — free
commercial use, logos allowed, outlined glyphs unrestricted.

## Phase 6 — documentation

Palette, logo rules, typography and asset locations captured in the project's `CLAUDE.md` /
`AGENTS.md` brand section, plus a typeset VI-system memo. Typography architecture: display
Space Grotesk → Anuphan (Thai) → Noto Sans TC; body Inter → IBM Plex Sans Thai → Noto Sans TC.