oh-my-design-cli 1.6.6 → 1.7.0

package/web/references/class101/DESIGN.md

@@ -10,6 +10,57 @@ logo:
   slug: "https://www.google.com/s2/favicons?domain=class101.net&sz=128"
 verified: "2026-05-19"
 omd: "0.1"
+tokens:
+  source: prose-derived
+  extracted: "2026-06-08"
+  note: "primary action button is near-black #202020 (the workhorse CTA); brand = orange spark #FF5D00 (= primary_color). Distinct roles, not a conflict."
+  colors:
+    primary: "#202020"
+    primary-hover: "#000000"
+    brand: "#FF5D00"
+    brand-tint: "#FFF1E8"
+    canvas: "#FFFFFF"
+    surface: "#F3F3F3"
+    surface-raised: "#FAFAFA"
+    foreground: "#000000"
+    body: "#333333"
+    muted: "#767676"
+    tertiary: "#AAAAAA"
+    hairline: "#E5E5E5"
+    border-strong: "#D1D1D1"
+    on-primary: "#FFFFFF"
+    success: "#22C55E"
+    error: "#FF3B30"
+    warning: "#FAAD14"
+  typography:
+    family: { sans: "Pretendard Variable", mono: "system-ui" }
+    hero:           { size: 36, weight: 700, lineHeight: 1.25, use: "Home hero, campaign headlines (32-40px)" }
+    section-heading: { size: 23, weight: 700, lineHeight: 1.35, use: "Category / row headers (22-24px)" }
+    card-title:     { size: 16, weight: 600, lineHeight: 1.40, use: "Class card titles" }
+    body:           { size: 16, weight: 400, lineHeight: 1.50, use: "Descriptions, marketing body" }
+    label:          { size: 16, weight: 600, lineHeight: 1.40, use: "Buttons, nav (CTA / label)" }
+    meta:           { size: 14, weight: 400, lineHeight: 1.40, use: "Creator names, class metadata" }
+    caption:        { size: 12, weight: 400, lineHeight: 1.40, use: "Badges, fine print" }
+  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 32, xxl: 40, section: 40 }
+  rounded: { sm: 6, md: 8, lg: 12, xl: 16, full: 999 }
+  shadow:
+    hover: "rgba(0,0,0,0.06) 0px 2px 8px"
+    floating: "rgba(0,0,0,0.1) 0px 4px 16px"
+    modal: "rgba(0,0,0,0.16) 0px 8px 24px"
+  components_harvested: true
+  components:
+    button-primary: { type: button, bg: "#202020", fg: "#FFFFFF", radius: "12px", height: "50px", padding: "15px 14px", font: "16px / 600", hover: "#000000", use: "Workhorse CTA — 시작하기 / 구독하기" }
+    button-brand: { type: button, bg: "#FF5D00", fg: "#FFFFFF", radius: "12px", padding: "15px 14px", font: "16px / 600", use: "High-energy promo moments only — the orange spark" }
+    button-secondary: { type: button, bg: "#FFFFFF", fg: "#202020", border: "1px solid #E5E5E5", radius: "12px", padding: "15px 14px", font: "16px / 600", use: "Secondary action beside black primary" }
+    button-ghost: { type: button, bg: "transparent", fg: "#333333", radius: "8px", font: "16px / 500", use: "Tertiary nav, 더보기" }
+    input: { type: input, bg: "#F3F3F3", fg: "#000000", radius: "8px", padding: "12px 16px", font: "16px / 400", focus: "border #202020", use: "Class search, form fields — #AAAAAA placeholder" }
+    class-card: { type: card, bg: "#FFFFFF", radius: "8px", padding: "0 + 12px text region", shadow: "rgba(0,0,0,0.06) 0px 2px 8px on hover", use: "Catalog atom — thumbnail top, title + creator + meta below" }
+    benefit-card: { type: card, bg: "#FFF1E8", radius: "8px", padding: "24px", use: "Subscription benefits, membership perks, value callouts" }
+    chip: { type: badge, bg: "#F3F3F3", fg: "#333333", radius: "999px", padding: "6px 14px", font: "13px / 500", use: "Category filters — 드로잉 / 베이킹 / 사진" }
+    badge-hot: { type: badge, bg: "#FF5D00", fg: "#FFFFFF", radius: "6px", padding: "2px 8px", font: "12px / 600", use: "NEW / 인기 high-energy emphasis on cards" }
+    top-nav-item: { type: tab, fg: "#767676", active: "#000000 weight 600", font: "16px / 500", use: "Category navigation" }
+    snackbar: { type: toast, bg: "#202020", fg: "#FFFFFF", radius: "8px", padding: "12px 16px", use: "찜한 클래스에 추가했어요 transient feedback" }
+    modal: { type: dialog, bg: "#FFFFFF", fg: "#000000", radius: "16px", padding: "24px", shadow: "backdrop rgba(0,0,0,0.5)", use: "Login, plan selection, class preview — bottom sheet top corners" }
 ---
 
 # Design System Inspiration of Class101 (클래스101)

package/web/references/classting/DESIGN.md

