@design-ai/cli 4.55.0

package/knowledge/patterns/brand-identity.md

@@ -0,0 +1,238 @@
+<!-- hand-written -->
+---
+title: Brand identity foundations
+applies_to: [brand, identity, logo, voice]
+version: 1.0.0
+last_updated: 2026-05
+stability: stable
+---
+
+# Brand identity
+
+design-ai consumes brand inputs (colors, fonts, voice) to make design choices. This file covers the **brand fundamentals** every product design touches — even if you're not designing the brand itself.
+
+## What brand identity contains
+
+Brand identity is roughly 5 layers, from most-visible to least:
+
+| Layer | Examples |
+| --- | --- |
+| **Logo** | Wordmark, lettermark, symbol, combination |
+| **Color** | Primary, accent, neutrals (the palette your product uses) |
+| **Typography** | Brand font(s) — used in marketing AND product |
+| **Voice / tone** | How you write — playful vs serious, polite vs casual |
+| **Imagery / illustration** | Photo style, illustration system, iconography |
+
+A "brand guideline" document covers all five.
+
+## Logo — fundamentals
+
+design-ai doesn't generate logos but specs how they're used. Common rules:
+
+### Anatomy
+
+```
+Lettermark:        Wordmark:           Symbol:           Combination:
+   [T]                Toss               [○]                [○] Toss
+                                                              brand
+```
+
+| Type | Use |
+| --- | --- |
+| **Lettermark** | Single letter (KakaoBank's "K", Toss's "T"). Compact, memorable. |
+| **Wordmark** | Just the company name styled. (Google, Coupang) |
+| **Symbol** | No text. Recognizable enough alone. (Apple's apple) |
+| **Combination** | Symbol + wordmark. Most flexible. |
+
+For Korean apps: lettermarks are common (한 글자 — K, T, N) due to Hangul/Latin compatibility.
+
+### Logo rules
+
+- **Minimum clear space**: padding around the logo equal to the cap-height of the wordmark (or radius of symbol).
+- **Minimum size**: typically 16px (favicon) / 24px (standard). Below this: lettermark only.
+- **Don't distort**: stretch, skew, gradient, drop-shadow on logos = brand violation.
+- **Locked combinations**: if "logo + tagline" is locked, never split.
+- **Color treatment**: brand color (default), white-on-dark (for dark backgrounds), 1-color (for ink-restrictive contexts).
+
+### Logo variants per context
+
+A real brand kit ships:
+
+```
+logo/
+├── primary.svg              # default — full color
+├── primary-white.svg        # for dark backgrounds
+├── primary-black.svg        # 1-color, ink-only
+├── lettermark.svg           # symbol-only
+├── lettermark-white.svg
+├── horizontal.svg           # stacked is default; horizontal for narrow placements
+├── icon-32.png              # raster for app icon
+└── icon-1024.png            # high-res for app store
+```
+
+Provide all variants — designers and devs grab what they need.
+
+## Color (brand)
+
+The brand color set is **input** to design-ai's `color-palette` skill. See [`knowledge/colors/color-theory.md`](../colors/color-theory.md) for ramp construction.
+
+Brand color = **primary anchor**. Everything else is generated from it.
+
+A brand kit specifies:
+- **Primary** (the seed)
+- **Optional secondary** (often a complementary or accent hue)
+- **Neutral** (often a hue-tinted gray matched to the primary)
+- **Forbidden colors** (e.g., "never use red except for errors")
+- **Color usage rules** ("primary on hero only, accent for CTAs")
+
+The **product's** semantic palette (text, bg, border) is derived. Brand provides hue; design system provides system.
+
+## Typography (brand)
+
+Brand fonts often differ from product fonts:
+
+| Surface | Font choice |
+| --- | --- |
+| Marketing site (hero) | Display brand font — distinct, memorable |
+| Marketing body | Brand font OR humanist sans |
+| Product UI | Often a different font — system or workhorse sans |
+| Documents | A serif or paired humanist sans |
+
+For Korean apps: Pretendard often works at all surfaces. Trying to maintain "brand font in marketing, Pretendard in product" creates inconsistency.
+
+Practical: pick **one font for product + secondary marketing surfaces**, and *one display* font for hero / landing if you want extra brand punch.
+
+## Voice / tone
+
+Voice and tone are different:
+
+| | Definition |
+| --- | --- |
+| **Voice** | Personality. Stays consistent across all contexts. |
+| **Tone** | Emotional register. Varies by context. |
+
+Brand voice example: "Warm, direct, knowledgeable, never preachy."
+Tone variations:
+- Onboarding email: warmer, encouraging.
+- Error message: direct, no apologies, action-oriented.
+- Marketing landing page: confident, declarative.
+- Customer support: warm, patient, problem-solving.
+
+### Voice attributes (typical brand kit)
+
+A voice kit defines 4–6 attributes with **what we are AND what we're not**:
+
+```
+We are: Warm
+NOT: Sycophantic ("Hey friend!" is too much)
+
+We are: Direct
+NOT: Curt ("Done." is too cold)
+
+We are: Knowledgeable
+NOT: Condescending ("Obviously, you should..." — no.)
+
+We are: Confident
+NOT: Brash ("Best in the world!" — no.)
+```
+
+This dual definition prevents drift.
+
+### Korean voice considerations
+
+For Korean apps, choose a **honorific level** as part of voice:
+
+| Level | When to use | Example |
+| --- | --- | --- |
+| 존댓말 (~합니다) | Formal — banking, fintech, B2B | "잠시 후 다시 시도해 주세요." |
+| 존댓말 (~해요) | Friendly — consumer apps, casual | "다시 한번 시도해 주세요." |
+| 반말 | **Don't use** in product UI | (avoid) |
+
+Most consumer Korean apps use casual ~해요. Banking / fintech: ~합니다 / ~합니다 mixed.
+
+## Imagery / illustration
+
+Brand imagery is a hidden axis. Often missing from "I have a brand color" briefs.
+
+| Style | Examples | Use |
+| --- | --- | --- |
+| **Photography (lifestyle)** | Real people, natural lighting | Marketing, e-commerce |
+| **Photography (product)** | Hero shots, on-white | E-commerce |
+| **Illustration (line)** | Single-color outline drawings | Tech docs, UI empty states |
+| **Illustration (flat)** | Multi-color flat shapes | Marketing, onboarding |
+| **Illustration (3D / Memphis)** | Dimensional shapes | Tech / fintech (Toss-style) |
+| **Geometric / abstract** | Shapes, no people | Tech, B2B |
+
+Pick one style for the brand. **Don't mix** illustration styles within the product — Apple-style 3D in onboarding + Memphis in errors = visual chaos.
+
+For Korean apps: Toss-style 3D abstract is currently dominant in fintech. KakaoBank uses flat illustrations. Pick a side per product.
+
+## Brand vs design system
+
+Brand and design system are **adjacent but distinct**:
+
+| | Brand | Design system |
+| --- | --- | --- |
+| **Owned by** | Marketing / leadership | Engineering / product design |
+| **Audience** | Customers, market | Builders (designers, devs) |
+| **Output** | Logo, voice, brand kit | Tokens, components, patterns |
+| **Updated** | Rarely (every 3–5 years) | Frequently (per quarter) |
+| **Source of truth** | Brand book | tokens/source.json + Storybook |
+
+Design system **inherits** from brand:
+- Brand primary → semantic primary token
+- Brand font → product type stack
+- Brand voice → component copy
+
+design-ai's role: take brand inputs, produce the design system.
+
+## Brand audit (against brand kit)
+
+Use this checklist when reviewing whether a product matches its brand:
+
+- [ ] Logo: rendered correctly, sized within bounds, in approved variants only.
+- [ ] Color: primary used per spec; semantic tokens reference it; no rogue brand colors elsewhere.
+- [ ] Typography: brand font used (or designed alternative); fallback chain correct.
+- [ ] Voice: error messages, empty states, CTAs match voice attributes.
+- [ ] Imagery: one illustration style; photos match brand guidelines (lifestyle / product / etc.).
+- [ ] Iconography: single icon library, consistent stroke width.
+- [ ] Motion: brand has motion language? Check that animations match.
+
+Run as a once-per-quarter check.
+
+## Brand kit format
+
+A real brand kit is typically:
+
+```
+brand-kit/
+├── README.md              # how to use this kit
+├── logo/                  # SVG + PNG variants
+├── color.json             # primary, secondary, neutrals, semantic
+├── typography.md          # font choices, weights, scale, fallbacks
+├── voice.md               # attributes, dos/don'ts, copy examples
+├── imagery/               # reference images, illustration system
+├── icons/                 # if custom icons exist
+└── examples/              # marketing pages, ads, screenshots showing the brand
+```
+
+The "brand book" PDF (typical agency deliverable) is a presentation of this kit — the kit itself is the working artifact.
+
+## When to invest in brand vs design system
+
+If you have neither: **invest in design system first**. A working product with a thin brand beats a brand book with no product.
+
+If you have a strong brand but inconsistent product: invest in design system. The brand will guide it.
+
+If you have a working design system but no brand identity: a brand book solidifies decisions but isn't urgent unless marketing demands it.
+
+For early-stage Korean fintech / startup: focus design system first; brand emerges via product use.
+
+## Cross-reference
+
+- [`knowledge/colors/color-theory.md`](../colors/color-theory.md) — palette construction from brand color
+- [`knowledge/typography/font-pairings.md`](../typography/font-pairings.md) — font selection per mood
+- [`knowledge/patterns/styles-catalog.md`](styles-catalog.md) — visual style families
+- [`knowledge/patterns/brand-references.md`](brand-references.md) — peer brand references
+- [`skills/design-system-builder/PLAYBOOK.md`](../../skills/design-system-builder/PLAYBOOK.md) — converts brand inputs to a system
+- [`knowledge/i18n/korean-product-conventions.md`](../i18n/korean-product-conventions.md) — Korean voice conventions

package/knowledge/patterns/brand-references.md

@@ -0,0 +1,97 @@
+---
+title: Brand reference index
+source: refs/awesome-design-md/design-md/
+upstream: https://github.com/VoltAgent/awesome-design-md
+extracted_at: 2026-05-19
+applies_to: [art-direction, brand-research]
+version: 1.0.0
+last_updated: 2026-05
+stability: stable
+---
+
+# Brand reference index
+
+Curated design notes on 71 brands. When designing for a comparable category, open the brand's notes for token references, voice, and visual cues.
+
+| Brand | Files |
+| --- | --- |
+
+| **[airbnb](../../refs/awesome-design-md/design-md/airbnb/)** | [`DESIGN.md`](../../refs/awesome-design-md/design-md/airbnb/DESIGN.md), [`README.md`](../../refs/awesome-design-md/design-md/airbnb/README.md) |
+| **[airtable](../../refs/awesome-design-md/design-md/airtable/)** | [`DESIGN.md`](../../refs/awesome-design-md/design-md/airtable/DESIGN.md), [`README.md`](../../refs/awesome-design-md/design-md/airtable/README.md) |
+| **[apple](../../refs/awesome-design-md/design-md/apple/)** | [`DESIGN.md`](../../refs/awesome-design-md/design-md/apple/DESIGN.md), [`README.md`](../../refs/awesome-design-md/design-md/apple/README.md) |
+| **[binance](../../refs/awesome-design-md/design-md/binance/)** | [`DESIGN.md`](../../refs/awesome-design-md/design-md/binance/DESIGN.md), [`README.md`](../../refs/awesome-design-md/design-md/binance/README.md) |
+| **[bmw](../../refs/awesome-design-md/design-md/bmw/)** | [`DESIGN.md`](../../refs/awesome-design-md/design-md/bmw/DESIGN.md), [`README.md`](../../refs/awesome-design-md/design-md/bmw/README.md) |
+| **[bmw-m](../../refs/awesome-design-md/design-md/bmw-m/)** | [`DESIGN.md`](../../refs/awesome-design-md/design-md/bmw-m/DESIGN.md), [`README.md`](../../refs/awesome-design-md/design-md/bmw-m/README.md) |
+| **[bugatti](../../refs/awesome-design-md/design-md/bugatti/)** | [`DESIGN.md`](../../refs/awesome-design-md/design-md/bugatti/DESIGN.md), [`README.md`](../../refs/awesome-design-md/design-md/bugatti/README.md) |
+| **[cal](../../refs/awesome-design-md/design-md/cal/)** | [`DESIGN.md`](../../refs/awesome-design-md/design-md/cal/DESIGN.md), [`README.md`](../../refs/awesome-design-md/design-md/cal/README.md) |
+| **[claude](../../refs/awesome-design-md/design-md/claude/)** | [`DESIGN.md`](../../refs/awesome-design-md/design-md/claude/DESIGN.md), [`README.md`](../../refs/awesome-design-md/design-md/claude/README.md) |
+| **[clay](../../refs/awesome-design-md/design-md/clay/)** | [`DESIGN.md`](../../refs/awesome-design-md/design-md/clay/DESIGN.md), [`README.md`](../../refs/awesome-design-md/design-md/clay/README.md) |
+| **[clickhouse](../../refs/awesome-design-md/design-md/clickhouse/)** | [`DESIGN.md`](../../refs/awesome-design-md/design-md/clickhouse/DESIGN.md), [`README.md`](../../refs/awesome-design-md/design-md/clickhouse/README.md) |
+| **[cohere](../../refs/awesome-design-md/design-md/cohere/)** | [`DESIGN.md`](../../refs/awesome-design-md/design-md/cohere/DESIGN.md), [`README.md`](../../refs/awesome-design-md/design-md/cohere/README.md) |
+| **[coinbase](../../refs/awesome-design-md/design-md/coinbase/)** | [`DESIGN.md`](../../refs/awesome-design-md/design-md/coinbase/DESIGN.md), [`README.md`](../../refs/awesome-design-md/design-md/coinbase/README.md) |
+| **[composio](../../refs/awesome-design-md/design-md/composio/)** | [`DESIGN.md`](../../refs/awesome-design-md/design-md/composio/DESIGN.md), [`README.md`](../../refs/awesome-design-md/design-md/composio/README.md) |
+| **[cursor](../../refs/awesome-design-md/design-md/cursor/)** | [`DESIGN.md`](../../refs/awesome-design-md/design-md/cursor/DESIGN.md), [`README.md`](../../refs/awesome-design-md/design-md/cursor/README.md) |
+| **[elevenlabs](../../refs/awesome-design-md/design-md/elevenlabs/)** | [`DESIGN.md`](../../refs/awesome-design-md/design-md/elevenlabs/DESIGN.md), [`README.md`](../../refs/awesome-design-md/design-md/elevenlabs/README.md) |
+| **[expo](../../refs/awesome-design-md/design-md/expo/)** | [`DESIGN.md`](../../refs/awesome-design-md/design-md/expo/DESIGN.md), [`README.md`](../../refs/awesome-design-md/design-md/expo/README.md) |
+| **[ferrari](../../refs/awesome-design-md/design-md/ferrari/)** | [`DESIGN.md`](../../refs/awesome-design-md/design-md/ferrari/DESIGN.md), [`README.md`](../../refs/awesome-design-md/design-md/ferrari/README.md) |
+| **[figma](../../refs/awesome-design-md/design-md/figma/)** | [`DESIGN.md`](../../refs/awesome-design-md/design-md/figma/DESIGN.md), [`README.md`](../../refs/awesome-design-md/design-md/figma/README.md) |
+| **[framer](../../refs/awesome-design-md/design-md/framer/)** | [`DESIGN.md`](../../refs/awesome-design-md/design-md/framer/DESIGN.md), [`README.md`](../../refs/awesome-design-md/design-md/framer/README.md) |
+| **[hashicorp](../../refs/awesome-design-md/design-md/hashicorp/)** | [`DESIGN.md`](../../refs/awesome-design-md/design-md/hashicorp/DESIGN.md), [`README.md`](../../refs/awesome-design-md/design-md/hashicorp/README.md) |
+| **[ibm](../../refs/awesome-design-md/design-md/ibm/)** | [`DESIGN.md`](../../refs/awesome-design-md/design-md/ibm/DESIGN.md), [`README.md`](../../refs/awesome-design-md/design-md/ibm/README.md) |
+| **[intercom](../../refs/awesome-design-md/design-md/intercom/)** | [`DESIGN.md`](../../refs/awesome-design-md/design-md/intercom/DESIGN.md), [`README.md`](../../refs/awesome-design-md/design-md/intercom/README.md) |
+| **[kraken](../../refs/awesome-design-md/design-md/kraken/)** | [`DESIGN.md`](../../refs/awesome-design-md/design-md/kraken/DESIGN.md), [`README.md`](../../refs/awesome-design-md/design-md/kraken/README.md) |
+| **[lamborghini](../../refs/awesome-design-md/design-md/lamborghini/)** | [`DESIGN.md`](../../refs/awesome-design-md/design-md/lamborghini/DESIGN.md), [`README.md`](../../refs/awesome-design-md/design-md/lamborghini/README.md) |
+| **[linear.app](../../refs/awesome-design-md/design-md/linear.app/)** | [`DESIGN.md`](../../refs/awesome-design-md/design-md/linear.app/DESIGN.md), [`README.md`](../../refs/awesome-design-md/design-md/linear.app/README.md) |
+| **[lovable](../../refs/awesome-design-md/design-md/lovable/)** | [`DESIGN.md`](../../refs/awesome-design-md/design-md/lovable/DESIGN.md), [`README.md`](../../refs/awesome-design-md/design-md/lovable/README.md) |
+| **[mastercard](../../refs/awesome-design-md/design-md/mastercard/)** | [`DESIGN.md`](../../refs/awesome-design-md/design-md/mastercard/DESIGN.md), [`README.md`](../../refs/awesome-design-md/design-md/mastercard/README.md) |
+| **[meta](../../refs/awesome-design-md/design-md/meta/)** | [`DESIGN.md`](../../refs/awesome-design-md/design-md/meta/DESIGN.md), [`README.md`](../../refs/awesome-design-md/design-md/meta/README.md) |
+| **[minimax](../../refs/awesome-design-md/design-md/minimax/)** | [`DESIGN.md`](../../refs/awesome-design-md/design-md/minimax/DESIGN.md), [`README.md`](../../refs/awesome-design-md/design-md/minimax/README.md) |
+| **[mintlify](../../refs/awesome-design-md/design-md/mintlify/)** | [`DESIGN.md`](../../refs/awesome-design-md/design-md/mintlify/DESIGN.md), [`README.md`](../../refs/awesome-design-md/design-md/mintlify/README.md) |
+| **[miro](../../refs/awesome-design-md/design-md/miro/)** | [`DESIGN.md`](../../refs/awesome-design-md/design-md/miro/DESIGN.md), [`README.md`](../../refs/awesome-design-md/design-md/miro/README.md) |
+| **[mistral.ai](../../refs/awesome-design-md/design-md/mistral.ai/)** | [`DESIGN.md`](../../refs/awesome-design-md/design-md/mistral.ai/DESIGN.md), [`README.md`](../../refs/awesome-design-md/design-md/mistral.ai/README.md) |
+| **[mongodb](../../refs/awesome-design-md/design-md/mongodb/)** | [`DESIGN.md`](../../refs/awesome-design-md/design-md/mongodb/DESIGN.md), [`README.md`](../../refs/awesome-design-md/design-md/mongodb/README.md) |
+| **[nike](../../refs/awesome-design-md/design-md/nike/)** | [`DESIGN.md`](../../refs/awesome-design-md/design-md/nike/DESIGN.md), [`README.md`](../../refs/awesome-design-md/design-md/nike/README.md) |
+| **[notion](../../refs/awesome-design-md/design-md/notion/)** | [`DESIGN.md`](../../refs/awesome-design-md/design-md/notion/DESIGN.md), [`README.md`](../../refs/awesome-design-md/design-md/notion/README.md) |
+| **[nvidia](../../refs/awesome-design-md/design-md/nvidia/)** | [`DESIGN.md`](../../refs/awesome-design-md/design-md/nvidia/DESIGN.md), [`README.md`](../../refs/awesome-design-md/design-md/nvidia/README.md) |
+| **[ollama](../../refs/awesome-design-md/design-md/ollama/)** | [`DESIGN.md`](../../refs/awesome-design-md/design-md/ollama/DESIGN.md), [`README.md`](../../refs/awesome-design-md/design-md/ollama/README.md) |
+| **[opencode.ai](../../refs/awesome-design-md/design-md/opencode.ai/)** | [`DESIGN.md`](../../refs/awesome-design-md/design-md/opencode.ai/DESIGN.md), [`README.md`](../../refs/awesome-design-md/design-md/opencode.ai/README.md) |
+| **[pinterest](../../refs/awesome-design-md/design-md/pinterest/)** | [`DESIGN.md`](../../refs/awesome-design-md/design-md/pinterest/DESIGN.md), [`README.md`](../../refs/awesome-design-md/design-md/pinterest/README.md) |
+| **[playstation](../../refs/awesome-design-md/design-md/playstation/)** | [`DESIGN.md`](../../refs/awesome-design-md/design-md/playstation/DESIGN.md), [`README.md`](../../refs/awesome-design-md/design-md/playstation/README.md) |
+| **[posthog](../../refs/awesome-design-md/design-md/posthog/)** | [`DESIGN.md`](../../refs/awesome-design-md/design-md/posthog/DESIGN.md), [`README.md`](../../refs/awesome-design-md/design-md/posthog/README.md) |
+| **[raycast](../../refs/awesome-design-md/design-md/raycast/)** | [`DESIGN.md`](../../refs/awesome-design-md/design-md/raycast/DESIGN.md), [`README.md`](../../refs/awesome-design-md/design-md/raycast/README.md) |
+| **[renault](../../refs/awesome-design-md/design-md/renault/)** | [`DESIGN.md`](../../refs/awesome-design-md/design-md/renault/DESIGN.md), [`README.md`](../../refs/awesome-design-md/design-md/renault/README.md) |
+| **[replicate](../../refs/awesome-design-md/design-md/replicate/)** | [`DESIGN.md`](../../refs/awesome-design-md/design-md/replicate/DESIGN.md), [`README.md`](../../refs/awesome-design-md/design-md/replicate/README.md) |
+| **[resend](../../refs/awesome-design-md/design-md/resend/)** | [`DESIGN.md`](../../refs/awesome-design-md/design-md/resend/DESIGN.md), [`README.md`](../../refs/awesome-design-md/design-md/resend/README.md) |
+| **[revolut](../../refs/awesome-design-md/design-md/revolut/)** | [`DESIGN.md`](../../refs/awesome-design-md/design-md/revolut/DESIGN.md), [`README.md`](../../refs/awesome-design-md/design-md/revolut/README.md) |
+| **[runwayml](../../refs/awesome-design-md/design-md/runwayml/)** | [`DESIGN.md`](../../refs/awesome-design-md/design-md/runwayml/DESIGN.md), [`README.md`](../../refs/awesome-design-md/design-md/runwayml/README.md) |
+| **[sanity](../../refs/awesome-design-md/design-md/sanity/)** | [`DESIGN.md`](../../refs/awesome-design-md/design-md/sanity/DESIGN.md), [`README.md`](../../refs/awesome-design-md/design-md/sanity/README.md) |
+| **[sentry](../../refs/awesome-design-md/design-md/sentry/)** | [`DESIGN.md`](../../refs/awesome-design-md/design-md/sentry/DESIGN.md), [`README.md`](../../refs/awesome-design-md/design-md/sentry/README.md) |
+| **[shopify](../../refs/awesome-design-md/design-md/shopify/)** | [`DESIGN.md`](../../refs/awesome-design-md/design-md/shopify/DESIGN.md), [`README.md`](../../refs/awesome-design-md/design-md/shopify/README.md) |
+| **[slack](../../refs/awesome-design-md/design-md/slack/)** | [`DESIGN.md`](../../refs/awesome-design-md/design-md/slack/DESIGN.md) |
+| **[spacex](../../refs/awesome-design-md/design-md/spacex/)** | [`DESIGN.md`](../../refs/awesome-design-md/design-md/spacex/DESIGN.md), [`README.md`](../../refs/awesome-design-md/design-md/spacex/README.md) |
+| **[spotify](../../refs/awesome-design-md/design-md/spotify/)** | [`DESIGN.md`](../../refs/awesome-design-md/design-md/spotify/DESIGN.md), [`README.md`](../../refs/awesome-design-md/design-md/spotify/README.md) |
+| **[starbucks](../../refs/awesome-design-md/design-md/starbucks/)** | [`DESIGN.md`](../../refs/awesome-design-md/design-md/starbucks/DESIGN.md), [`README.md`](../../refs/awesome-design-md/design-md/starbucks/README.md) |
+| **[stripe](../../refs/awesome-design-md/design-md/stripe/)** | [`DESIGN.md`](../../refs/awesome-design-md/design-md/stripe/DESIGN.md), [`README.md`](../../refs/awesome-design-md/design-md/stripe/README.md) |
+| **[supabase](../../refs/awesome-design-md/design-md/supabase/)** | [`DESIGN.md`](../../refs/awesome-design-md/design-md/supabase/DESIGN.md), [`README.md`](../../refs/awesome-design-md/design-md/supabase/README.md) |
+| **[superhuman](../../refs/awesome-design-md/design-md/superhuman/)** | [`DESIGN.md`](../../refs/awesome-design-md/design-md/superhuman/DESIGN.md), [`README.md`](../../refs/awesome-design-md/design-md/superhuman/README.md) |
+| **[tesla](../../refs/awesome-design-md/design-md/tesla/)** | [`DESIGN.md`](../../refs/awesome-design-md/design-md/tesla/DESIGN.md), [`README.md`](../../refs/awesome-design-md/design-md/tesla/README.md) |
+| **[theverge](../../refs/awesome-design-md/design-md/theverge/)** | [`DESIGN.md`](../../refs/awesome-design-md/design-md/theverge/DESIGN.md), [`README.md`](../../refs/awesome-design-md/design-md/theverge/README.md) |
+| **[together.ai](../../refs/awesome-design-md/design-md/together.ai/)** | [`DESIGN.md`](../../refs/awesome-design-md/design-md/together.ai/DESIGN.md), [`README.md`](../../refs/awesome-design-md/design-md/together.ai/README.md) |
+| **[uber](../../refs/awesome-design-md/design-md/uber/)** | [`DESIGN.md`](../../refs/awesome-design-md/design-md/uber/DESIGN.md), [`README.md`](../../refs/awesome-design-md/design-md/uber/README.md) |
+| **[vercel](../../refs/awesome-design-md/design-md/vercel/)** | [`DESIGN.md`](../../refs/awesome-design-md/design-md/vercel/DESIGN.md), [`README.md`](../../refs/awesome-design-md/design-md/vercel/README.md) |
+| **[vodafone](../../refs/awesome-design-md/design-md/vodafone/)** | [`DESIGN.md`](../../refs/awesome-design-md/design-md/vodafone/DESIGN.md), [`README.md`](../../refs/awesome-design-md/design-md/vodafone/README.md) |
+| **[voltagent](../../refs/awesome-design-md/design-md/voltagent/)** | [`DESIGN.md`](../../refs/awesome-design-md/design-md/voltagent/DESIGN.md), [`README.md`](../../refs/awesome-design-md/design-md/voltagent/README.md) |
+| **[warp](../../refs/awesome-design-md/design-md/warp/)** | [`DESIGN.md`](../../refs/awesome-design-md/design-md/warp/DESIGN.md), [`README.md`](../../refs/awesome-design-md/design-md/warp/README.md) |
+| **[webflow](../../refs/awesome-design-md/design-md/webflow/)** | [`DESIGN.md`](../../refs/awesome-design-md/design-md/webflow/DESIGN.md), [`README.md`](../../refs/awesome-design-md/design-md/webflow/README.md) |
+| **[wired](../../refs/awesome-design-md/design-md/wired/)** | [`DESIGN.md`](../../refs/awesome-design-md/design-md/wired/DESIGN.md), [`README.md`](../../refs/awesome-design-md/design-md/wired/README.md) |
+| **[wise](../../refs/awesome-design-md/design-md/wise/)** | [`DESIGN.md`](../../refs/awesome-design-md/design-md/wise/DESIGN.md), [`README.md`](../../refs/awesome-design-md/design-md/wise/README.md) |
+| **[x.ai](../../refs/awesome-design-md/design-md/x.ai/)** | [`DESIGN.md`](../../refs/awesome-design-md/design-md/x.ai/DESIGN.md), [`README.md`](../../refs/awesome-design-md/design-md/x.ai/README.md) |
+| **[zapier](../../refs/awesome-design-md/design-md/zapier/)** | [`DESIGN.md`](../../refs/awesome-design-md/design-md/zapier/DESIGN.md), [`README.md`](../../refs/awesome-design-md/design-md/zapier/README.md) |
+
+## How to use
+
+
+1. Designing in a category? Find the closest comparable brand above.
+2. Read the markdown files for that brand — colors, type, voice, image direction.
+3. Cite, paraphrase, adapt — don't copy verbatim.
+4. Cross-reference with `knowledge/colors/palettes-by-product-type.md` to find a matching palette starting point.

package/knowledge/patterns/chart-color-encoding.md

@@ -0,0 +1,269 @@
+<!-- hand-written -->
+---
+title: Chart color encoding
+applies_to: [data-visualization, dashboard, all-data-ui]
+version: 1.0.0
+last_updated: 2026-05
+stability: stable
+---
+
+# Chart color encoding
+
+Color in charts encodes meaning. Picking the wrong palette makes data unreadable; picking the right one makes it intuitive. This is the floor.
+
+## Three palette types
+
+| Palette | Use | Example |
+| --- | --- | --- |
+| **Sequential** | Ordered data (low → high), single direction | Heatmap of activity, choropleth map of population |
+| **Diverging** | Data with a meaningful midpoint (positive ↔ negative) | Profit/loss, sentiment, deviation from average |
+| **Categorical** | Distinct, unordered categories | Product types, regions, departments |
+
+Pick the type that matches your data. Using categorical for ordered data hides the order; using sequential for categorical implies false ordering.
+
+## Sequential palettes
+
+Single hue progressing from light to dark (or vice versa).
+
+```
+Light blue → Dark blue:    ▁▂▃▄▅▆▇█
+                            #DBEAFE → #1E3A8A
+```
+
+Properties:
+- One hue, varying lightness (and chroma)
+- Use for "more is more" relationships (revenue, count, density)
+- Don't use for negative values
+
+### Recommended sequential ramps
+
+- **Blue ramp** (most universal): `#DBEAFE` → `#1E3A8A` (Tailwind blue-100 → blue-900)
+- **Teal ramp** (modern, neutral): `#CCFBF1` → `#134E4A`
+- **Viridis** (perceptually uniform, colorblind-safe): standard scientific viz palette
+- **Brand-extended**: take your `--color-primary-50` → `--color-primary-900` ramp
+
+For 5-step charts: pick steps `100, 300, 500, 700, 900`. Skip the very-light (50) and very-dark (950) — they don't read on common backgrounds.
+
+## Diverging palettes
+
+Two hues meeting at a neutral midpoint.
+
+```
+Red ←─── Light gray ───→ Blue:
+█▆▄▂│▂▄▆█
+```
+
+Properties:
+- Two opposing hues (often red ↔ blue)
+- Lightest at the midpoint (neutral)
+- Use when zero/baseline is meaningful
+
+### Recommended diverging ramps
+
+- **Red-Blue** (most universal): financial gain/loss in non-Korean contexts
+- **Red-Green** (avoid): fails for red-green colorblind users (~8% of men)
+- **Brown-Teal**: colorblind-friendly alternative to red-green
+
+### Korean fintech consideration
+
+Korean stock convention is **inverted**: red = up (gain), blue = down (loss). For non-stock financial data (banking, expense tracking) Korean apps usually follow Western convention (green = positive). Cite [`money-and-amount.md`](money-and-amount.md).
+
+When designing for Korean stock UIs:
+- Diverging: red ↔ blue with red = positive
+- For other Korean financial: green = positive, red = negative
+
+## Categorical palettes
+
+Distinct hues for distinct categories.
+
+### Rules
+
+| Rule | Why |
+| --- | --- |
+| Use ≤ 8 colors | More than 8 → user can't track |
+| Vary lightness AND hue | Pure hue rotation is hard to distinguish |
+| Test for colorblindness | At least 4–5 colors should be distinguishable for protanopia / deuteranopia |
+| Avoid hue similarity | Don't put similar greens / similar blues next to each other |
+| Don't use semantic colors | Reserve red for error, green for success — using them as categorical 1 and 2 confuses |
+
+### Recommended palettes
+
+**Tableau 10** (industry standard, 10 colors):
+```
+#4E79A7  blue
+#F28E2B  orange
+#E15759  red
+#76B7B2  teal
+#59A14F  green
+#EDC948  yellow
+#B07AA1  purple
+#FF9DA7  pink
+#9C755F  brown
+#BAB0AC  gray
+```
+
+**Material Design palette** (8 colors):
+```
+#1F77B4  blue
+#FF7F0E  orange
+#2CA02C  green
+#D62728  red
+#9467BD  purple
+#8C564B  brown
+#E377C2  pink
+#7F7F7F  gray
+```
+
+**Brand-extended** (when categorical = your business):
+- Primary brand color = category 1
+- Accent color = category 2
+- Cool blue + warm orange = categories 3, 4
+- Etc.
+
+### Order of categorical hues
+
+When mapping to categories, assign by:
+1. **Logical order** (if categories have one): "small / medium / large" → light to dark.
+2. **Frequency** (if not): most-common category gets the most prominent color.
+3. **Alphabetical**: only as last resort.
+
+## Color blindness
+
+Roughly 8% of men, 0.5% of women. Most common forms:
+- **Deuteranopia** (red-green): can't distinguish red and green at similar lightness.
+- **Protanopia** (red-green): similar.
+- **Tritanopia** (blue-yellow): rare.
+
+Test palettes with simulators:
+- Sim Daltonism (Mac, free)
+- Coblis (web, free)
+- Browser DevTools (Chrome's "Emulate vision deficiencies")
+
+### Rules
+
+- **Don't use red+green as the only signal** (fails for ~8% of men).
+- **Pair color with shape, pattern, or label** — color is one cue among many.
+- **Sequential and diverging palettes** are usually safer than categorical.
+- **Test legends specifically** — labels next to color swatches lose if labels are tiny.
+
+## Color + meaning beyond palette
+
+Charts encode information via:
+
+| Encoding | Use |
+| --- | --- |
+| Hue | Categories |
+| Saturation | Sequential intensity (low/high) |
+| Lightness | Sequential intensity OR categorical with brightness contrast |
+| Opacity | Confidence / uncertainty |
+| Pattern (stripes, dots) | Categorical when color isn't enough |
+| Texture | Same as pattern |
+
+Layer encodings: a stacked bar can use **hue** for category and **opacity** for time period.
+
+## Specific chart types
+
+### Line chart
+
+- One color per series.
+- Up to 5 series before crowding.
+- Match the line color to the legend; same on hover.
+- For confidence intervals: same hue, lower opacity for the band.
+
+### Bar chart
+
+- All bars same color when comparing within one dimension (e.g., "monthly revenue").
+- Different colors when comparing across dimensions ("by category").
+- Sort descending by value (most apps) — leftmost bar is the highest.
+
+### Stacked bar / area
+
+- Each segment is a category — use categorical palette.
+- Order by size (largest at the bottom of stack).
+- Sequential palette if segments are ordered (small → medium → large customer).
+
+### Pie / donut chart
+
+- 2–6 slices max. More than that, use a bar chart.
+- Sort by size (descending, clockwise from 12 o'clock).
+- "Other" bucket if too many tiny slices.
+
+### Heatmap
+
+- **Sequential** palette is mandatory.
+- Lightest at low value, darkest at high.
+- Provide a numeric scale legend.
+
+### Scatter plot
+
+- Single category: one color.
+- Multiple categories: ≤ 5 colors.
+- Add transparency (`opacity: 0.6–0.8`) for overlap.
+
+### Choropleth (map)
+
+- Sequential or diverging palette.
+- 5–7 bins typical.
+- Provide value legend.
+
+## Korean dashboard color palettes
+
+Common patterns in Korean financial apps:
+
+```
+Toss-style (modern, monochromatic with accent):
+- Background: white / near-white
+- Primary: Toss blue #3182F6
+- Sequential: blue 50 → blue 900
+- Categorical: blue, teal, purple, gray (cool, calm)
+
+KakaoBank-style (warm, brand-led):
+- Background: warm white
+- Primary: Kakao yellow #FFEB00 (used sparingly)
+- Sequential: gold ramp
+- Categorical: yellow, slate, navy, gray
+
+Stock app (Korean inverted convention):
+- Positive: red #DC2626
+- Negative: blue #2563EB
+- Neutral: gray
+- No green/red diverging
+```
+
+## Background and chart elements
+
+- **Chart background**: `--color-bg-default` or `--color-bg-elevated`. White is fine.
+- **Gridlines**: very light (`--color-border-default` or lighter). They guide; they don't compete.
+- **Axes**: `--color-text-tertiary`, thin (1px).
+- **Axis labels**: `--color-text-secondary`, smaller font.
+- **Annotations** (callouts, target lines): use a subtle accent color (often a lighter brand color).
+
+## When to NOT use color
+
+Sometimes black-and-white is better:
+- Print contexts.
+- Color-blind audience that's > the norm.
+- Very dense charts where color noise hurts more than it helps.
+
+Rely on:
+- Patterns (stripes, dots) for categories
+- Line styles (solid, dashed, dotted) for series
+- Value labels (numbers next to bars)
+- Annotations
+
+## Tools
+
+- **OKLCH picker**: generate perceptually uniform palettes
+- **Coolors.co**: palette generation
+- **ColorBrewer**: scientifically-backed palettes for cartography (works for any chart)
+- **Material Theme Builder**: HCT-based palettes
+- **Chroma.js**: programmatic generation
+- **ggplot2 viridis**: perceptually uniform sequential palettes
+
+## Cross-reference
+
+- [`knowledge/colors/color-theory.md`](../colors/color-theory.md) — palette construction
+- [`knowledge/patterns/chart-types.md`](chart-types.md) — choosing the right chart for the data
+- [`knowledge/patterns/dashboard-composition.md`](dashboard-composition.md) — applying palettes in a dashboard
+- [`knowledge/patterns/money-and-amount.md`](money-and-amount.md) — money color semantics, KR stock convention
+- [`knowledge/a11y/contrast.md`](../a11y/contrast.md) — text on chart backgrounds