# Claudestyle Design System

> *"本站的顏色，也是他們的顏色"* — the page's colors are their colors.

**Claudestyle** is the editorial / museum-exhibition design language distilled from
**「名字的詩學 — The Poetics of Naming」**, a non-official curatorial web exhibition about
Anthropic's naming poetics (the company name, the Claude model tiers — Haiku, Sonnet,
Opus, Fable, Mythos — and the mascot Clawd). The exhibition borrows Anthropic's own brand
palette and typographic temperament and reframes it as a **warm, bookish gallery**: ivory
paper, clay/terracotta accents, serif headlines, and small-caps museum labels. The result
reads "像一本溫暖的書，而不是一塊冰冷的螢幕" — *like a warm book, not a cold screen.*

This system packages that language: the exact color tokens, a serif-led type scale, the
source-credibility tag vocabulary (官方 / 語源學 / 推測), the etymology-chain motif, the
two-column timeline, the model-roster table, and the Clawd mascot asset — so any new
artifact can be built in the same voice.

---

## Sources

- **Reference site (primary):** https://week.nqio.dev/anthropic/ — "名字的詩學 The Poetics of
  Naming", a permanent ("常設展") naming exhibition. Three galleries (展卡 cards / 時間軸 timeline /
  現役一覽 roster) plus a colophon. **Reference all elements** of this site.
- **Color source:** the exhibition states its palette is lifted verbatim from anthropic.com's
  brand CSS variables (`ant-brand.shared.min.css`, captured 2026-06-10) — `--swatch--clay`,
  `--swatch--accent`, plus ivory/slate/kraft/cactus/oat. Not reconstructed from memory.
- **Mascot asset:** `assets/mascot/clawd-official.gif` — Anthropic's **official** orange
  pixel-crab art (113-frame animated, transparent), pulled from the exhibition's
  `/assets/clawd-official.gif`. A trimmed static still is at `assets/mascot/clawd-still.png`.
- **Content / etymology** on the reference site cites OED, Etymonline, Lewis & Short (Latin),
  the Anthropic Fable 5 / Mythos 5 launch note (2026-06-09), and Wikipedia's Claude timeline.

> The reference site is **non-official and has no affiliation with Anthropic.** This design
> system likewise recreates a *style*, not Anthropic's proprietary product UI.

---

## CONTENT FUNDAMENTALS

The voice is that of a **museum wall-text curator** — literary, precise, quietly romantic,
and scrupulously honest about what is known vs. guessed.

**Tone & vibe.** Warm, scholarly, unhurried. Sentences are essayistic and often end on a
turned phrase — *"三行之內，一個完整的宇宙"* (within three lines, a complete universe). It treats a
product-naming decision as worthy of two thousand years of etymology, without irony. The
register is closer to a gallery catalogue or a good books-section essay than to marketing.

**Structure of a unit of copy.** Almost everything is built as **front → back**: a one-line
"一眼看懂" (understand at a glance) face, then a "深入考據" (deep research) reverse. Headlines are
short and evocative; body unpacks slowly. Galleries get a roman-numeral eyebrow + a CJK
counter ("Gallery I · 展廳一"), a serif H2, and a one-paragraph standfirst.

**Honesty about sourcing is the signature rule.** Every etymological claim is tagged with a
credibility tier and the system *never lets speculation pose as fact*:
- **官方** (Official) — confirmed by Anthropic / primary source.
- **語源學** (Etymology) — standard dictionary consensus.
- **推測 / 社群推測 / 詮釋** (Speculation / Community / Interpretation) — explicitly marked as guess.
Example: the Claude-honors-Claude-Shannon story is tagged 社群推測 with *"Anthropic 從未正式證實"*
(never officially confirmed). This tag vocabulary is a first-class design element (see Badge).

**Person & address.** Third-person and object-centric ("這名字…", "Opus 是…"). The reader is
gently invited, not commanded — *"點開每一張展卡"* (open each card). Rarely "you"; never "we" as a
brand. The objects (names, models) are the subjects.

**Casing & punctuation.** Latin labels use Title/UPPER small-caps for eyebrows
("EXHIBIT 00 · THE COMPANY"). Model code-names are lowercase mono (`claude-fable-5`). The
**middot ·** is the connective tissue everywhere ("A Naming Exhibition · 常設展"). Em-dashes
(——) carry the literary asides. Latin/Greek source words are italic (*fabula*, *ἄνθρωπος*).

**Bilingual setting.** Traditional Chinese body with Latin/Greek/Japanese terms inline.
Numbers, model IDs, prices, and years stay Latin. A serif sets both scripts.