@@ -10,6 +10,47 @@ logo:
   slug: "https://www.google.com/s2/favicons?domain=classting.com&sz=256"
 verified: "2026-06-03"
 omd: "0.1"
+tokens:
+  source: prose-derived
+  extracted: "2026-06-08"
+  colors:
+    primary: "#00C896"
+    primary-hover: "#17A27E"
+    brand: "#00C896"
+    canvas: "#FAFAFB"
+    foreground: "#424242"
+    muted: "#757575"
+    on-primary: "#FFFFFF"
+    surface: "#FFFFFF"
+    surface-mint: "#EDF9F6"
+    surface-lavender: "#FAF5FF"
+    green-050: "#EFFFFA"
+    accent-purple: "#9F7AEA"
+    accent-orange: "#ED8936"
+    accent-blue: "#4299E1"
+    outline: "#ED872D"
+    footer: "#000000"
+  typography:
+    family: { sans: "Noto Sans KR", mono: "Noto Sans KR" }
+    body:        { size: 16, weight: 400, lineHeight: 1.5, use: "Body copy" }
+    label:       { size: 14, weight: 500, lineHeight: 1.0, use: "Sub-button / label" }
+    display-md:  { size: 28, weight: 700, use: "Section headings (.display-md)" }
+    display-lg:  { size: 42, weight: 700, lineHeight: 1.29, use: "Major feature headings (.display-lg)" }
+    display-x-lg: { size: 56, weight: 700, lineHeight: 1.21, use: "Hero headings (.display-x-lg)" }
+  spacing: { xs: 4, sm: 8, md: 16, base: 16, lg: 24, xl: 32, xxl: 48, section: 64 }
+  rounded: { sm: 6, md: 8, lg: 16, pill: 24, full: 9999 }
+  shadow:
+    subtle: "rgba(0,0,0,0.05) 0px 0px 12px"
+    raised: "rgba(0,0,0,0.08) 0px 2px 12px"
+    accent: "rgba(0,200,150,0.08) 0px 5px 25px"
+  components_harvested: true
+  components:
+    button-primary: { type: button, bg: "#00C896", fg: "#FFFFFF", radius: 8, padding: "15px 16px", font: "14px/500", use: "primary CTA" }
+    button-black: { type: button, bg: "#424242", fg: "#FFFFFF", radius: 8, use: "alt CTA" }
+    button-outline: { type: button, fg: "#ED872D", radius: 8, use: "transparent, 1px #ED872D border" }
+    card: { type: card, bg: "#FFFFFF", radius: 16, padding: "24px 20px", use: "subtle 12px shadow" }
+    section-banner: { type: card, bg: "#00C896", radius: 24, padding: "64px 106px", use: "Consult banner" }
+    tag-mint: { type: badge, bg: "#EDF9F6", radius: 6, padding: "8px", font: "14px/500", use: "mint tag" }
 ---
 
 # Classting

package/web/references/classum/DESIGN.md

@@ -11,6 +11,49 @@ logo:
   slug: "https://www.google.com/s2/favicons?domain=classum.com&sz=256"
 verified: "2026-05-15"
 omd: "0.1"
+tokens:
+  source: prose-derived
+  extracted: "2026-06-08"
+  colors:
+    primary: "#ff4438"
+    brand: "#ff4438"
+    canvas: "#f6f6f9"
+    surface: "#ffffff"
+    subtle: "#f0f2f8"
+    hero-dark: "#06080d"
+    foreground: "#232334"
+    body: "#49495a"
+    muted: "#666b80"
+    inert: "#758696"
+    hairline: "#b5b9c8"
+    on-primary: "#ffffff"
+    accent-sky: "#0a84ff"
+    accent-cobalt: "#243ce7"
+    accent-violet: "#a567e4"
+    accent-teal: "#00c3d0"
+    success: "#34c759"
+    warning: "#ffb020"
+    danger: "#ff4438"
+  typography:
+    family: { sans: "Pretendard Variable" }
+    hero-h1:   { size: 52, weight: 700, lineHeight: 1.4, use: "Hero H1 on inverted dark band" }
+    cta:       { size: 15, weight: 600, lineHeight: 1.5, use: "Primary button label" }
+    nav:       { size: 14, weight: 400, lineHeight: 1.43, use: "Nav link" }
+    body:      { size: 14, weight: 400, lineHeight: 1.43, use: "Body / default — Korean-density baseline" }
+    caption:   { size: 12, weight: 500, use: "Illustration / display captions" }
+  spacing: { xs: 4, sm: 8, md: 16, base: 16, lg: 24, xl: 32, xxl: 48, section: 80 }
+  rounded: { xs: 4, sm: 8, md: 16, lg: 20, xl: 30, full: 9999 }
+  shadow:
+    none: "none"
+    float: "rgba(0,0,0,0.08) 0px 8px 24px"
+  components_harvested: true
+  components:
+    button-primary: { type: button, bg: "#ff4438", fg: "#ffffff", radius: 8, padding: "6px 16px", font: "15/600", use: "Primary CTA — signal red fill, no shadow" }
+    button-secondary: { type: button, bg: "#ffffff", fg: "#232334", use: "Outline or text-only link, paired right of primary" }
+    nav: { type: tab, fg: "#232334", font: "14/400", use: "Horizontal menu, sticky on scroll, red 도입 문의 CTA right-aligned" }
+    card: { type: card, bg: "#ffffff", radius: 20, use: "White surface on lavender canvas, no border/shadow — bg contrast defines boundary" }
+    pill: { type: badge, radius: 9999, use: "Chip for feature tags and 신규 status markers" }
+    footer: { type: card, bg: "#06080d", fg: "#ffffff", use: "Dark band, white type, social icons + app-store badges + legal links" }
 ---
 
 # Design System Inspiration of Classum (클라썸)

