Skip to content

Brand Library 110

Jump to bottom
Laith0003 edited this page May 28, 2026 · 1 revision

Brand Library — the 110 brand DESIGN.md specs

data/brands/ holds 110 individual brand DESIGN.md specs as JSON files. Each one is a forensic read of a real-world brand surface — Stripe, Apple, Linear, Anthropic, Pitchfork, Ferrari — captured as queryable structured data the engine pipes into recommendations. None of the top 8 Claude UX skills ship a single brand spec. We ship 110.

This page covers what a brand spec contains, the 7 categories, the 14 brand specimens shown on the homepage, how the recommender uses brand specs, and how to add a new one.

For the broader engine, see Architecture. For how recommendations attach brand exemplars, see Recommender Engine.

What a brand spec contains

Each file is one JSON object at data/brands/<id>.json. Eight fields, all required, no optional fluff.

Field Type What it holds
id string kebab-case identifier (stripe, apple, bmw-m, linear.app). Stable across versions.
name string Human-readable name (Stripe, Apple, BMW M, Linear). Used in rationale strings.
category string One of the 7 categories below. Used by recommender filtering and homepage grouping.
year_observed int When the spec was captured. Brand surfaces evolve; the year is the truth-claim window.
philosophy string One paragraph on what the brand's design language is actually trying to do. Not marketing copy — a forensic read.
design_language object Concrete tokens: type (display / body / mono), color_primary, color_canvas, color_ink, color_accent, radius (array), spacing (e.g. "4-based"), motion_signature
trademark_signals string[] 4-6 specific, observable, copy-paste-distinguishable things. "Gradient-mesh backdrop on every marketing hero — cream/orange/lavender/indigo/ruby horizontally washed across the upper third." Not "uses gradients."
components_observed string[] Named components seen across the brand's surface. nav-bar-on-mesh, button-primary-pill, card-feature-light. Used to seed the component lane when this brand is an exemplar.
exemplar_pages string[] URLs that ground the spec. stripe.com/payments, anthropic.com/research. The reader can verify the claims.
ai_slop_avoided string[] Explicit don't-do rules derived from the brand's discipline. "Don't bump display weight above 300." "Don't paint the canvas pure white. The putty tint IS the corporate brand differentiator."
source_md string Pointer to the underlying Markdown source at references/brands/<id>-DESIGN.md.

This is the schema the engine consumes. It's the schema you'd write if you were briefing a senior designer who had never seen the brand — concrete tokens, the trademark signals nobody else captures, and the don't-do list that's specific to this brand and no other.

A real example — Anthropic

{
  "id": "anthropic",
  "name": "Anthropic",
  "category": "AI / ML Platform",
  "year_observed": 2026,
  "philosophy": "An inspired interpretation of Anthropic's corporate-research brand language — the company surface (anthropic.com) sister to the Claude product, but tuned for research papers, policy posts, and hiring rather than for trying a chat product. The brand reads as a literary technology publisher: warm putty canvas, Tiempos serif at every display tier, narrow editorial column widths, a thin red-clay accent kept almost entirely in reserve.",
  "design_language": {
    "type": { "display": "Tiempos Headline", "body": "Styrene B", "mono": "JetBrains Mono" },
    "color_primary": "#191919",
    "color_canvas": "#f0eee6",
    "color_ink": "#191919",
    "color_accent": "#cc785c",
    "radius": [0, 4, 8],
    "spacing": "8-based",
    "motion_signature": "Almost-no-motion — quiet 200ms ease-out fades on link hovers; research-page entries reveal at a 600ms scroll-fade without translate."
  },
  "trademark_signals": [
    "Warm putty canvas (#f0eee6) across every page — the brand's most-recognized chrome cue, deliberately not Claude's cream and deliberately not OpenAI's white",
    "Tiempos Headline serif at all display tiers (weight 400, never bold) with negative letter-spacing — research-paper voice, never SaaS-marketing voice",
    "Narrow editorial body column (~640px) and generous line-height 1.6 — the page reads as a long-form essay, not a landing page",
    "Red-clay accent (#cc785c) appears only on inline article hyperlinks and the radial-spike Anthropic glyph; never a button fill, never a hero gradient",
    "Square or near-square buttons (0px or 4px radius) — refuses the pill geometry every other AI brand uses"
  ],
  "components_observed": [...],
  "exemplar_pages": ["anthropic.com", "anthropic.com/research", ...],
  "ai_slop_avoided": [
    "Don't paint the canvas pure white. The putty tint IS the corporate brand differentiator from Claude (cream) and OpenAI (white)",
    "Don't use Tiempos at weight 700. Display weight is locked at 400 — the elegance is the typeface, not the weight",
    ...
  ],
  "source_md": "references/brands/anthropic-DESIGN.md"
}