**Emoji.** Essentially none — with **one deliberate exception**: 🦀 for Clawd, the pixel crab,
where the playful 8-bit register is the point. Treat emoji as off-brand except in mascot
contexts.

**Example phrases (voice samples):**
- *"一家 AI 公司如何用兩千年的語源，為矽基智慧命名。"*
- *"以最少，說最多。"* (Haiku's mission — say the most with the least.)
- *"防護層，就是兩個名字的分界。"* (Fable vs. Mythos — the safeguards are the boundary.)
- *"從外星侵略者，到桌上的夥伴"* (Clawd: from alien invader to desk companion.)

---

## VISUAL FOUNDATIONS

The whole system is **paper, ink, and one warm accent.** Restraint is the aesthetic.

**Color.** Ivory paper (`#faf9f5`) is the ground; warm near-black slate (`#141413`) is the
ink. **Clay / terracotta (`#d97757`) is the only true accent** — used for small marks, the
etymology arrows, primary buttons, rules, and emphasis, never as a big flood fill. For small
text the clay is deepened to `#a64a2c` to pass AA on ivory. Supporting tints: oat (`#e3dacc`)
and ivory-2 (`#f0eee6`) for alternating panels; kraft (`#d4a27f`) for craft-paper dividers;
cactus sage (`#bcd1ca`) used *sparingly* for "official" signals. Imagery skews **warm** —
terracotta, kraft-brown, sand; the only cool note is cactus sage. No neon, no blue-purple
gradients, no glassmorphism.

**Type.** Serif-led. A warm transitional book serif (Tiempos → **Newsreader** substitute)
sets display + headings + reading body — this is what makes it feel like a book. A neutral
humanist grotesque (Styrene → **Hanken Grotesk**) sets eyebrows, labels, UI, badges. Mono
(**Space Mono**) sets model code-names and the source-tier tech feel. A pixel face
(**Press Start 2P**) is reserved for the 8-bit mascot world only. CJK uses Noto Serif/Sans
TC. Hierarchy comes from **size and serif/sans contrast**, not from many weights — most text
is regular weight; semibold is the heaviest you'll usually see in body.

**Spacing & layout.** Gallery-generous. A 4px base scale topping out at very large gallery
gaps (96–128px between sections). Reading sits in a narrow book measure (~42rem); gallery
grids go wider (~76rem). Eyebrow → title → standfirst is the recurring section rhythm.
Layout fixtures: a thin top brand bar; left-rail or numbered exhibit markers; a two-column
timeline (main spine left, etymology counter-column right).

**Backgrounds.** Flat warm paper — **no photographic hero washes, no gradients, no
patterns/textures** beyond the subtle paper tone shift between `--ivory` and `--ivory-2`
panels. The "texture" is typographic and editorial, not graphical. The one pictorial element
is the transparent Clawd gif, which floats on the paper.

**Borders.** Borders do more work than shadows. Hairlines are slate at ~15% (`--slate-4`);
"frame" borders (2px slate) evoke a mounted museum label/plate. Craft dividers use kraft.

**Shadows / elevation.** Soft, warm-tinted, low-contrast — *paper resting on paper*
(`--shadow-sm/md/lg`). On hover a card lifts with a faint clay-warm shadow (`--shadow-clay`).
Pixel/8-bit surfaces break this rule on purpose: a hard offset `3px 3px 0` slate shadow.

**Corner radii.** Soft but never pill-shaped: 6–16px on cards/buttons (`--radius-sm…lg`).
Full-round (`--radius-full`) is reserved for tags, dots, and tier indicators only.

**Cards.** A card is a sheet of paper: white or ivory-2 fill, hairline or soft border, gentle
`--shadow-sm`, ~12–16px radius, roomy padding. The exhibit card has a literal **front/back**
(flip or expand) — recto = glance, verso = deep dive. No colored left-border-accent cards.

**Animation.** Gentle and sparse. Fades and small translateY rises on entrance
(`--ease-out`, 200–380ms); **no bounce, no spring, no parallax.** Hover lifts a card a few px
and warms its shadow. Reduced-motion shows the end state. The lone kinetic exception is the
looping Clawd gif. Press states **darken** the clay (→ `--clay-deep`) and/or nudge down 1px;
8-bit buttons shift into their hard pixel shadow instead.

**Hover / press summary.** Links & text → shift to deeper clay. Primary button → darken clay
+ faint clay shadow. Cards → rise + warm shadow + border darkens a touch. Tags → subtle fill
tint. No opacity-fade-to-50% hovers; brand prefers a color/elevation change.

**Transparency & blur.** Used almost never. No frosted-glass panels. The only transparency is
in hairline borders (alpha-slate) and the mascot PNG.

---

## ICONOGRAPHY

The exhibition is **deliberately icon-light** — it leans on *type, glyphs, and one mascot*
rather than an icon set. Recreate that restraint.

- **Letterform & symbol glyphs as icons.** The hero "logo" is the Greek letter **ἄ**
  (alpha with breathing mark) set large in the serif. Models are marked by **musical/literary
  glyphs** rendered in type: ✦ (feature), ♪ (Sonnet), Op. (Opus), Fa. (Fable), μ (Mythos),
  俳 (Haiku kanji). These are *characters*, not SVG icons — set them in `--font-serif` or
  `--font-mono`. Prefer this approach for new marks.
- **Tier dots.** Model capacity is shown as `•` / `••` / `•••` / `••••` (filled) and `△△△△`
  (restricted/Mythos). See the `TierDots` component.
- **The middot · and arrows →** are the workhorse connective marks (eyebrows, etymology
  chains). Use a real `→` (U+2192) in `--font-sans`/mono.
- **Mascot — Clawd 🦀.** The one true image asset: `assets/mascot/clawd-official.gif`
  (official Anthropic pixel-crab art) and `clawd-still.png`. 8-bit, orange, two black eyes,
  waving claws. Render with `image-rendering: pixelated`. The 🦀 emoji is its only sanctioned
  emoji use.
- **No general icon font / sprite** ships with this system (the source site has none). If a
  consuming project genuinely needs UI glyphs (chevrons, close, external-link), substitute
  **Lucide** (https://unpkg.com/lucide-static) at 1.5px stroke — its thin, humanist line
  matches the restraint — and **flag the substitution**, since it is not part of the original.
- **No decorative emoji, no 3D icons, no duotone illustration.** Warmth comes from type and
  paper, not from iconography.

---

## INDEX — root manifest

**Global entry:** `styles.css` (link this) → imports everything under `tokens/`.

- `tokens/`
  - `fonts.css` — Google Fonts (@import) substitutes for Tiempos/Styrene.
  - `colors.css` — clay/ivory/slate palette + source-tier signals + semantic aliases.
  - `typography.css` — families, scale, weights, line-heights, tracking.
  - `spacing.css` — 4px spacing scale, radii, container widths, border widths.
  - `elevation.css` — warm shadows, focus ring, motion easings, pixel shadow.
  - `base.css` — element defaults (serif body, eyebrow utility, links, selection).
- `assets/mascot/` — `clawd-official.gif` (animated), `clawd-still.png` (trimmed still).
- `guidelines/` — foundation specimen cards for the Design System tab (colors, type,
  spacing, badges, etymology, mascot).
- `components/` — reusable primitives (see below).
- `ui_kits/naming-exhibition/` — full recreation of the reference exhibition.
- `SKILL.md` — Agent-Skill manifest for downloading into Claude Code.

**Components** (`window` namespace reported by the compiler — see SKILL.md):
- `components/core/` — `Button`, `Card`, `Badge` (source tiers), `SectionLabel` (eyebrow), `Tag`.
- `components/exhibition/` — `EtymologyChain`, `TierDots`, `ExhibitHeader`.
- `components/calendar/` — `WeekCalendar` (九宮格週行事曆: today top-left, 9 days, L1/L2/L3
  events as `hh:mm title`, multi-event overflow → 點入日視角, warm light + dark).
- `components/layout/` — `CollapsibleSection` (full-width 4x2/3x2/2x2 region; collapsed =
  header + first-row peek) and `CollapsibleCard` (collapsed = single-line title + yy/mm/dd +
  first body line). Both carry a ◉ set-default-state icon and a ⠿ drag grip; backend-driven.
- `components/site/` — `Sidebar` (站群側欄: collapsible tree of favicon bookmark groups +
  📌 pinned + recent) and `BookmarkCard` (favicon + name + A/B access chip, collapsible).
- `components/lifecycle/` — `LifecycleLane` (label + step cells), `WorkCard` (backlog item),
  `StatusTag` (已固化 / 需固化 / 待建 readiness chips). Distilled from the lifecycle dashboard.
- `components/research/` — `SwimLane` (parallel status lanes), `StatCard` (big number),
  `PipelineFlow` (arrowed steps), `StatusDot` (✅/⚠️/ℹ️ → sage/kraft/cactus, no emoji).
  Distilled from the NYAM OHLCV research harness.
- `components/flow/` — `FlowDiagram` (data-driven architecture/flow engine: grid-lane nodes +
  measured SVG connectors that redraw on resize), `FlowNode`, `FlowLayer`, `FlowLegend`.
- `components/data/` — `DataCard` (metric/compact/mini economic-data card + trend color),
  `Sparkline` (trend bars + optional line), `StatTableCard` (multi-row), `QuadrantCard` (2×2).
  Distilled from the jin10 「重要數據」 wall; trend = clay-up / sage-down / blue-flat;
  `DataCard variant="square"` for the square-tile wall.
- `components/correlation/` — `PredictionCard` (direction + confidence + reasoning + verify panel),
  `CorrelationMatrix` (auto-colored correlation / Granger heatmap), `FactorBars` (signed importance),
  `AnalysisNote` (tagged callout with expandable More). Distilled from the TAIEX correlation dashboard;
  trend follows 台股紅漲綠跌 (clay-up / sage-down / blue-flat).
- `components/compare/` — `ComparisonTable` (criteria × options, recommended column),
  `VersusCard` (A vs B vs C cards), `FeatureMatrix` (✓/◐/✗ check matrix), `ProsConsList`
  (pros / cons). The comparison vocabulary agents otherwise get wrong; from the TEE-NLM proposal.
- `components/flow/` — `FlowDiagram` (data-driven architecture/flow engine: CSS-grid lanes +
  measured SVG connectors that redraw on resize), plus its parts `FlowNode`, `FlowLayer`,
  `FlowLegend`. Author a diagram as `layers` (nodes, aligned into `columns`) + `edges` (by id).

**For Google Stitch** (`stitch/` — single self-contained files, no folder needed; all **light-only**
but fully CSS-variable themed so a `[data-theme="dark"]` block drops in later):
- `stitch/Dashboard.html` — the **complete editable kit**: a sidebar + reorderable/addable
  regions (board / card-grid 2x2·3x2·4x2 / lanes / matrix). Drag-reorder regions & cards, add
  region (type picker) / card, delete, collapse, inline-edit; localStorage + `/api/dashboard` stub.
- `stitch/ResearchBoard.html` — a research harness page: swimlane board + stat cards + pipeline
  + method matrix + data table + milestone timeline, all keyed by status dots; editable `CONFIG`.
- `stitch/FlowDiagram.html` — data-driven architecture/flow-diagram engine: nodes in CSS-grid lanes,
  connectors drawn on a measured SVG layer that redraws on resize; swap the `DIAGRAMS` data for a new chart.
- `stitch/DataCards.html` — jin10-style economic-data masonry: metric/compact/mini/table/quadrant/feature
  cards + sparklines, drag-to-reorder, localStorage + `/api/data-cards` stub; editable `CONFIG.cards`.
- `stitch/CorrelationDashboard.html` — TAIEX correlation/prediction dashboard: prediction card, correlation
  + Granger heatmaps, factor bars, KPI row, comparison chart, model summary, NLM brief; editable data blocks.
- `stitch/CompareTables.html` — four comparison tables (ComparisonTable / VersusCard / FeatureMatrix /
  ProsConsList), all editable + add row/col + drag-reorder rows & columns + mark-recommended; localStorage + `/api/compare`.
- `stitch/FlowDiagram.html` — a data-driven architecture/flow-diagram engine: describe a diagram
  as `nodes` (in grid lanes) + `edges`; an SVG layer measures node positions and draws the
  right-angle arrows, redrawing on resize. Edit the `DIAGRAMS` array to make new diagrams.
- `stitch/Sidebar.html` — the 站群 sidebar alone (tree + favicons + pinned/recent), editable.
- `stitch/WeekCalendar.html` — the 九宮格, editable `CONFIG`.
- `stitch/CollapsiblePanels.html` — collapsible regions + cards, drag, default-state icon.
- `stitch/DESIGN.md` — the design-language spec to paste into Stitch's DESIGN.md slot.

**UI kits:**
- `ui_kits/naming-exhibition/` — hero, exhibit-card gallery, two-column timeline, model roster.

---

## Caveats / substitutions

- **Fonts are Google-Fonts substitutes**, not Anthropic's licensed Tiempos & Styrene
  (Newsreader ≈ Tiempos, Hanken Grotesk ≈ Styrene). Swap in the real faces if you license them.
- **Palette is authentic** (taken from the exhibition's documented anthropic.com CSS capture);
  the deepened clay `#a64a2c` is a derived AA-safe text shade, not an original swatch.
- **Clawd is Anthropic's official art**, reused here as the source exhibition did; treat it as
  third-party brand property, not a freely-licensable system asset.