package/web/references/claude/DESIGN.md

@@ -10,6 +10,72 @@ logo:
   slug: anthropic
 verified: "2026-05-15"
 omd: "0.1"
+tokens:
+  source: prose-derived
+  extracted: "2026-06-08"
+  components_harvested: true
+  note: "primary = Terracotta Brand (#c96442) per primary_color, the only chromatic CTA; entire neutral palette is warm-toned (yellow-brown undertone). Components harvested live (TIER 2) via playwright getComputedStyle across anthropic.com /, /pricing, /news (2026-06-09); claude.ai app shell is JS-gated and not headless-inspectable, so app-surface components are capped to marketing-site evidence. One cool accent observed: the highlighted Max pricing card uses a blue-tinted border + shadow rgba(98,158,218,0.16) 0px 4px 20px."
+  colors:
+    primary: "#c96442"
+    primary-hover: "#d97757"
+    brand: "#c96442"
+    canvas: "#f5f4ed"
+    foreground: "#141413"
+    muted: "#87867f"
+    on-primary: "#faf9f5"
+    surface: "#faf9f5"
+    surface-sand: "#e8e6dc"
+    surface-dark: "#30302e"
+    body: "#5e5d59"
+    label: "#4d4c48"
+    on-dark: "#b0aea5"
+    hairline: "#f0eee6"
+    hairline-strong: "#e8e6dc"
+    accent-coral: "#d97757"
+    error: "#b53333"
+    focus: "#3898ec"
+    ring: "#d1cfc5"
+    foreground-deep: "#0f0f0e"
+    muted-strong: "#73726c"
+    accent-rose: "#c46686"
+  typography:
+    family: { sans: "Anthropic Sans", serif: "Anthropic Serif", mono: "Anthropic Mono" }
+    display-hero:    { size: 64, weight: 500, lineHeight: 1.10, use: "Hero headlines, book-title presence (serif)" }
+    section:         { size: 52, weight: 500, lineHeight: 1.20, use: "Feature section anchors (serif)" }
+    subheading-lg:   { size: 36, weight: 500, lineHeight: 1.30, use: "Secondary section markers (serif)" }
+    subheading:      { size: 32, weight: 500, lineHeight: 1.10, use: "Card titles, feature names (serif)" }
+    subheading-sm:   { size: 25, weight: 500, lineHeight: 1.20, use: "Smaller section titles (serif)" }
+    feature-title:   { size: 21, weight: 500, lineHeight: 1.20, use: "Small feature headings (serif)" }
+    body-serif:      { size: 17, weight: 400, lineHeight: 1.60, use: "Editorial serif body passages" }
+    body-lg:         { size: 20, weight: 400, lineHeight: 1.60, use: "Intro paragraphs (sans)" }
+    body-nav:        { size: 17, weight: 400, lineHeight: 1.60, use: "Navigation links, UI text (sans)" }
+    body:            { size: 16, weight: 400, lineHeight: 1.60, use: "Standard body, button text (sans)" }
+    body-sm:         { size: 15, weight: 400, lineHeight: 1.60, use: "Compact body text (sans)" }
+    caption:         { size: 14, weight: 400, lineHeight: 1.43, use: "Metadata, descriptions (sans)" }
+    label:           { size: 12, weight: 500, lineHeight: 1.25, tracking: 0.12, use: "Badges, small labels (sans)" }
+    overline:        { size: 10, weight: 400, lineHeight: 1.60, tracking: 0.5, use: "Uppercase overline labels (sans)" }
+    code:            { size: 15, weight: 400, lineHeight: 1.60, tracking: -0.32, use: "Inline code, terminal (mono)" }
+  spacing: { xs: 4, sm: 8, md: 16, base: 16, lg: 24, xl: 32, xxl: 48, section: 80 }
+  rounded: { sm: 4, md: 8, lg: 16, xl: 32, full: 9999 }
+  shadow:
+    whisper: "rgba(0,0,0,0.05) 0px 4px 24px"
+    ring: "0px 0px 0px 1px #d1cfc5"
+  components:
+    button-primary: { type: button, bg: "#c96442", fg: "#faf9f5", radius: "8-12px", shadow: "ring #c96442 0px 0px 0px 1px", use: "Peak brand CTA — the only chromatic button" }
+    button-dark-cta: { type: button, bg: "#0f0f0e", fg: "#faf9f5", radius: "8px (split-pill 8/0/0/8 when paired)", padding: "8px 16px", height: "36px", font: "15px / 400", use: "Default marketing CTA — dark-on-warm 'Try Claude'" }
+    button-secondary: { type: button, bg: "#e8e6dc", fg: "#4d4c48", radius: "8px", padding: "0px 12px 0px 8px", shadow: "ring #e8e6dc 0px 0px 0px 0px, #d1cfc5 0px 0px 0px 1px", use: "Workhorse interactive surface — warm, unassuming" }
+    button-outline: { type: button, bg: "#f5f4ed", fg: "#73726c", border: "1px solid #d1cfc5", radius: "8px", padding: "8px 16px 8px 24px", height: "40px", font: "serif label", use: "Quiet 'See more' affordance on light sections" }
+    button-dark: { type: button, bg: "#141413", fg: "#b0aea5", border: "1px solid #30302e", radius: "12px", padding: "9.6px 16.8px", use: "Dark-theme button variant" }
+    segmented-tab: { type: tab, bg: "#ffffff", active: "text #141413", radius: "12px", padding: "8px 16px", height: "40px", font: "20px Anthropic Sans", use: "Individual / Teams plan switcher on /pricing" }
+    card: { type: card, bg: "#faf9f5", border: "1px solid #f0eee6", radius: "8-16px", shadow: "whisper rgba(0,0,0,0.05) 0px 4px 24px", use: "Generic card & container" }
+    pricing-card: { type: card, bg: "#ffffff", border: "1px solid #f0eee6", radius: "24px", padding: "32px", use: "Free / Pro plan containers — flat, clean" }
+    pricing-card-featured: { type: card, bg: "#ffffff", border: "blue-tinted rgba(106,155,204,0.2)", radius: "24px", padding: "32px", shadow: "cool glow rgba(98,158,218,0.16) 0px 4px 20px", use: "Max upsell plan — the one deliberate cool accent" }
+    prompt-suggestion-card: { type: card, bg: "#141413", fg: "#87867f", border: "1px solid #30302e", radius: "12px", padding: "8px", use: "Write / Learn / Code starter cards in dark chat mock" }
+    news-feature-card: { type: card, bg: "#c46686", fg: "#141413", radius: "16px", padding: "40px", font: "serif headline", shadow: "layered soft rgba(0,0,0,0.04) 0px 1px 1px, rgba(0,0,0,0.06) 0px 4px 4px, rgba(0,0,0,0.08) 0px 16px 24px", use: "Editorial /news hero — chromatic, non-interactive" }
+    input-search: { type: input, bg: "#ffffff", fg: "#141413", border: "1px solid #d1cfc5", radius: "12px", padding: "8px 16px 8px 40px", height: "44px", font: "14px Anthropic Sans", use: "Clean rounded search field, 44px touch target" }
+    input: { type: input, fg: "#141413", radius: "12px", focus: "ring border #3898ec — the only cool color moment", use: "General text input" }
+    nav: { type: card, bg: "#faf9f5", height: "68px", padding: "16px vertical", fg: "#0f0f0e", font: "serif wordmark, links 16-20px", hover: "text shifts to foreground-primary, no decoration", use: "Top nav / header with Try Claude CTA" }
+    footer: { type: card, bg: "#141413", fg: "#b0aea5", font: "12px Anthropic Sans, 24px line-height", use: "Closing dark band — Ivory #faf9f5 headings, warm-silver links" }
 ---
 
 # Design System Inspiration of Claude (Anthropic)