The hex values are real. The "putty canvas, not pure white" call is the kind of distinction a senior designer would catch and an LLM would otherwise miss.

The 7 categories

110 brands split across 7 top-level categories:

Category Count Representative brands
Developer Tools 36 Vercel, Linear, Supabase, Resend, Cursor, Raycast, Framer, Sentry, Datadog, MongoDB, HashiCorp, ClickHouse, Snowflake, Sourcegraph, Webflow, Sanity
Consumer / Lifestyle / Retail 19 Apple, Airbnb, Allbirds, Nike, Patagonia, Aesop, Glossier, Spotify, Pinterest, Starbucks, Uber, TikTok, Instagram, Shopify, HP, Hims & Hers
Fintech / Crypto 14 Stripe, Ramp, Mercury, Brex, Monzo, N26, Wise, Revolut, Robinhood, Plaid, Coinbase, Mastercard, Binance, Kraken
Editorial / Media 13 The Atlantic, The Economist, Bloomberg, The New York Times, Wired, The Wall Street Journal, Dezeen, Pitchfork, Substack, NVIDIA, The Verge, Vodafone, Clay
AI / ML Platform 12 Anthropic, Claude, OpenAI, Cohere, Mistral AI, Perplexity, ElevenLabs, Together AI, MiniMax, Runway, VoltAgent, xAI
Productivity / Collaboration 8 Notion, Linear (linear.app product), Figma, Airtable, Miro, Cal.com, Intercom, Zapier
Automotive 8 Tesla, BMW, BMW M, Ferrari, Lamborghini, Bugatti, Renault, SpaceX

Counts add to 110. The skew toward Developer Tools (33%) reflects where Claude Code users are actually shipping — most ux-skill installs are inside developer-facing products, not consumer brands.

The categories are coarse on purpose. "Fintech / Crypto" includes Stripe (payments infrastructure), Coinbase (consumer crypto exchange), and Mercury (B2B banking) — three very different brands sharing one constraint: financial trust. The category exists so the recommender can pre-filter by "show me brands in this space," not as a taxonomy lecture.

The 14 brand specimens on the homepage

The marketing site at uxskill.laithjunaidy.com shows 14 brand specimens — a curated subset that spans the design-language range from quiet to loud, editorial to performance. Each specimen card carries the full design language (type, weight, tracking, palette) so a click on it can reskin the homepage in that brand's tokens.