@@ -37,6 +103,8 @@ What makes Claude's design truly distinctive is its warm neutral palette. Every
 - **Anthropic Near Black** (`#141413`): The primary text color and dark-theme surface — not pure black but a warm, almost olive-tinted dark that's gentler on the eyes. The warmest "black" in any major tech brand.
 - **Terracotta Brand** (`#c96442`): The core brand color — a burnt orange-brown used for primary CTA buttons, brand moments, and the signature accent. Deliberately earthy and un-tech.
 - **Coral Accent** (`#d97757`): A lighter, warmer variant of the brand color used for text accents, links on dark surfaces, and secondary emphasis.
+- **Foreground Deep** (`#0f0f0e`): The deepest near-black, measured live on the `/news` "Try Claude" CTA fill and nav links — a touch darker than the standard Near Black, used where maximum-contrast dark fills are wanted.
+- **Accent Rose** (`#c46686`): A muted dusty-rose, measured on the featured news hero card — a rare chromatic surface that sits beside Terracotta in the warm family without competing with it for CTA signal.
 
 ### Secondary & Accent
 - **Error Crimson** (`#b53333`): A deep, warm red for error states — serious without being alarming.
@@ -54,6 +122,7 @@ What makes Claude's design truly distinctive is its warm neutral palette. Every
 - **Charcoal Warm** (`#4d4c48`): Button text on light warm surfaces — the go-to dark-on-light text.
 - **Olive Gray** (`#5e5d59`): Secondary body text — a distinctly warm medium-dark gray.
 - **Stone Gray** (`#87867f`): Tertiary text, footnotes, and de-emphasized metadata.
+- **Muted Strong** (`#73726c`): A slightly deeper warm gray, measured on the `/news` "See more" outline-button label — used for muted-but-legible interactive text.
 - **Dark Warm** (`#3d3d3a`): Dark text links and emphasized secondary text.
 - **Warm Silver** (`#b0aea5`): Text on dark surfaces — a warm, parchment-tinted light gray.
 
@@ -107,93 +176,111 @@ What makes Claude's design truly distinctive is its warm neutral palette. Every
 
 ## 4. Component Stylings
 
-### Buttons
+*Specs below are grounded in live `getComputedStyle` harvest (TIER 2) across anthropic.com `/`, `/pricing`, and `/news` (2026-06-09), supplemented by the documented warm-palette system. claude.ai's app shell is JS-gated and not headless-inspectable, so app-surface component specs are intentionally capped to what the marketing surfaces actually render. Components are grouped by role.*
 
-**Warm Sand (Secondary)**
-- Background: Warm Sand (`#e8e6dc`)
-- Text: Charcoal Warm (`#4d4c48`)
-- Padding: 0px 12px 0px 8px (asymmetric — icon-first layout)
-- Radius: comfortably rounded (8px)
-- Shadow: ring-based (`#e8e6dc 0px 0px 0px 0px, #d1cfc5 0px 0px 0px 1px`)
-- The workhorse button — warm, unassuming, clearly interactive
-
-**White Surface**
-- Background: Pure White (`#ffffff`)
-- Text: Anthropic Near Black (`#141413`)
-- Padding: 8px 16px 8px 12px
-- Radius: generously rounded (12px)
-- Hover: shifts to secondary background color
-- Clean, elevated button for light surfaces
-
-**Dark Charcoal**
-- Background: Dark Surface (`#30302e`)
+### Actions
+
+**Dark CTA — "Try Claude"** *(measured, `/news`)*
+- Background: Foreground Deep (`#0f0f0e`)
 - Text: Ivory (`#faf9f5`)
-- Padding: 0px 12px 0px 8px
-- Radius: comfortably rounded (8px)
-- Shadow: ring-based (`#30302e 0px 0px 0px 0px, ring 0px 0px 0px 1px`)
-- The inverted variant for dark-on-light emphasis
+- Radius: comfortably rounded (8px) — rendered as a split-pill (`8px 0px 0px 8px`) when paired with an adjacent secondary action
+- Padding: 8px 16px · Height: 36px · Font: Anthropic Sans 15px / 400
+- The default marketing CTA — dark-on-warm, not terracotta. Terracotta is reserved for the highest-signal brand moments.
 
 **Brand Terracotta**
-- Background: Terracotta Brand (`#c96442`)
-- Text: Ivory (`#faf9f5`)
-- Radius: 8–12px
-- Shadow: ring-based (`#c96442 0px 0px 0px 0px, #c96442 0px 0px 0px 1px`)
-- The primary CTA — the only button with chromatic color
+- Background: Terracotta Brand (`#c96442`) · Text: Ivory (`#faf9f5`)
+- Radius: 8–12px · Shadow: ring-based (`#c96442 0px 0px 0px 1px`)
+- The only button with chromatic color — used for peak brand CTAs.
+
+**Outline / Ghost — "See more"** *(measured, `/news`)*
+- Background: Parchment (`#f5f4ed`) · Text: Muted Strong (`#73726c`)
+- Border: 1px solid Ring Warm (`#d1cfc5`) · Radius: 8px
+- Padding: 8px 16px 8px 24px (asymmetric, label-then-icon) · Height: 40px · Serif label
+- The quiet "show more" affordance on light sections.
+
+**Warm Sand (Secondary)**
+- Background: Warm Sand (`#e8e6dc`) · Text: Charcoal Warm (`#4d4c48`)
+- Padding: 0px 12px 0px 8px (asymmetric — icon-first) · Radius: 8px
+- Shadow: ring-based (`#e8e6dc 0px 0px 0px 0px, #d1cfc5 0px 0px 0px 1px`)
+- The workhorse interactive surface — warm, unassuming.
 
 **Dark Primary**
-- Background: Anthropic Near Black (`#141413`)
-- Text: Warm Silver (`#b0aea5`)
-- Padding: 9.6px 16.8px
-- Radius: generously rounded (12px)
-- Border: thin solid Dark Surface (`1px solid #30302e`)
-- Used on dark theme surfaces
-
-### Cards & Containers
-- Background: Ivory (`#faf9f5`) or Pure White (`#ffffff`) on light surfaces; Dark Surface (`#30302e`) on dark
-- Border: thin solid Border Cream (`1px solid #f0eee6`) on light; `1px solid #30302e` on dark
-- Radius: comfortably rounded (8px) for standard cards; generously rounded (16px) for featured; very rounded (32px) for hero containers and embedded media
-- Shadow: whisper-soft (`rgba(0,0,0,0.05) 0px 4px 24px`) for elevated content
-- Ring shadow: `0px 0px 0px 1px` patterns for interactive card states
-- Section borders: `1px 0px 0px` (top-only) for list item separators
-
-### Inputs & Forms
-- Text: Anthropic Near Black (`#141413`)
-- Padding: 1.6px 12px (very compact vertical)
-- Border: standard warm borders
-- Focus: ring with Focus Blue (`#3898ec`) border-color — the only cool color moment
-- Radius: generously rounded (12px)
+- Background: Anthropic Near Black (`#141413`) · Text: Warm Silver (`#b0aea5`)
+- Padding: ~9.6px 16.8px · Radius: 12px · Border: 1px solid Dark Surface (`#30302e`)
+- The dark-theme button variant.
 
 ### Navigation