Brand Category Distinctive trait
Apple Consumer / Lifestyle SF Pro Display at weight 600, negative tracking, the quietest dark surface in tech
Linear SaaS / Developer Tools Inter Tight at weight 700 on the deepest practical black, tabular numerics
Vercel SaaS / Developer Tools System-mono headlines, ASCII-art aesthetic, zero illustration, ink-on-canvas restraint
Stripe Fintech / Payments Switzer at weight 500, gradient-mesh backdrop on every hero, single-indigo CTA hierarchy
Figma Design Tools Plus-Jakarta at weight 600, multi-color logo palette as the brand's only chromatic license
Notion SaaS / Productivity Bricolage Grotesque at weight 700, illustration-heavy editorial voice
Spotify Consumer / Media Spotify Mix at weight 700, ultra-dark canvas, brand-green as the only highlight
Supabase SaaS / Developer Tools Inter at weight 600, emerald-green accent, terminal-flavored hero composition
Resend SaaS / Developer Tools Instrument Serif italic display, archive-binder aesthetic, editorial restraint on developer surface
Anthropic AI / ML Tiempos Headline serif at weight 400, warm putty canvas (#f0eee6), red-clay accent in reserve
OpenAI AI / ML Söhne weight 500, pure white canvas, monochrome with sparse green accents
Ferrari Automotive / Performance Ferrari Sans Serif at weight 800, red-on-yellow as the only color move that exists in their world
Pitchfork Media / Editorial Caslon italic display, magazine-stripped-down, score numbers as primary navigation
TikTok Consumer / Media Helvetica Now at weight 700, brand-cyan + brand-magenta as the chromatic signal, dense vertical-video layout

The picks span the gap intentionally. Apple is the quietest; Ferrari is the loudest. Anthropic is editorial-restrained; TikTok is consumer-loud. Pitchfork is magazine; Vercel is terminal. A user clicking through the 14 sees the full range of what's queryable in the catalog.

How the engine uses brand specs

The brands lane (_lane_brands in engine/recommender/core.py) returns five brand exemplars per recommendation:

def _lane_brands(style, industry):
    brands = load_brands()
    bias = set(industry.get("exemplars", []))
    ranked = sorted(brands, key=lambda b: (b.get("id") in bias, b.get("name", "")))
    return ranked[:5]

The industry profile carries an exemplars list — brand ids that are canonical for that industry. A fintech-neobank industry profile lists stripe, ramp, monzo, mercury, n26 as exemplars; the recommender pushes those to the top of the brand list. Anything outside the industry's exemplar list is alphabetically stable as a secondary sort key.

The LLM consumes the brand exemplars during generation. When the recommendation says "use Stripe as a brand exemplar," the LLM reads data/brands/stripe.json and gets:

  • The exact type pair Stripe uses (Söhne weight 300 on display, weight 400 on body).
  • The exact palette (deep navy #0d253d ink, electric indigo #533afd primary, white #ffffff canvas).
  • The gradient-mesh recipe (cream/orange/lavender/indigo/ruby horizontally washed).
  • The five trademark signals that would make a designer look at the output and say "this person actually studied Stripe."
  • The three explicit don'ts: don't bump display above weight 300, don't introduce new accent colors, don't use indigo as body text.

That's the difference between "this looks like a generic SaaS landing" and "this looks like the team actually knows what Stripe does." The brand specs are the moat.

How to add a new brand spec

Three files to touch.

1. Write data/brands/<id>.json

Use the schema above. Capture the brand forensically:

{
  "id": "my-brand",
  "name": "My Brand",
  "category": "Developer Tools",
  "year_observed": 2026,
  "philosophy": "One paragraph on what this brand's surface is actually doing. Not the marketing claim — the design read.",
  "design_language": {
    "type": { "display": "Geist", "body": "Geist", "mono": "Geist Mono" },
    "color_primary": "#0d0d0d",
    "color_canvas": "#ffffff",
    "color_ink": "#0d0d0d",
    "color_accent": "#00d9ff",
    "radius": [0, 4, 8, 12],
    "spacing": "4-based"
  },
  "trademark_signals": [
    "Specific observable thing 1",
    "Specific observable thing 2",
    "Specific observable thing 3",
    "Specific observable thing 4",
    "Specific observable thing 5"
  ],
  "components_observed": ["nav-on-canvas", "hero-monospace-headline", "..."],
  "exemplar_pages": ["mybrand.com", "mybrand.com/product"],
  "ai_slop_avoided": [
    "Don't do X. The Y is the brand differentiator.",
    "Don't bump weight above 500. The discipline is the typeface, not the weight."
  ],
  "source_md": "references/brands/my-brand-DESIGN.md"
}

The discipline: every trademark_signal should name something you can copy-paste-distinguish from another brand. "Uses dark mode" is not a signal. "Pure black #000000 canvas, never #0d0d0d, with a single off-white text color and zero shadow on any surface" is a signal.

2. Add to data/brands/_index.json 

{
  "brands": [
    ...,
    { "id": "my-brand", "name": "My Brand", "category": "Developer Tools" }
  ]
}

The _index.json is the lightweight catalog the marketing site and the recommender read first. Keep it in alphabetical order by id.

3. Write references/brands/my-brand-DESIGN.md

The Markdown source the JSON references via source_md. The Markdown is the readable longhand version — a senior designer's notes, with screenshots, hex tables, and the reasoning behind every trademark signal. The JSON is the queryable distillation.

Optional but recommended: open a PR. Brand specs that ship in the catalog are reviewed for forensic accuracy — "you said Söhne weight 300, but Stripe's actual hero uses weight 200 with optical-size variation." Getting the spec right is more important than getting it fast.

Why brand specs are the moat

The top 8 Claude UX skills on the marketplace ship zero brand specs. They ship style names ("SaaS Clean"), palette lists ("Midnight Blue"), motion presets ("Subtle Fade Up"). What they don't ship is grounded data — "this is what Linear actually does, this is what Stripe actually does, this is what Anthropic actually does, and here are the five things that make each look like themselves."

110 brand specs is the asymmetric move. Building one good brand spec takes about three hours of forensic study, screenshot capture, hex-picking, type-identification, and write-up. 110 specs is 330 hours of taste work compressed into a JSON catalog the LLM can read in one tool call. That's the difference between "this looks generic" and "this looks like the team actually knows."

The catalog is also the layer that makes ux-skill's recommendations specific instead of vague. The recommender doesn't say "use a fintech style." It says "use Stripe-style as the brand exemplar with these five trademark signals and these three don'ts." The LLM has somewhere concrete to anchor.

See also: Architecture · Recommender Engine · All 22 Commands Source: github.com/Laith0003/ux-skill/tree/main/data/brands Index: github.com/Laith0003/ux-skill/blob/main/data/brands/_index.json

Clone this wiki locally