-- Sticky top nav with warm background
-- Logo: Claude wordmark in Anthropic Near Black
-- Links: mix of Near Black (`#141413`), Olive Gray (`#5e5d59`), and Dark Warm (`#3d3d3a`)
-- Nav border: `1px solid #30302e` (dark) or `1px solid #f0eee6` (light)
-- CTA: Terracotta Brand button or White Surface button
-- Hover: text shifts to foreground-primary, no decoration
+
+**Top Nav / Header** *(measured)*
+- Background: Ivory (`#faf9f5`) · Height: 68px · Vertical padding: 16px
+- Logo: Claude wordmark in Foreground Deep (`#0f0f0e`)
+- Links: Foreground Deep (`#0f0f0e`) / Olive Gray (`#5e5d59`), serif at 16–20px
+- CTA slot: Dark CTA or Terracotta button · Hover: text shifts to foreground-primary, no decoration
+
+**Footer** *(measured, homepage)*
+- Surface: Anthropic Near Black (`#141413`) full-bleed dark band
+- Headings: Ivory (`#faf9f5`) · Links: Warm Silver (`#b0aea5`) at 12px Anthropic Sans, 24px line-height
+- The closing dark "chapter" of the page.
+
+### Forms
+
+**Search Input** *(measured, `/news`)*
+- Background: Pure White (`#ffffff`) · Text: Anthropic Near Black (`#141413`)
+- Border: 1px solid Ring Warm (`#d1cfc5`) · Radius: 12px
+- Padding: 8px 16px 8px 40px (left-inset for leading search icon) · Height: 44px · Font: Anthropic Sans 14px
+- A clean rounded field — touch-target-sized at 44px.
+
+**Text Input (general)**
+- Text: Anthropic Near Black (`#141413`) · Radius: 12px
+- Focus: ring with Focus Blue (`#3898ec`) border-color — the only cool color moment in the system.
+
+**Segmented Tab — Plan switcher** *(measured, `/pricing`)*
+- Background: Pure White (`#ffffff`) · Text: Anthropic Near Black (`#141413`)
+- Radius: 12px · Padding: 8px 16px · Height: 40px · Font: Anthropic Sans 20px
+- The Individual / Teams plan toggle at the top of pricing.
+
+### Data display
+
+**Pricing Card** *(measured, `/pricing`)*
+- Background: Pure White (`#ffffff`) · Border: 1px solid Border Cream (`#f0eee6`)
+- Radius: 24px (highly rounded) · Padding: 32px · No shadow at rest
+- The Free / Pro plan containers — flat, clean, generously rounded.
+
+**Featured Pricing Card — "Max"** *(measured, `/pricing`)*
+- Background: Pure White (`#ffffff`) · Radius: 24px · Padding: 32px
+- Border: blue-tinted (`rgba(106,155,204,0.2)`) · Shadow: cool glow `rgba(98,158,218,0.16) 0px 4px 20px`
+- The single deliberate cool accent in the system — used only to mark the upsell plan, never as a brand color.
+
+**Prompt Suggestion Card** *(measured, `/pricing` chat preview)*
+- Background: Anthropic Near Black (`#141413`) · Text: Stone Gray (`#87867f`)
+- Border: 1px solid Dark Surface (`#30302e`) · Radius: 12px · Padding: 8px
+- The Write / Learn / Code starter cards inside the dark chat mock.
+
+**News Feature Card** *(measured, `/news` hero)*
+- Background: Accent Rose (`#c46686`) · Text: Anthropic Near Black (`#141413`)
+- Radius: 16px · Padding: 40px · Serif headline
+- Shadow: layered soft drop (`rgba(0,0,0,0.04) 0px 1px 1px, rgba(0,0,0,0.06) 0px 4px 4px, rgba(0,0,0,0.08) 0px 16px 24px`)
+- A rare chromatic surface — editorial, not interactive.
+
+**Generic Card & Container**
+- Background: Ivory (`#faf9f5`) / Pure White (`#ffffff`) on light; Dark Surface (`#30302e`) on dark
+- Border: 1px solid Border Cream (`#f0eee6`) light; 1px solid `#30302e` dark
+- Radius: 8px standard, 16px featured, 24–32px hero/media
+- Shadow: whisper (`rgba(0,0,0,0.05) 0px 4px 24px`); section separators use top-only `1px 0px 0px` borders.
 
 ### Image Treatment
-- Product screenshots showing the Claude chat interface
-- Generous border-radius on media (16–32px)
-- Embedded video players with rounded corners
-- Dark UI screenshots provide contrast against warm light canvas
-- Organic, hand-drawn illustrations for conceptual sections
+- Product screenshots of the Claude chat interface; generous radius on media (16–32px)
+- Embedded video players with rounded corners; dark UI screenshots contrast the warm canvas
+- Organic, hand-drawn illustrations in terracotta, black, and muted green for conceptual sections
 
 ### Distinctive Components
 
-**Model Comparison Cards**
-- Opus 4.5, Sonnet 4.5, Haiku 4.5 presented in a clean card grid
-- Each model gets a bordered card with name, description, and capability badges
-- Border Warm (`#e8e6dc`) separation between items
-
 **Organic Illustrations**
 - Hand-drawn-feeling vector illustrations in terracotta, black, and muted green
-- Abstract, conceptual rather than literal product diagrams
-- The primary visual personality — no other AI company uses this style
+- Abstract, conceptual rather than literal — the primary visual personality.
 
 **Dark/Light Section Alternation**
-- The page alternates between Parchment light and Near Black dark sections
-- Creates a reading rhythm like chapters in a book
-- Each section feels like a distinct environment
+- The page alternates Parchment light and Near Black dark sections, creating chapter-like reading rhythm. Each section reads as a distinct environment.
 
 ## 5. Layout Principles
 

package/web/references/clay/DESIGN.md

@@ -15,6 +15,62 @@ ds:
   url: "https://www.clay.com/press"
   type: brand
   description: Clay's official press kit and co-branding guidelines.
+tokens:
+  source: prose-derived
+  extracted: "2026-06-08"
+  note: "primary = live interactive/text Clay Black (#000000, Tier 1); brand = Lemon-gold marketing swatch (#fbbd41). primary_color field #ffd23f is the press-kit gold, not present verbatim in prose."
+  colors:
+    primary: "#000000"
+    brand: "#fbbd41"
+    canvas: "#faf9f7"
+    foreground: "#000000"
+    muted: "#9f9b93"
+    on-primary: "#ffffff"
+    surface: "#ffffff"
+    hairline: "#dad4c8"
+    body: "#55534e"
+    link: "#333333"
+    accent-matcha: "#078a52"
+    accent-slushie: "#3bd3fd"
+    accent-lemon: "#fbbd41"
+    accent-ube: "#43089f"
+    accent-pomegranate: "#fc7981"
+    accent-blueberry: "#01418d"
+    error: "#ef4444"
+    badge-bg: "#f0f8ff"
+    badge-text: "#3859f9"
+  typography:
+    family: { sans: "Roobert", mono: "Space Mono" }
+    display-hero:      { size: 80, weight: 600, lineHeight: 1.00, tracking: -3.2, use: "Hero headlines, all 5 stylistic sets" }
+    display-secondary: { size: 60, weight: 600, lineHeight: 1.00, tracking: -2.4, use: "Secondary hero headlines" }
+    section:           { size: 44, weight: 600, lineHeight: 1.10, tracking: -1.32, use: "Section headings" }
+    card-heading:      { size: 32, weight: 600, lineHeight: 1.10, tracking: -0.64, use: "Card headings" }
+    feature-title:     { size: 20, weight: 600, lineHeight: 1.40, tracking: -0.4, use: "Feature titles" }
+    subheading:        { size: 20, weight: 500, lineHeight: 1.50, tracking: -0.16, use: "Sub-headings, no ss01" }
+    body-large:        { size: 20, weight: 400, lineHeight: 1.40, use: "Large body text" }
+    body:              { size: 18, weight: 400, lineHeight: 1.60, tracking: -0.36, use: "Relaxed body text" }
+    body-standard:     { size: 16, weight: 400, lineHeight: 1.50, use: "Standard reading text" }
+    button:            { size: 16, weight: 500, lineHeight: 1.50, tracking: -0.16, use: "Button label" }
+    button-large:      { size: 24, weight: 400, lineHeight: 1.50, use: "Large button label" }
+    nav-link:          { size: 15, weight: 500, lineHeight: 1.60, use: "Navigation links" }
+    caption:           { size: 14, weight: 400, lineHeight: 1.50, tracking: -0.14, use: "Captions" }
+    small:             { size: 12, weight: 400, lineHeight: 1.50, use: "Small text" }
+    uppercase-label:   { size: 12, weight: 600, lineHeight: 1.20, tracking: 1.08, use: "Uppercase wayfinding labels" }
+    badge:             { size: 9.6, weight: 600, use: "Pill badges" }
+  spacing: { xs: 4, sm: 8, md: 16, base: 16, lg: 24, xl: 32, xxl: 48, section: 64 }
+  rounded: { sm: 4, md: 8, badge: 11, card: 12, feature: 24, section: 40, full: 1584 }
+  shadow:
+    clay: "rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px 1px inset, rgba(0,0,0,0.05) 0px -0.5px 1px"
+    hard-offset: "rgb(0,0,0) -7px 7px"
+  components_harvested: true
+  components:
+    button-primary: { type: button, fg: "#000000", use: "Transparent fill, black text, hover rotateZ(-8deg) + hard offset shadow" }
+    button-white-solid: { type: button, bg: "#ffffff", fg: "#000000", radius: 12, use: "White fill, animated rotation hover — CTA on colored sections" }
+    button-ghost: { type: button, fg: "#000000", radius: 4, use: "Transparent fill, 1px border, dragonfruit hover" }
+    card: { type: card, bg: "#ffffff", radius: 12, use: "White surface on cream, 1px solid #dad4c8 oat border, multi-layer clay shadow with inset highlight" }
+    swatch-section: { type: card, use: "Full-width swatch-colored background (matcha/slushie/ube/lemon), white or black text by contrast" }
+    dashed-border: { type: card, use: "1px dashed #dad4c8 for secondary/decorative containers — hand-drawn craft quality" }
+    uppercase-label: { type: badge, fg: "#000000", font: "12/600", use: "Uppercase, 1.08px tracking — wayfinding system" }
 ---
 
 # Design System Inspiration of Clay

package/web/references/clickhouse/DESIGN.md

@@ -15,6 +15,56 @@ ds:
   url: "https://clickhouse.design"
   type: system
   description: ClickHouse brand hub plus the Click UI design system and component library.
+tokens:
+  source: prose-derived
+  extracted: "2026-06-08"
+  note: "primary = live interactive Neon Volt (#faff69); brand = documented logo/marketing yellow (#fff100)"
+  colors:
+    primary: "#faff69"
+    primary-hover: "#f4f692"
+    brand: "#fff100"
+    canvas: "#000000"
+    foreground: "#ffffff"
+    muted: "#a0a0a0"
+    on-primary: "#151515"
+    surface: "#141414"
+    surface-hover: "#3a3a3a"
+    hairline: "#414141"
+    hairline-deep: "#343434"
+    cta-green: "#166534"
+    cta-green-dark: "#14572f"
+    active: "#f4f692"
+    border-olive: "#4f5100"
+    olive-dark: "#161600"
+  typography:
+    family: { sans: "Inter", display: "Basier", mono: "Inconsolata" }
+    display-mega:    { size: 96, weight: 900, lineHeight: 1.00, use: "Hero headline, maximum impact extra-heavy" }
+    display-hero:    { size: 72, weight: 700, lineHeight: 1.00, use: "Section hero titles" }
+    feature-heading: { size: 36, weight: 600, lineHeight: 1.30, use: "Feature section anchors (Basier)" }
+    subheading:      { size: 24, weight: 600, lineHeight: 1.17, use: "Card headings" }
+    feature-title:   { size: 20, weight: 600, lineHeight: 1.40, use: "Small feature titles" }
+    body-lg:         { size: 18, weight: 400, lineHeight: 1.56, use: "Intro paragraphs, button text" }
+    body:            { size: 16, weight: 400, lineHeight: 1.50, use: "Standard body, nav, buttons" }
+    caption:         { size: 14, weight: 400, lineHeight: 1.43, use: "Metadata, descriptions, links" }
+    uppercase-label: { size: 14, weight: 600, lineHeight: 1.43, tracking: 1.4, use: "Section overlines, wide-tracked uppercase" }
+    code:            { size: 16, weight: 600, lineHeight: 1.50, use: "Code blocks, commands (Inconsolata)" }
+    small:           { size: 12, weight: 500, lineHeight: 1.33, use: "Smallest text" }
+    micro:           { size: 11.2, weight: 500, lineHeight: 1.79, use: "Tags, tiny labels" }
+  spacing: { xs: 4, sm: 8, md: 16, base: 16, lg: 24, xl: 32, xxl: 48, section: 64 }
+  rounded: { sm: 4, md: 8, full: 9999 }
+  shadow:
+    subtle: "rgba(0,0,0,0.1) 0px 1px 3px, rgba(0,0,0,0.1) 0px 1px 2px -1px"
+    elevated: "rgba(0,0,0,0.1) 0px 10px 15px -3px, rgba(0,0,0,0.1) 0px 4px 6px -4px"
+    inset: "rgba(0,0,0,0.06) 0px 4px 4px, rgba(0,0,0,0.14) 0px 4px 25px inset"
+  components_harvested: true
+  components:
+    button-neon-primary: { type: button, bg: "#faff69", fg: "#151515", radius: 4, padding: "0px 16px", use: "Neon Volt fill; hover darkens, active text pale yellow" }
+    button-dark-solid: { type: button, bg: "#141414", fg: "#ffffff", radius: 4, padding: "12px 16px", use: "Near-black fill; hover #3a3a3a" }
+    button-forest-green: { type: button, bg: "#166534", fg: "#ffffff", use: "Forest green fill — primary conversion CTA" }
+    button-ghost: { type: button, fg: "#ffffff", radius: 4, use: "Transparent fill, 1px solid #4f5100 olive border" }
+    card: { type: card, bg: "#141414", radius: 4, use: "Near-black surface, 1px charcoal border" }
+    card-neon-highlight: { type: card, bg: "#141414", radius: 4, use: "Dark card with 1px solid #faff69 neon border for featured/selected treatment" }
+    performance-stat: { type: card, fg: "#faff69", use: "Oversized number 72px+ weight 700-900, neon accents, brief description beneath" }
 ---
 
 # Design System Inspiration of ClickHouse