DESIGN.md for every entry

# DESIGN.md bundle · Mark’s UI/UX Design Research Library

One section per entry. OFFICIAL = documented source values; ESTIMATED = measured by us from screenshots.

# DESIGN.md · Material Design 3 (DS-001)

> Written for AI coding agents. Values marked **OFFICIAL** come from the documented source named below; values marked **ESTIMATED** were measured by us from our own screenshots and are approximate. Never treat ESTIMATED values as official brand tokens.

## Overview
- Type: Design System · Category: C. Design Systems
- Platforms: Android, Web, Flutter, Cross-platform
- Color theme: Pastel · Layout pattern: Split hero · Mood: Expressive, tonal, rounded
- License / terms: Apache-2.0 (tokens/components/Material Symbols)

Google design system; baseline color roles (light/dark HEX/RGB/HSL), type scale, shape, elevation, state opacities, components, UX lessons. Gaps: breakpoints, motion, shadow CSS.

### Analysis (ours)
Captured m3.material.io landing: split hero with a large rounded-corner title card on a pale lilac surface next to a tall media card; navigation rail on the left. The documented token set is tone-based (primary #6750A4 light / #D0BCFF dark), so the whole site reads as soft lilac tones rather than a single brand color. Strength: one seed color themes everything; risk: low-chroma surfaces can feel washed out without a strong accent.

## Color tokens
OFFICIAL · Baseline color roles (light / dark). Extracted from the Material-3-Design-System.pdf research PDF (values marked OFFICIAL there; from Google's material-web token files v0.192, Apache-2.0). px conversions at 16px root.

| Role | Light | Dark |
|---|---|---|
| primary | `#6750A4` | `#D0BCFF` |
| on-primary | `#FFFFFF` | `#381E72` |
| primary-container | `#EADDFF` | `#4F378B` |
| on-primary-container | `#21005D` | `#EADDFF` |
| secondary | `#625B71` | `#CCC2DC` |
| secondary-container | `#E8DEF8` | `#4A4458` |
| tertiary | `#7D5260` | `#EFB8C8` |
| tertiary-container | `#FFD8E4` | `#633B48` |
| error | `#B3261E` | `#F2B8B5` |
| error-container | `#F9DEDC` | `#8C1D18` |
| background / surface | `#FEF7FF` | `#141218` |
| on-surface | `#1D1B20` | `#E6E0E9` |
| surface-variant | `#E7E0EC` | `#49454F` |
| on-surface-variant | `#49454F` | `#CAC4D0` |
| surface-container | `#F3EDF7` | `#211F26` |
| surface-container-high | `#ECE6F0` | `#2B2930` |
| outline | `#79747E` | `#938F99` |
| outline-variant | `#CAC4D0` | `#49454F` |
| inverse-surface | `#322F35` | `#E6E0E9` |
| inverse-primary | `#D0BCFF` | `#6750A4` |

ESTIMATED · dominant colors measured from our screenshot(s) of the source site (median-cut quantization; share = % of pixels). Approximate, not official:

- `#F8F1F6` ~34%
- `#494775` ~19%
- `#DCD5EB` ~13%
- `#F3FC9A` ~1%

## Typography
OFFICIAL · Type scale (brand/plain typeface: Roboto)

| Style | Size | Line height | Tracking | Weight token |
|---|---|---|---|---|
| display-large | 57px / 3.5625rem | 64px | -0.015625rem | regular |
| display-medium | 45px | 52px | 0 | regular |
| display-small | 36px | 44px | 0 | regular |
| headline-large | 32px | 40px | 0 | regular |
| headline-medium | 28px | 36px | 0 | regular |
| headline-small | 24px | 32px | 0 | regular |
| title-large | 22px | 28px | 0 | regular |
| title-medium | 16px | 24px | 0.009375rem | medium |
| title-small | 14px | 20px | 0.00625rem | medium |
| body-large | 16px | 24px | 0.03125rem | regular |
| body-medium | 14px | 20px | 0.015625rem | regular |
| body-small | 12px | 16px | 0.025rem | regular |
| label-large | 14px | 20px | 0.00625rem | medium |
| label-medium | 12px | 16px | 0.03125rem | medium |
| label-small | 11px | 16px | 0.03125rem | medium |

## Spacing, radii, shadows
- OFFICIAL · Shape (corner radii): none 0 · extra-small 4px · small 8px · medium 12px · large 16px · extra-large 28px · full 9999px
- OFFICIAL · Elevation levels (dp): level0 0 · level1 1 · level2 3 · level3 6 · level4 8 · level5 12
- OFFICIAL · State-layer opacities: hover 0.08 · focus 0.12 · pressed 0.12 · dragged 0.16
- Gaps (not documented / not verified): Not verified in the PDF: breakpoints, margins, motion tokens, shadow CSS, numeric font weights.

## Components
- Buttons (elevated, filled, tonal, outlined, text)
- FAB
- Chips
- Navigation rail / bar / drawer
- Cards
- Dialogs
- Text fields
- Switches, checkboxes, radios
- Sliders
- Progress indicators

## Layout rules
- Observed layout pattern: **Split hero** (from our captures).

## Do’s and don’ts
- Do: Use soft tonal surfaces with one stronger accent for actions.
- Don’t: Don’t rely on pastel-on-pastel for text; check contrast.
- Do: follow the source’s license/terms listed above.
- Don’t: present ESTIMATED colors as official tokens.

## Sources
- https://m3.material.io
- Library entry: https://design-library-byt.pages.dev/entry/DS-001

---

# DESIGN.md · Apple Human Interface Guidelines (DS-002)

> Written for AI coding agents. Values marked **OFFICIAL** come from the documented source named below; values marked **ESTIMATED** were measured by us from our own screenshots and are approximate. Never treat ESTIMATED values as official brand tokens.

## Overview
- Type: Design System · Category: C. Design Systems
- Platforms: iOS, iPadOS, macOS, watchOS, tvOS, visionOS
- Color theme: Monochrome light · Layout pattern: Documentation · Mood: Native, restrained, content-first
- License / terms: Guidelines (no open license); SF fonts/Symbols under Apple license agreements

Apple HIG: system colors (light/dark/IC RGB), Dynamic Type sizes, hit targets, contrast, tvOS grids, SF Symbols, UX lessons. Gaps: radii, shadows, spacing scale, semantic color values.

### Analysis (ours)
Captured HIG landing is a white documentation layout with a left sidebar, a large heading and three illustrated cards per row. Color comes only from small product illustrations; the system relies on semantic dynamic colors instead of brand color. Strength: clarity and hierarchy through type size; risk: copying hard-coded system colors breaks dark mode and Increased Contrast.

## Color tokens
OFFICIAL · System colors, iOS/iPadOS (light / dark / increased contrast). Extracted from the Apple-HIG-Design-System.pdf research PDF (OFFICIAL RGB values from the HIG Color page, iOS/iPadOS; HEX is an exact conversion). System colors are dynamic: use the API (e.g. UIColor.systemRed), not hard-coded values.

| Role | Light | Dark | IC light | IC dark |
|---|---|---|---|---|
| Red | `#FF383C` | `#FF4245` | `#E9152D` | `#FF6165` |
| Orange | `#FF8D28` | `#FF9230` | `#C55300` | `#FFA056` |
| Yellow | `#FFCC00` | `#FFD600` | `#A16A00` | `#FEDF43` |
| Green | `#34C759` | `#30D158` | `#008932` | `#4AD968` |
| Mint | `#00C8B3` | `#00DAC3` | `#008575` | `#54DFCB` |
| Teal | `#00C3D0` | `#00D2E0` | `#008198` | `#3BDDEC` |
| Cyan | `#00C0E8` | `#3CD3FE` | `#007EAE` | `#6DD9FF` |
| Blue | `#0088FF` | `#0091FF` | `#1E6EF4` | `#5CB8FF` |
| Indigo | `#6155F5` | `#6D7CFF` | `#564ADE` | `#A7AAFF` |
| Purple | `#CB30E0` | `#DB34F2` | `#B02FC2` | `#EA8DFF` |
| Pink | `#FF2D55` | `#FF375F` | `#E7124D` | `#FF8AC4` |
| Brown | `#AC7F5E` | `#B78A66` | `#956D51` | `#DBA679` |
| systemGray | `#8E8E93` | `#8E8E93` | `#6C6C70` | `#AEAEB2` |
| systemGray2 | `#AEAEB2` | `#636366` | `#8E8E93` | `#7C7C80` |
| systemGray3 | `#C7C7CC` | `#48484A` | `#AEAEB2` | `#545456` |
| systemGray4 | `#D1D1D6` | `#3A3A3C` | `#BCBCC0` | `#444446` |
| systemGray5 | `#E5E5EA` | `#2C2C2E` | `#D8D8DC` | `#363638` |
| systemGray6 | `#F2F2F7` | `#1C1C1E` | `#EBEBF0` | `#242426` |

ESTIMATED · dominant colors measured from our screenshot(s) of the source site (median-cut quantization; share = % of pixels). Approximate, not official:

- `#FFFFFF` ~72%
- `#61D084` ~6%
- `#7F998C` ~4%
- `#B3D37F` ~3%
- `#FDF0B3` ~0%

## Typography
OFFICIAL · Dynamic Type sizes at default “Large” (iOS/iPadOS, points). Font: SF Pro / New York

| Style | Weight | Size (pt) | Leading (pt) | Emphasized |
|---|---|---|---|---|
| Large Title | Regular | 34 | 41 | Bold |
| Title 1 | Regular | 28 | 34 | Bold |
| Title 2 | Regular | 22 | 28 | Bold |
| Title 3 | Regular | 20 | 25 | Semibold |
| Headline | Semibold | 17 | 22 | Semibold |
| Body | Regular | 17 | 22 | Semibold |
| Callout | Regular | 16 | 21 | Semibold |
| Subhead | Regular | 15 | 20 | Semibold |
| Footnote | Regular | 13 | 18 | Semibold |
| Caption 1 | Regular | 12 | 16 | Semibold |
| Caption 2 | Regular | 11 | 13 | Semibold |

## Spacing, radii, shadows
- OFFICIAL · Default / minimum text size: iOS/iPadOS 17/11 pt · macOS 13/10 · tvOS 29/23 · visionOS 17/12 · watchOS 16/12
- OFFICIAL · Hit targets (default / min): iOS/iPadOS 44×44 / 28×28 pt · macOS 28×28 / 20×20 · tvOS 66×66 / 56×56 · visionOS 60×60 / 28×28 · watchOS 44×44 / 28×28
- OFFICIAL · Contrast: Text up to 17pt ≥ 4.5:1; 18pt+ or bold ≥ 3:1
- Gaps (not documented / not verified): Not published in HIG / not verified: semantic label & background color values, spacing scale, corner radii, shadows.

## Components
- Buttons
- Toggles
- Pickers
- Segmented controls
- Sliders
- Steppers
- Text fields
- Menus
- Alerts
- Sheets
- Popovers
- Lists
- Tab bars
- Toolbars
- Navigation bars
- Sidebars
- Search fields
- Progress indicators

## Layout rules
- Observed layout pattern: **Documentation** (from our captures).

## Do’s and don’ts
- Do: Keep chrome neutral and let content (images, icons, type) carry color.
- Don’t: Don’t introduce decorative color that competes with content.
- Do: follow the source’s license/terms listed above.
- Don’t: present ESTIMATED colors as official tokens.

## Sources
- https://developer.apple.com/design/human-interface-guidelines/
- Library entry: https://design-library-byt.pages.dev/entry/DS-002

---

# DESIGN.md · Lucide Icons (IC-001)

> Written for AI coding agents. Values marked **OFFICIAL** come from the documented source named below; values marked **ESTIMATED** were measured by us from our own screenshots and are approximate. Never treat ESTIMATED values as official brand tokens.

## Overview
- Type: Icon Library · Category: D. Icons and Visual Assets
- Platforms: Web, React, Vue, Svelte, Flutter
- Color theme: Monochrome light · Layout pattern: Centered hero · Mood: Clean, technical, friendly
- License / terms: ISC

Open-source stroke icon set (Feather fork), default in shadcn/ui.

### Analysis (ours)
Captured lucide.dev: centered hero with a large swirl illustration, search field and feature cards below. Almost entirely white and gray with a single warm-red accent. The icon set itself is 24px, 2px stroke, round caps, matching the outline look.

## Color tokens
No official color tokens documented for this entry.

ESTIMATED · dominant colors measured from our screenshot(s) of the source site (median-cut quantization; share = % of pixels). Approximate, not official:

- `#FFFFFF` ~57%
- `#E1E0E5` ~4%
- `#CFCBCE` ~3%
- `#AD888B` ~2%

## Typography
No official type scale documented for this entry; use the product’s own typography guidance.

## Spacing, radii, shadows
Not documented for this entry. Do not invent values; derive from your own design system.

## Components
No component inventory documented for this entry.

## Layout rules
- Observed layout pattern: **Centered hero** (from our captures).

## Do’s and don’ts
- Do: Keep chrome neutral and let content (images, icons, type) carry color.
- Don’t: Don’t introduce decorative color that competes with content.
- Do: follow the source’s license/terms listed above.
- Don’t: present ESTIMATED colors as official tokens.

## Sources
- https://lucide.dev
- Library entry: https://design-library-byt.pages.dev/entry/IC-001

---

# DESIGN.md · Heroicons (IC-002)

> Written for AI coding agents. Values marked **OFFICIAL** come from the documented source named below; values marked **ESTIMATED** were measured by us from our own screenshots and are approximate. Never treat ESTIMATED values as official brand tokens.

## Overview
- Type: Icon Library · Category: D. Icons and Visual Assets
- Platforms: Web, React, Vue
- Color theme: Monochrome light · Layout pattern: Split hero · Mood: Minimal, utilitarian
- License / terms: MIT

Tailwind Labs SVG icons: Outline 24, Solid 24, Mini 20, Micro 16.

### Analysis (ours)
Captured heroicons.com: split hero (title left, oversized outline icon right) above a dense icon grid with style tabs. White, gray and a muted indigo; the grid itself is the product.

## Color tokens
No official color tokens documented for this entry.

ESTIMATED · dominant colors measured from our screenshot(s) of the source site (median-cut quantization; share = % of pixels). Approximate, not official:

- `#FFFFFF` ~51%
- `#ABABBE` ~3%

## Typography
No official type scale documented for this entry; use the product’s own typography guidance.

## Spacing, radii, shadows
Not documented for this entry. Do not invent values; derive from your own design system.

## Components
No component inventory documented for this entry.

## Layout rules
- Observed layout pattern: **Split hero** (from our captures).

## Do’s and don’ts
- Do: Keep chrome neutral and let content (images, icons, type) carry color.
- Don’t: Don’t introduce decorative color that competes with content.
- Do: follow the source’s license/terms listed above.
- Don’t: present ESTIMATED colors as official tokens.

## Sources
- https://heroicons.com
- Library entry: https://design-library-byt.pages.dev/entry/IC-002

---

# DESIGN.md · Phosphor Icons (IC-003)

> Written for AI coding agents. Values marked **OFFICIAL** come from the documented source named below; values marked **ESTIMATED** were measured by us from our own screenshots and are approximate. Never treat ESTIMATED values as official brand tokens.

## Overview
- Type: Icon Library · Category: D. Icons and Visual Assets
- Platforms: Web, React, Vue, Flutter, Swift
- Color theme: Warm neutral · Layout pattern: Split hero · Mood: Playful, crafted, warm
- License / terms: MIT

Flexible icon family: Thin, Light, Regular, Bold, Fill, Duotone.

### Analysis (ours)
Captured phosphoricons.com: warm off-white canvas, lime-yellow banner and scattered paper-clip objects; the headline and feature list sit left of a wide icon specimen. One of the few icon sites with a distinct warm, editorial personality.

## Color tokens
No official color tokens documented for this entry.

ESTIMATED · dominant colors measured from our screenshot(s) of the source site (median-cut quantization; share = % of pixels). Approximate, not official:

- `#EEEAE3` ~62%
- `#ABA193` ~9%
- `#BDDA58` ~7%
- `#3E3D3A` ~7%
- `#827C71` ~2%
- `#D4DCA6` ~2%

## Typography
No official type scale documented for this entry; use the product’s own typography guidance.

## Spacing, radii, shadows
Not documented for this entry. Do not invent values; derive from your own design system.

## Components
No component inventory documented for this entry.

## Layout rules
- Observed layout pattern: **Split hero** (from our captures).

## Do’s and don’ts
- Do: Use off-white/cream surfaces and warm grays; keep accents sparse.
- Don’t: Don’t switch to cold pure-white/blue-gray surfaces.
- Do: follow the source’s license/terms listed above.
- Don’t: present ESTIMATED colors as official tokens.

## Sources
- https://phosphoricons.com
- Library entry: https://design-library-byt.pages.dev/entry/IC-003

---

# DESIGN.md · Iconify (IC-004)

> Written for AI coding agents. Values marked **OFFICIAL** come from the documented source named below; values marked **ESTIMATED** were measured by us from our own screenshots and are approximate. Never treat ESTIMATED values as official brand tokens.

## Overview
- Type: Icon Framework · Category: D. Icons and Visual Assets
- Platforms: Web, Figma, frameworks
- Color theme: Monochrome light · Layout pattern: Centered hero · Mood: Neutral, developer-focused
- License / terms: MIT (framework); per-set licenses vary (MIT/Apache/CC BY/OFL)

Unified API/framework over 100+ open icon sets; each set keeps its own license.

### Analysis (ours)
Captured iconify.design: centered hero with a short headline, four action buttons and a sponsor block; mostly white with blue links. Function over brand: the value is in the API and the browsable icon sets.

## Color tokens
No official color tokens documented for this entry.

ESTIMATED · dominant colors measured from our screenshot(s) of the source site (median-cut quantization; share = % of pixels). Approximate, not official:

- `#FFFFFF` ~91%
- `#BABDBF` ~2%
- `#D7E1E6` ~1%
- `#59A5D3` ~1%
- `#19648A` ~1%
- `#4D8AAD` ~1%

## Typography
No official type scale documented for this entry; use the product’s own typography guidance.

## Spacing, radii, shadows
Not documented for this entry. Do not invent values; derive from your own design system.

## Components
No component inventory documented for this entry.

## Layout rules
- Observed layout pattern: **Centered hero** (from our captures).

## Do’s and don’ts
- Do: Keep chrome neutral and let content (images, icons, type) carry color.
- Don’t: Don’t introduce decorative color that competes with content.
- Do: follow the source’s license/terms listed above.
- Don’t: present ESTIMATED colors as official tokens.

## Sources
- https://iconify.design
- Library entry: https://design-library-byt.pages.dev/entry/IC-004

---

# DESIGN.md · Google Fonts (FT-001)

> Written for AI coding agents. Values marked **OFFICIAL** come from the documented source named below; values marked **ESTIMATED** were measured by us from our own screenshots and are approximate. Never treat ESTIMATED values as official brand tokens.

## Overview
- Type: Font Library · Category: F. Fonts and Typography
- Platforms: Web, Android, Desktop
- Color theme: Monochrome light · Layout pattern: Sidebar app shell · Mood: Neutral, tool-like
- License / terms: Mostly SIL OFL; some Apache-2.0 / Ubuntu Font License

Free open-source font library + CSS API; variable fonts; Noto coverage.

### Analysis (ours)
Captured fonts.google.com: an app shell with a left filter sidebar and a long list of large type specimens. Almost no color; the type specimens are the visual content, with a sample-text field at the top.

## Color tokens
No official color tokens documented for this entry.

ESTIMATED · dominant colors measured from our screenshot(s) of the source site (median-cut quantization; share = % of pixels). Approximate, not official:

- `#FFFFFF` ~50%
- `#97A5B8` ~7%

## Typography
No official type scale documented for this entry; use the product’s own typography guidance.

## Spacing, radii, shadows
Not documented for this entry. Do not invent values; derive from your own design system.

## Components
No component inventory documented for this entry.

## Layout rules
- Observed layout pattern: **Sidebar app shell** (from our captures).

## Do’s and don’ts
- Do: Keep chrome neutral and let content (images, icons, type) carry color.
- Don’t: Don’t introduce decorative color that competes with content.
- Do: follow the source’s license/terms listed above.
- Don’t: present ESTIMATED colors as official tokens.

## Sources
- https://fonts.google.com
- Library entry: https://design-library-byt.pages.dev/entry/FT-001

---

# DESIGN.md · Fontshare (FT-002)

> Written for AI coding agents. Values marked **OFFICIAL** come from the documented source named below; values marked **ESTIMATED** were measured by us from our own screenshots and are approximate. Never treat ESTIMATED values as official brand tokens.

## Overview
- Type: Font Library · Category: F. Fonts and Typography
- Platforms: Web, Desktop
- Color theme: Warm neutral · Layout pattern: Card grid · Mood: Editorial, typographic
- License / terms: ITF Free Font License (no modify/subset/redistribute) or SIL OFL per family

Indian Type Foundry free fonts (100 families via API: 64 ITF FFL, 36 OFL).

### Analysis (ours)
Captured fontshare.com: a cream background with a large black wordmark and typographic cards. Strongly typographic and warm, close to a print-catalog feel.

## Color tokens
No official color tokens documented for this entry.

ESTIMATED · dominant colors measured from our screenshot(s) of the source site (median-cut quantization; share = % of pixels). Approximate, not official:

- `#FFFFE3` ~96%
- `#10100E` ~2%
- `#E4E4CB` ~0%
- `#6B6B5F` ~0%

## Typography
No official type scale documented for this entry; use the product’s own typography guidance.

## Spacing, radii, shadows
Not documented for this entry. Do not invent values; derive from your own design system.

## Components
No component inventory documented for this entry.

## Layout rules
- Observed layout pattern: **Card grid** (from our captures).

## Do’s and don’ts
- Do: Use off-white/cream surfaces and warm grays; keep accents sparse.
- Don’t: Don’t switch to cold pure-white/blue-gray surfaces.
- Do: follow the source’s license/terms listed above.
- Don’t: present ESTIMATED colors as official tokens.

## Sources
- https://www.fontshare.com
- Library entry: https://design-library-byt.pages.dev/entry/FT-002

---

# DESIGN.md · Logobook (LG-001)

> Written for AI coding agents. Values marked **OFFICIAL** come from the documented source named below; values marked **ESTIMATED** were measured by us from our own screenshots and are approximate. Never treat ESTIMATED values as official brand tokens.

## Overview
- Type: Logo Gallery · Category: H. Logos and Brand Identity
- Platforms: Web
- Color theme: High-contrast · Layout pattern: Card grid · Mood: Archival, graphic
- License / terms: Logos © their owners; link only

Curated archive of logos and trademarks, browsable by shape, letter, form and designer. Tip: search by the basic form (circle, triangle, letter) your concept is built on to see how others solved it.

### Analysis (ours)
Captured logobook.com: black-and-white logo marks on a white grid, with a blue hero banner and category tiles (circle, triangle, letter). The logos themselves provide all the contrast.

## Color tokens
No official color tokens documented for this entry.

ESTIMATED · dominant colors measured from our screenshot(s) of the source site (median-cut quantization; share = % of pixels). Approximate, not official:

- `#FFFFFF` ~72%
- `#000000` ~9%
- `#8AD1FA` ~4%
- `#62696D` ~3%
- `#A2ADB3` ~3%
- `#1F1D1D` ~2%

## Typography
No official type scale documented for this entry; use the product’s own typography guidance.

## Spacing, radii, shadows
Not documented for this entry. Do not invent values; derive from your own design system.

## Components
No component inventory documented for this entry.

## Layout rules
- Observed layout pattern: **Card grid** (from our captures).

## Do’s and don’ts
- Do: Use pure black/white contrasts and strong type hierarchy.
- Don’t: Don’t use mid-grays for important text.
- Do: follow the source’s license/terms listed above.
- Don’t: present ESTIMATED colors as official tokens.

## Sources
- https://logobook.com
- Library entry: https://design-library-byt.pages.dev/entry/LG-001

---

# DESIGN.md · LogoLounge (LG-002)

> Written for AI coding agents. Values marked **OFFICIAL** come from the documented source named below; values marked **ESTIMATED** were measured by us from our own screenshots and are approximate. Never treat ESTIMATED values as official brand tokens.

## Overview
- Type: Logo Gallery · Category: H. Logos and Brand Identity
- Platforms: Web
- Color theme: Bold color accent · Layout pattern: Centered hero · Mood: Bold, showcase
- License / terms: Logos © their owners; link only

Long-running logo database and trend reports (the LogoLounge Trend Report). Tip: read the yearly trend report to avoid looking dated, or to deliberately break a trend.

### Analysis (ours)
Captured logolounge.com: an orange gradient hero with a centered headline and a row of multicolor logos below. Loud brand accent, conventional showcase layout.

## Color tokens
No official color tokens documented for this entry.

ESTIMATED · dominant colors measured from our screenshot(s) of the source site (median-cut quantization; share = % of pixels). Approximate, not official:

- `#FFFFFF` ~38%
- `#ED5D16` ~11%
- `#E78426` ~8%
- `#CB9048` ~4%
- `#D1C6A4` ~3%
- `#FFEBCF` ~1%

## Typography
No official type scale documented for this entry; use the product’s own typography guidance.

## Spacing, radii, shadows
Not documented for this entry. Do not invent values; derive from your own design system.

## Components
No component inventory documented for this entry.

## Layout rules
- Observed layout pattern: **Centered hero** (from our captures).

## Do’s and don’ts
- Do: Let one strong brand color dominate key surfaces.
- Don’t: Don’t dilute it with competing accent colors.
- Do: follow the source’s license/terms listed above.
- Don’t: present ESTIMATED colors as official tokens.

## Sources
- https://www.logolounge.com
- Library entry: https://design-library-byt.pages.dev/entry/LG-002

---

# DESIGN.md · Dribbble · logo tag (LG-003)

> Written for AI coding agents. Values marked **OFFICIAL** come from the documented source named below; values marked **ESTIMATED** were measured by us from our own screenshots and are approximate. Never treat ESTIMATED values as official brand tokens.

## Overview
- Type: Logo Gallery · Category: H. Logos and Brand Identity
- Platforms: Web
- Color theme: Monochrome light · Layout pattern: Card grid · Mood: Community, visual-first
- License / terms: Shots © their designers; link only

Designer shots tagged ‘logo’: concepts, grids and presentation boards. Tip: look at how designers show construction grids and clear space; present your own marks the same way.

### Analysis (ours)
Captured dribbble.com/tags/logo: a dense card grid of shots with filters on top; color comes from the shots, not the UI.

## Color tokens
No official color tokens documented for this entry.

ESTIMATED · dominant colors measured from our screenshot(s) of the source site (median-cut quantization; share = % of pixels). Approximate, not official:

- `#FFFFFF` ~47%
- `#000214` ~8%
- `#4E7966` ~7%
- `#BDD2CA` ~6%
- `#E5E8E6` ~6%
- `#C4876E` ~5%

## Typography
No official type scale documented for this entry; use the product’s own typography guidance.

## Spacing, radii, shadows
Not documented for this entry. Do not invent values; derive from your own design system.

## Components
No component inventory documented for this entry.

## Layout rules
- Observed layout pattern: **Card grid** (from our captures).

## Do’s and don’ts
- Do: Keep chrome neutral and let content (images, icons, type) carry color.
- Don’t: Don’t introduce decorative color that competes with content.
- Do: follow the source’s license/terms listed above.
- Don’t: present ESTIMATED colors as official tokens.

## Sources
- https://dribbble.com/tags/logo
- Library entry: https://design-library-byt.pages.dev/entry/LG-003

---

# DESIGN.md · Behance · logo projects (LG-004)

> Written for AI coding agents. Values marked **OFFICIAL** come from the documented source named below; values marked **ESTIMATED** were measured by us from our own screenshots and are approximate. Never treat ESTIMATED values as official brand tokens.

## Overview
- Type: Logo Gallery · Category: H. Logos and Brand Identity
- Platforms: Web
- Color theme: Monochrome light · Layout pattern: Card grid · Mood: Portfolio, visual-first
- License / terms: Projects © their creators; link only

Full branding case studies (logo, palette, type, applications). Tip: study complete identity projects, not just the mark: a logo is judged in context.

### Analysis (ours)
Captured the Behance logo search: a project card grid with search and filters; the UI is neutral and the projects supply the color.

## Color tokens
No official color tokens documented for this entry.

ESTIMATED · dominant colors measured from our screenshot(s) of the source site (median-cut quantization; share = % of pixels). Approximate, not official:

- `#FFFFFF` ~46%
- `#000207` ~12%
- `#CDCDCD` ~10%
- `#828783` ~5%
- `#3D2C26` ~5%
- `#EFEBE1` ~4%

## Typography
No official type scale documented for this entry; use the product’s own typography guidance.

## Spacing, radii, shadows
Not documented for this entry. Do not invent values; derive from your own design system.

## Components
No component inventory documented for this entry.

## Layout rules
- Observed layout pattern: **Card grid** (from our captures).

## Do’s and don’ts
- Do: Keep chrome neutral and let content (images, icons, type) carry color.
- Don’t: Don’t introduce decorative color that competes with content.
- Do: follow the source’s license/terms listed above.
- Don’t: present ESTIMATED colors as official tokens.

## Sources
- https://www.behance.net/search/projects/logo
- Library entry: https://design-library-byt.pages.dev/entry/LG-004

---

# DESIGN.md · Spotify brand & design guidelines (LG-005)

> Written for AI coding agents. Values marked **OFFICIAL** come from the documented source named below; values marked **ESTIMATED** were measured by us from our own screenshots and are approximate. Never treat ESTIMATED values as official brand tokens.

## Overview
- Type: Brand Guidelines · Category: H. Logos and Brand Identity
- Platforms: Web
- Color theme: Monochrome light · Layout pattern: Documentation · Mood: Corporate, structured
- License / terms: Spotify trademarks; follow the guidelines; link only

Public rules for using Spotify’s logo, icon and attribution in third-party apps. Logo files are on the newsroom media kit (newsroom.spotify.com/media-kit/logo-and-brand-assets). Tip: note how clear-space, minimum size and color rules are stated: copy that structure for your own guidelines.

### Analysis (ours)
Captured Spotify’s design guidelines: a documentation layout with left navigation, a purple header bar and diagrams of attribution rules.

## Color tokens
No official color tokens documented for this entry.

ESTIMATED · dominant colors measured from our screenshot(s) of the source site (median-cut quantization; share = % of pixels). Approximate, not official:

- `#FFFFFF` ~49%
- `#412E6F` ~12%
- `#A8BCC5` ~11%
- `#D9E7E4` ~5%

## Typography
No official type scale documented for this entry; use the product’s own typography guidance.

## Spacing, radii, shadows
Not documented for this entry. Do not invent values; derive from your own design system.

## Components
No component inventory documented for this entry.

## Layout rules
- Observed layout pattern: **Documentation** (from our captures).

## Do’s and don’ts
- Do: Keep chrome neutral and let content (images, icons, type) carry color.
- Don’t: Don’t introduce decorative color that competes with content.
- Do: follow the source’s license/terms listed above.
- Don’t: present ESTIMATED colors as official tokens.

## Sources
- https://developer.spotify.com/documentation/design
- Library entry: https://design-library-byt.pages.dev/entry/LG-005

---

# DESIGN.md · Slack media kit (LG-006)

> Written for AI coding agents. Values marked **OFFICIAL** come from the documented source named below; values marked **ESTIMATED** were measured by us from our own screenshots and are approximate. Never treat ESTIMATED values as official brand tokens.

## Overview
- Type: Brand Guidelines · Category: H. Logos and Brand Identity
- Platforms: Web
- Color theme: Bold color accent · Layout pattern: Centered hero · Mood: Brand-forward, friendly
- License / terms: Slack trademarks; follow the media-kit terms; link only

Public media kit with logo files and usage guidance. Tip: notice the do/don’t examples; they are the fastest way to explain logo misuse.

### Analysis (ours)
Captured the Slack media kit: a centered headline on white with deep aubergine (#4A154B-like, ESTIMATED) download cards below.

## Color tokens
No official color tokens documented for this entry.

ESTIMATED · dominant colors measured from our screenshot(s) of the source site (median-cut quantization; share = % of pixels). Approximate, not official:

- `#FFFFFF` ~78%
- `#4A154B` ~7%
- `#9E98A2` ~4%
- `#E2E2E5` ~3%
- `#6C2174` ~1%

## Typography
No official type scale documented for this entry; use the product’s own typography guidance.

## Spacing, radii, shadows
Not documented for this entry. Do not invent values; derive from your own design system.

## Components
No component inventory documented for this entry.

## Layout rules
- Observed layout pattern: **Centered hero** (from our captures).

## Do’s and don’ts
- Do: Let one strong brand color dominate key surfaces.
- Don’t: Don’t dilute it with competing accent colors.
- Do: follow the source’s license/terms listed above.
- Don’t: present ESTIMATED colors as official tokens.

## Sources
- https://slack.com/media-kit
- Library entry: https://design-library-byt.pages.dev/entry/LG-006

---

# DESIGN.md · Mailchimp brand assets (LG-007)

> Written for AI coding agents. Values marked **OFFICIAL** come from the documented source named below; values marked **ESTIMATED** were measured by us from our own screenshots and are approximate. Never treat ESTIMATED values as official brand tokens.

## Overview
- Type: Brand Guidelines · Category: H. Logos and Brand Identity
- Platforms: Web
- Color theme: Bold color accent · Layout pattern: Editorial · Mood: Quirky, bold, editorial
- License / terms: Mailchimp/Intuit trademarks; follow the brand-asset terms; link only

Public brand-asset page with logo, wordmark and Freddie mascot usage. Tip: a mascot (Freddie) can work as a secondary mark next to a wordmark.

### Analysis (ours)
Captured Mailchimp brand assets: a full-bleed yellow page with a serif headline and long-form sections. Very strong single-color identity.

## Color tokens
No official color tokens documented for this entry.

ESTIMATED · dominant colors measured from our screenshot(s) of the source site (median-cut quantization; share = % of pixels). Approximate, not official:

- `#FFFFFF` ~43%
- `#FFE01B` ~32%
- `#241C15` ~7%
- `#625F3E` ~5%
- `#D7C448` ~2%

## Typography
No official type scale documented for this entry; use the product’s own typography guidance.

## Spacing, radii, shadows
Not documented for this entry. Do not invent values; derive from your own design system.

## Components
No component inventory documented for this entry.

## Layout rules
- Observed layout pattern: **Editorial** (from our captures).

## Do’s and don’ts
- Do: Let one strong brand color dominate key surfaces.
- Don’t: Don’t dilute it with competing accent colors.
- Do: follow the source’s license/terms listed above.
- Don’t: present ESTIMATED colors as official tokens.

## Sources
- https://mailchimp.com/about/brand-assets/
- Library entry: https://design-library-byt.pages.dev/entry/LG-007

---

# DESIGN.md · Vercel brand assets (Geist) (LG-008)

> Written for AI coding agents. Values marked **OFFICIAL** come from the documented source named below; values marked **ESTIMATED** were measured by us from our own screenshots and are approximate. Never treat ESTIMATED values as official brand tokens.

## Overview
- Type: Brand Guidelines · Category: H. Logos and Brand Identity
- Platforms: Web
- Color theme: Monochrome light · Layout pattern: Documentation · Mood: Minimal, technical
- License / terms: Vercel trademarks; link only

Vercel’s public brand page within the Geist design system: logo files and usage. Tip: shipping brand assets inside the design system keeps logo and UI tokens in sync.

### Analysis (ours)
Captured Vercel’s Geist brands page: a documentation layout with a left sidebar and the black Vercel logotype on a light panel.

## Color tokens
No official color tokens documented for this entry.

ESTIMATED · dominant colors measured from our screenshot(s) of the source site (median-cut quantization; share = % of pixels). Approximate, not official:

- `#FAFAFA` ~62%
- `#B6B8BA` ~3%
- `#646464` ~2%

## Typography
No official type scale documented for this entry; use the product’s own typography guidance.

## Spacing, radii, shadows
Not documented for this entry. Do not invent values; derive from your own design system.

## Components
No component inventory documented for this entry.

## Layout rules
- Observed layout pattern: **Documentation** (from our captures).

## Do’s and don’ts
- Do: Keep chrome neutral and let content (images, icons, type) carry color.
- Don’t: Don’t introduce decorative color that competes with content.
- Do: follow the source’s license/terms listed above.
- Don’t: present ESTIMATED colors as official tokens.

## Sources
- https://vercel.com/geist/brands
- Library entry: https://design-library-byt.pages.dev/entry/LG-008

---

# DESIGN.md · Simple Icons (LG-009)

> Written for AI coding agents. Values marked **OFFICIAL** come from the documented source named below; values marked **ESTIMATED** were measured by us from our own screenshots and are approximate. Never treat ESTIMATED values as official brand tokens.

## Overview
- Type: Open Brand Assets · Category: H. Logos and Brand Identity
- Platforms: Web
- Color theme: Monochrome light · Layout pattern: Card grid · Mood: Utilitarian, data-dense
- License / terms: CC0-1.0 (SVG data); brand logos remain their owners’ trademarks (see the project DISCLAIMER)

Over 3,000 single-color SVG brand icons with official hex colors, for UI use (e.g. ‘Sign in with…’ buttons, integrations lists). Tip: CC0 covers the SVG files, not the trademarks: always follow each brand’s own guidelines.

### Analysis (ours)
Captured simpleicons.org: a dense card grid of brand icons, each card tinted with that brand’s color; neutral chrome around it.

## Color tokens
No official color tokens documented for this entry.

ESTIMATED · dominant colors measured from our screenshot(s) of the source site (median-cut quantization; share = % of pixels). Approximate, not official:

- `#FFFFFF` ~43%
- `#5C3C4E` ~5%
- `#B8B1A7` ~5%
- `#E5E6E6` ~3%

## Typography
No official type scale documented for this entry; use the product’s own typography guidance.

## Spacing, radii, shadows
Not documented for this entry. Do not invent values; derive from your own design system.

## Components
No component inventory documented for this entry.

## Layout rules
- Observed layout pattern: **Card grid** (from our captures).

## Do’s and don’ts
- Do: Keep chrome neutral and let content (images, icons, type) carry color.
- Don’t: Don’t introduce decorative color that competes with content.
- Do: follow the source’s license/terms listed above.
- Don’t: present ESTIMATED colors as official tokens.

## Sources
- https://simpleicons.org
- Library entry: https://design-library-byt.pages.dev/entry/LG-009

---

# DESIGN.md · Logo types & design principles (LG-010)

> Written for AI coding agents. Values marked **OFFICIAL** come from the documented source named below; values marked **ESTIMATED** were measured by us from our own screenshots and are approximate. Never treat ESTIMATED values as official brand tokens.

## Overview
- Type: Guide · Category: H. Logos and Brand Identity
- Platforms: Web
- Color theme: Monochrome light · Layout pattern: Editorial · Mood: Educational
- License / terms: Illustration: original, made for this library

Five common logo types: wordmark (name in custom type), lettermark (initials), emblem (text inside a badge), abstract mark (a non-literal shape) and combination mark (symbol + name). Principles: keep it simple enough to draw from memory; test at 16px and in one color; design for black/white first; build on a grid with clear space; make sure it is distinctive in its category; plan horizontal, stacked and icon-only lockups.

### Analysis (ours)
Our own illustration and the referenced Wikipedia article: text-first layout with example marks; the illustration uses this site’s paper/ink/vermilion palette.

## Color tokens
No official color tokens documented for this entry.

ESTIMATED · dominant colors measured from our screenshot(s) of the source site (median-cut quantization; share = % of pixels). Approximate, not official:

- `#FFFFFF` ~73%
- `#9CA2A9` ~4%
- `#DAE0E9` ~3%
- `#B1BDD3` ~3%
- `#3B507D` ~3%

## Typography
No official type scale documented for this entry; use the product’s own typography guidance.

## Spacing, radii, shadows
Not documented for this entry. Do not invent values; derive from your own design system.

## Components
No component inventory documented for this entry.

## Layout rules
- Observed layout pattern: **Editorial** (from our captures).

## Do’s and don’ts
- Do: Keep chrome neutral and let content (images, icons, type) carry color.
- Don’t: Don’t introduce decorative color that competes with content.
- Do: follow the source’s license/terms listed above.
- Don’t: present ESTIMATED colors as official tokens.

## Sources
- https://en.wikipedia.org/wiki/Logo
- Library entry: https://design-library-byt.pages.dev/entry/LG-010

---

# DESIGN.md · Linear (WR-001)

> Written for AI coding agents. Values marked **OFFICIAL** come from the documented source named below; values marked **ESTIMATED** were measured by us from our own screenshots and are approximate. Never treat ESTIMATED values as official brand tokens.

## Overview
- Type: Website Reference · Category: I. Website References
- Platforms: Web, macOS, iOS
- Color theme: Monochrome dark · Layout pattern: Split hero · Mood: Precise, engineering-minimal
- License / terms: Screenshots: fair-use reference captures; site content © Linear

Dark, monochrome marketing site led by large product UI renders; tiered pricing table; sign-up page with a minimal centered auth card.

### Analysis (ours)
Captured linear.app: near-black canvas (#08090A ESTIMATED), large white headline and a product-UI render as the hero visual; pricing is a dark four-column table; sign-up is a small centered card. Accent color is almost absent.

## Color tokens
No official color tokens documented for this entry.

ESTIMATED · dominant colors measured from our screenshot(s) of the source site (median-cut quantization; share = % of pixels). Approximate, not official:

- `#08090A` ~42%
- `#F8F8F9` ~32%
- `#303135` ~4%

## Typography
No official type scale documented for this entry; use the product’s own typography guidance.

## Spacing, radii, shadows
Not documented for this entry. Do not invent values; derive from your own design system.

## Components
- Top nav with CTA
- Product UI render
- Pricing table
- Centered auth card

## In-app tokens (ESTIMATED)
ESTIMATED · sampled by us from logged-in screenshots of the product (free account, 2026-10-22 ~23:52 (UTC+8)). Most frequent color inside each named UI region; approximate, not official Linear tokens.

### Light
- `#EFEFF0` Sidebar background
- `#F9F9FA` Main canvas
- `#EFEFF0` Group header row
- `#E1E1E2` Active nav item
- `#3B3B3B` Primary text (darkest pixel of issue titles)
- `#6D78D5` Primary button (Create new issue)
- `#6D78D5` Toggle on
- `#FFFFFF` Settings card
- `#BDBDBE` Modal overlay (dimmed canvas)

### Dark
- `#09090A` Onboarding background
- `#121213` Onboarding input
- `#080809` Settings sidebar
- `#121213` Settings canvas
- `#1A1A1B` Settings card
- `#5E6AD2` Toggle on
- `#FFFFFF` Primary text (brightest pixel of “Preferences” heading)

### In-app patterns (observed)
- **App shell layout:** Persistent left sidebar (~130px of a 1024px viewport) on a slightly darker gray than the main canvas; the content area is an inset rounded panel with a header row (breadcrumb + actions) and a view-tab row. A slim bottom bar holds help and Agent shortcuts.
- **Sidebar navigation:** Personal items first (Inbox with an unread count, My issues, Agent), then collapsible groups: Workspace, Your teams (team → Home / Issues / Projects / Views) and Try (import, invite, connect GitHub). Small 14px icons, compact rows, active row as a soft gray pill.
- **Density:** High information density: ~23px issue rows in the captured list (ID, status icon, title, assignee avatar, date), small type and tight spacing; color is reserved for status and the purple primary actions.
- **Command menu pattern:** Ctrl+K opens a centered palette over the current view: one input (“Type a command or search…”, plus “Ask Linear”), results grouped by object type, each row with an icon and its single-key or chord shortcut (C, V, N then P). It teaches shortcuts while you search.
- **Empty state pattern:** A monochrome line-art illustration, one sentence (“No issues assigned to you”) and a single primary CTA. Filter chips (Assigned / Created / Subscribed / Activity) stay visible, so the user keeps their bearings.
- **Modal pattern:** Issue creation is a centered card over a dimmed shell: breadcrumb (team › New issue), large borderless title field, description, a row of property chips, expand and close icons, plus a “Create more” toggle for batch entry and one primary button.
- **Onboarding pattern:** Five dark split-screen steps after workspace creation: a short form on the left, blurred product art on the right, progress dots, and Skip on every step; integrations (GitHub, Slack) are offered but optional.
- **Theme system:** Preferences offer System preference, Light, Pure Light, Dark and more, each previewed with an “Aa” chip; a separate Code theme follows the interface theme unless overridden. Light and dark keep identical layouts; only surfaces and text tokens swap.

## Layout rules
- Observed layout pattern: **Split hero** (from our captures).
- Public flow (captured, stopped before any form submission): Landing (https://linear.app/) → Pricing (https://linear.app/pricing) → Sign-up entry (https://linear.app/signup)

## Do’s and don’ts
- Do: Use a near-black canvas with high-contrast white text and at most one accent.
- Don’t: Don’t add multiple saturated accents or light-mode shadows.
- Do: follow the source’s license/terms listed above.
- Don’t: present ESTIMATED colors as official tokens.

## Sources
- https://linear.app
- Capture: https://linear.app/
- Capture: https://linear.app/pricing
- Capture: https://linear.app/signup
- Library entry: https://design-library-byt.pages.dev/entry/WR-001

---

# DESIGN.md · Stripe (WR-002)

> Written for AI coding agents. Values marked **OFFICIAL** come from the documented source named below; values marked **ESTIMATED** were measured by us from our own screenshots and are approximate. Never treat ESTIMATED values as official brand tokens.

## Overview
- Type: Website Reference · Category: I. Website References
- Platforms: Web
- Color theme: Vibrant gradient · Layout pattern: Split hero · Mood: Polished, premium, energetic
- License / terms: Screenshots: fair-use reference captures; site content © Stripe

Light site with a signature gradient wave hero, logo wall, and modular pricing cards; contact-sales form as a conversion entry.

### Analysis (ours)
Captured stripe.com: white page with the signature multicolor gradient wave behind a left-aligned headline, a logo wall and modular pricing cards; contact form for sales.

## Color tokens
No official color tokens documented for this entry.

ESTIMATED · dominant colors measured from our screenshot(s) of the source site (median-cut quantization; share = % of pixels). Approximate, not official:

- `#FFFFFF` ~47%
- `#E39B86` ~13%
- `#845990` ~9%
- `#D4DCEE` ~8%
- `#FCD2A6` ~1%

## Typography
No official type scale documented for this entry; use the product’s own typography guidance.

## Spacing, radii, shadows
Not documented for this entry. Do not invent values; derive from your own design system.

## Components
- Mega-menu nav
- Gradient hero
- Logo wall
- Pricing cards
- Contact form

## Layout rules
- Observed layout pattern: **Split hero** (from our captures).
- Public flow (captured, stopped before any form submission): Landing (https://stripe.com/) → Pricing (https://stripe.com/pricing) → Contact sales entry (https://stripe.com/contact/sales)

## Do’s and don’ts
- Do: Reserve gradients for hero/feature moments; keep body sections calm.
- Don’t: Don’t put body text on busy gradients without a contrast check.
- Do: follow the source’s license/terms listed above.
- Don’t: present ESTIMATED colors as official tokens.

## Sources
- https://stripe.com
- Capture: https://stripe.com/
- Capture: https://stripe.com/pricing
- Capture: https://stripe.com/contact/sales
- Library entry: https://design-library-byt.pages.dev/entry/WR-002

---

# DESIGN.md · Vercel (WR-003)

> Written for AI coding agents. Values marked **OFFICIAL** come from the documented source named below; values marked **ESTIMATED** were measured by us from our own screenshots and are approximate. Never treat ESTIMATED values as official brand tokens.

## Overview
- Type: Website Reference · Category: I. Website References
- Platforms: Web
- Color theme: High-contrast · Layout pattern: Centered hero · Mood: Stark, editorial, technical
- License / terms: Screenshots: fair-use reference captures; site content © Vercel

High-contrast black/white editorial layout with grid-line motifs; three-tier pricing; split sign-up page with provider buttons.

### Analysis (ours)
Captured vercel.com: white canvas, oversized black headline, triangle logo mark and thin grid lines; pricing in three columns; sign-up as a split page with provider buttons.

## Color tokens
No official color tokens documented for this entry.

ESTIMATED · dominant colors measured from our screenshot(s) of the source site (median-cut quantization; share = % of pixels). Approximate, not official:

- `#FAFAFA` ~76%
- `#3B3B3B` ~2%
- `#A0A1A2` ~1%
- `#E0E1E2` ~1%
- `#BDBCBC` ~1%

## Typography
No official type scale documented for this entry; use the product’s own typography guidance.

## Spacing, radii, shadows
Not documented for this entry. Do not invent values; derive from your own design system.

## Components
- Top nav
- Grid-line hero
- Logo wall
- Three-tier pricing
- Provider sign-in buttons

## Layout rules
- Observed layout pattern: **Centered hero** (from our captures).
- Public flow (captured, stopped before any form submission): Landing (https://vercel.com/) → Pricing (https://vercel.com/pricing) → Sign-up entry (https://vercel.com/signup)

## Do’s and don’ts
- Do: Use pure black/white contrasts and strong type hierarchy.
- Don’t: Don’t use mid-grays for important text.
- Do: follow the source’s license/terms listed above.
- Don’t: present ESTIMATED colors as official tokens.

## Sources
- https://vercel.com
- Capture: https://vercel.com/
- Capture: https://vercel.com/pricing
- Capture: https://vercel.com/signup
- Library entry: https://design-library-byt.pages.dev/entry/WR-003

---

# DESIGN.md · Notion (WR-004)

> Written for AI coding agents. Values marked **OFFICIAL** come from the documented source named below; values marked **ESTIMATED** were measured by us from our own screenshots and are approximate. Never treat ESTIMATED values as official brand tokens.

## Overview
- Type: Website Reference · Category: I. Website References
- Platforms: Web, macOS, Windows, iOS, Android
- Color theme: Monochrome light · Layout pattern: Split hero · Mood: Friendly, illustrated
- License / terms: Screenshots: fair-use reference captures; site content © Notion

Light, illustrated marketing site; pricing with plan toggle and comparison; sign-up redirects to app.notion.com with an email-first form.

### Analysis (ours)
Captured notion.com: white page, black-and-white hand-drawn illustrations and a few accent highlights; pricing with plan cards and a comparison table; email-first sign-up.

## Color tokens
No official color tokens documented for this entry.

ESTIMATED · dominant colors measured from our screenshot(s) of the source site (median-cut quantization; share = % of pixels). Approximate, not official:

- `#FFFFFF` ~53%
- `#B7B7B7` ~12%
- `#596B7C` ~3%
- `#CCD3D0` ~2%
- `#9FC1D9` ~0%

## Typography
No official type scale documented for this entry; use the product’s own typography guidance.

## Spacing, radii, shadows
Not documented for this entry. Do not invent values; derive from your own design system.

## Components
- Top nav
- Illustrated hero
- Plan cards
- Comparison table
- Email sign-up form

## In-app tokens (ESTIMATED)
ESTIMATED · sampled by us from logged-in screenshots of the product (free account, 2026-10-23 ~00:03 (UTC+8)). Most frequent color inside each named UI region; approximate, not official Notion tokens.

### Light
- `#F9F8F7` Sidebar background
- `#FFFFFF` Page canvas
- `#EEECEB` Active sidebar item
- `#F9F8F7` Callout block background
- `#2C2C2B` Primary text (darkest pixel of page title)
- `#2783DE` Primary button blue (onboarding Continue)
- `#2783DE` Toggle on (settings)
- `#6F6F6F` Modal scrim over canvas

### Dark
- `#202020` Sidebar background
- `#191919` Page canvas
- `#373737` Active sidebar item
- `#383836` Callout block background
- `#F0EFED` Primary text (brightest pixel of page title)
- `#2783DE` Checkbox checked blue

### In-app patterns (observed)
- **Sidebar:** Warm off-white (#F9F8F7-ish) column with the workspace switcher on top, an icon row (Home, chat, Inbox, search), a dismissible “Set up your workspace” progress card, then Private pages with emoji icons, agents, Library, Help and Trash; New chat sits at the bottom. Active page = soft gray pill.
- **Block editor:** Pages are a centered, comfortable-width column with a large emoji icon, a big bold title and blocks underneath (to-dos, toggles, callouts, inline code). Every line is a block; the Welcome page teaches the model with a checklist.
- **Slash menu:** “/” on an empty block opens an inline, keyboard-first menu anchored to the caret: grouped sections (Suggested, Basic blocks), icon + name rows, Markdown shortcuts on the right (#, ##, -, 1.), and an esc hint.
- **Cover and icon pickers:** Both are anchored popovers with tabs (Gallery/Upload/Link/Unsplash; Emoji/Icons/Upload). Covers offer flat colors, gradients and textures; the emoji grid is dense, with filter, random and skin-tone controls.
- **Database views:** One database, multiple views as tabs: Table (spreadsheet rows, “+ Add property”) and Board (status columns tinted gray/blue/green with matching pills). Toolbar icons (filter, sort, automations, search, settings) and a blue New split button sit on the right.
- **Quick find:** Search is a large centered modal with filters as chips and a split result/preview layout, so you can check a page before opening it; Ctrl+Enter opens in a new tab.
- **Modal pattern:** Big modals (Add new, Search, Settings) dim the workspace with a gray scrim and use white rounded panels with their own internal navigation.
- **Theme system:** Settings → Preferences → Appearance: Theme (Use system setting / Light / Dark) and a separate High contrast option (Beta). Dark keeps the same layout and swaps surfaces to near-black grays; blue stays the accent.
- **Density:** Comfortable: generous page margins and 14–16px text in the editor, compact 26-28px sidebar rows; color is used sparingly (blue actions, tinted status pills).

## Layout rules
- Observed layout pattern: **Split hero** (from our captures).
- Public flow (captured, stopped before any form submission): Landing (https://www.notion.com/) → Pricing (https://www.notion.com/pricing) → Sign-up entry (https://app.notion.com/signup)

## Do’s and don’ts
- Do: Keep chrome neutral and let content (images, icons, type) carry color.
- Don’t: Don’t introduce decorative color that competes with content.
- Do: follow the source’s license/terms listed above.
- Don’t: present ESTIMATED colors as official tokens.

## Sources
- https://www.notion.com
- Capture: https://www.notion.com/
- Capture: https://www.notion.com/pricing
- Capture: https://app.notion.com/signup
- Library entry: https://design-library-byt.pages.dev/entry/WR-004

---

# DESIGN.md · Raycast (WR-005)

> Written for AI coding agents. Values marked **OFFICIAL** come from the documented source named below; values marked **ESTIMATED** were measured by us from our own screenshots and are approximate. Never treat ESTIMATED values as official brand tokens.

## Overview
- Type: Website Reference · Category: I. Website References
- Platforms: Web, macOS, Windows
- Color theme: Monochrome dark · Layout pattern: Centered hero · Mood: Glossy, premium, bold
- License / terms: Screenshots: fair-use reference captures; site content © Raycast

Dark site with glossy red 3D hero art; pricing tiers with toggle; extension Store browsing as the key public flow.

### Analysis (ours)
Captured raycast.com: near-black background with a glossy red 3D stripe hero and centered headline; pricing tiers on dark cards; extension store as an app grid.

## Color tokens
No official color tokens documented for this entry.

ESTIMATED · dominant colors measured from our screenshot(s) of the source site (median-cut quantization; share = % of pixels). Approximate, not official:

- `#07080A` ~37%
- `#A6636D` ~8%
- `#33171C` ~7%

## Typography
No official type scale documented for this entry; use the product’s own typography guidance.

## Spacing, radii, shadows
Not documented for this entry. Do not invent values; derive from your own design system.

## Components
- Top nav
- 3D hero art
- Dark pricing cards
- Extension store grid

## Layout rules
- Observed layout pattern: **Centered hero** (from our captures).
- Public flow (captured, stopped before any form submission): Landing (https://www.raycast.com/) → Pricing (https://www.raycast.com/pricing) → Store (https://www.raycast.com/store)

## Do’s and don’ts
- Do: Use a near-black canvas with high-contrast white text and at most one accent.
- Don’t: Don’t add multiple saturated accents or light-mode shadows.
- Do: follow the source’s license/terms listed above.
- Don’t: present ESTIMATED colors as official tokens.

## Sources
- https://www.raycast.com
- Capture: https://www.raycast.com/
- Capture: https://www.raycast.com/pricing
- Capture: https://www.raycast.com/store
- Library entry: https://design-library-byt.pages.dev/entry/WR-005

---

# DESIGN.md · Arc (WR-006)

> Written for AI coding agents. Values marked **OFFICIAL** come from the documented source named below; values marked **ESTIMATED** were measured by us from our own screenshots and are approximate. Never treat ESTIMATED values as official brand tokens.

## Overview
- Type: Website Reference · Category: I. Website References
- Platforms: Web, macOS, Windows, iOS
- Color theme: Vibrant gradient · Layout pattern: Centered hero · Mood: Playful, colorful
- License / terms: Screenshots: fair-use reference captures; site content © Arc

Bright, playful browser marketing site; Max feature page with video; download page as the conversion step.

### Analysis (ours)
Captured arc.net: bright, saturated blue/purple gradient sections and stickers; Max page with video; download page as the conversion step.

## Color tokens
No official color tokens documented for this entry.

ESTIMATED · dominant colors measured from our screenshot(s) of the source site (median-cut quantization; share = % of pixels). Approximate, not official:

- `#FAFAFA` ~14%
- `#3E45FA` ~14%
- `#615AEC` ~9%
- `#262282` ~9%
- `#C3BFC5` ~7%
- `#8D84D5` ~5%

## Typography
No official type scale documented for this entry; use the product’s own typography guidance.

## Spacing, radii, shadows
Not documented for this entry. Do not invent values; derive from your own design system.

## Components
- Banner
- Gradient sections
- Video embed
- Download CTA

## Layout rules
- Observed layout pattern: **Centered hero** (from our captures).
- Public flow (captured, stopped before any form submission): Landing (https://arc.net/) → Max features (https://arc.net/max) → Download (https://arc.net/download)

## Do’s and don’ts
- Do: Reserve gradients for hero/feature moments; keep body sections calm.
- Don’t: Don’t put body text on busy gradients without a contrast check.
- Do: follow the source’s license/terms listed above.
- Don’t: present ESTIMATED colors as official tokens.

## Sources
- https://arc.net
- Capture: https://arc.net/
- Capture: https://arc.net/max
- Capture: https://arc.net/download
- Library entry: https://design-library-byt.pages.dev/entry/WR-006

---

# DESIGN.md · Framer (WR-007)

> Written for AI coding agents. Values marked **OFFICIAL** come from the documented source named below; values marked **ESTIMATED** were measured by us from our own screenshots and are approximate. Never treat ESTIMATED values as official brand tokens.

## Overview
- Type: Website Reference · Category: I. Website References
- Platforms: Web
- Color theme: Monochrome dark · Layout pattern: Centered hero · Mood: Futuristic, motion-heavy
- License / terms: Screenshots: fair-use reference captures; site content © Framer

Dark, motion-heavy site; pricing with site-plan cards; sign-up entry redirects to a minimal login/sign-up page.

### Analysis (ours)
Captured framer.com: black canvas, large white headline, glowing blue frame visual; pricing on dark cards; sign-up redirects to a minimal login page.

## Color tokens
No official color tokens documented for this entry.

ESTIMATED · dominant colors measured from our screenshot(s) of the source site (median-cut quantization; share = % of pixels). Approximate, not official:

- `#000000` ~42%
- `#FFFFFF` ~34%
- `#01102C` ~3%
- `#23304C` ~2%
- `#5B768C` ~1%
- `#E4E5E6` ~1%

## Typography
No official type scale documented for this entry; use the product’s own typography guidance.

## Spacing, radii, shadows
Not documented for this entry. Do not invent values; derive from your own design system.

## Components
- Top nav
- Glow hero
- Pricing cards
- Login card

## Layout rules
- Observed layout pattern: **Centered hero** (from our captures).
- Public flow (captured, stopped before any form submission): Landing (https://www.framer.com/) → Pricing (https://www.framer.com/pricing) → Sign-up entry (https://framer.com/login)

## Do’s and don’ts
- Do: Use a near-black canvas with high-contrast white text and at most one accent.
- Don’t: Don’t add multiple saturated accents or light-mode shadows.
- Do: follow the source’s license/terms listed above.
- Don’t: present ESTIMATED colors as official tokens.

## Sources
- https://www.framer.com
- Capture: https://www.framer.com/
- Capture: https://www.framer.com/pricing
- Capture: https://framer.com/login
- Library entry: https://design-library-byt.pages.dev/entry/WR-007

---

# DESIGN.md · Apple (WR-008)

> Written for AI coding agents. Values marked **OFFICIAL** come from the documented source named below; values marked **ESTIMATED** were measured by us from our own screenshots and are approximate. Never treat ESTIMATED values as official brand tokens.

## Overview
- Type: Website Reference · Category: I. Website References
- Platforms: Web
- Color theme: Monochrome light · Layout pattern: Centered hero · Mood: Premium, product-photography
- License / terms: Screenshots: fair-use reference captures; site content © Apple

Product-photography-led pages with large headlines; iPhone overview with model lineup; store 'Buy iPhone' model picker (no login needed).

### Analysis (ours)
Captured apple.com: centered product headlines over large photography, stacked full-width tiles; iPhone page with a model lineup; store model picker.

## Color tokens
No official color tokens documented for this entry.

ESTIMATED · dominant colors measured from our screenshot(s) of the source site (median-cut quantization; share = % of pixels). Approximate, not official:

- `#FFFFFF` ~27%
- `#717073` ~14%

## Typography
No official type scale documented for this entry; use the product’s own typography guidance.

## Spacing, radii, shadows
Not documented for this entry. Do not invent values; derive from your own design system.

## Components
- Global nav
- Full-width product tiles
- Model lineup
- Store picker

## Layout rules
- Observed layout pattern: **Centered hero** (from our captures).
- Public flow (captured, stopped before any form submission): Landing (https://www.apple.com/) → iPhone overview (https://www.apple.com/iphone/) → Buy iPhone (store) (https://www.apple.com/shop/buy-iphone)

## Do’s and don’ts
- Do: Keep chrome neutral and let content (images, icons, type) carry color.
- Don’t: Don’t introduce decorative color that competes with content.
- Do: follow the source’s license/terms listed above.
- Don’t: present ESTIMATED colors as official tokens.

## Sources
- https://www.apple.com
- Capture: https://www.apple.com/
- Capture: https://www.apple.com/iphone/
- Capture: https://www.apple.com/shop/buy-iphone
- Library entry: https://design-library-byt.pages.dev/entry/WR-008

---

# DESIGN.md · Airbnb (WR-009)

> Written for AI coding agents. Values marked **OFFICIAL** come from the documented source named below; values marked **ESTIMATED** were measured by us from our own screenshots and are approximate. Never treat ESTIMATED values as official brand tokens.

## Overview
- Type: Website Reference · Category: I. Website References
- Platforms: Web, iOS, Android
- Color theme: Monochrome light · Layout pattern: Card grid · Mood: Warm, photographic, search-first
- License / terms: Screenshots: fair-use reference captures; site content © Airbnb

Search-first layout with photo cards; search results with map split view; host landing page with an earnings estimator.

### Analysis (ours)
Captured airbnb.com: search bar on top and a grid of photo cards; search results split with a map; host page with an earnings estimator and map.

## Color tokens
No official color tokens documented for this entry.

ESTIMATED · dominant colors measured from our screenshot(s) of the source site (median-cut quantization; share = % of pixels). Approximate, not official:

- `#FFFFFF` ~29%
- `#999999` ~17%
- `#4A3E3D` ~9%
- `#E2E8E2` ~6%
- `#BEBBB7` ~4%

## Typography
No official type scale documented for this entry; use the product’s own typography guidance.

## Spacing, radii, shadows
Not documented for this entry. Do not invent values; derive from your own design system.

## Components
- Search bar
- Photo cards
- Map split view
- Estimator

## Layout rules
- Observed layout pattern: **Card grid** (from our captures).
- Public flow (captured, stopped before any form submission): Landing (https://www.airbnb.com/) → Search results (https://www.airbnb.com/s/Tokyo/homes) → Host entry (https://www.airbnb.com/host/homes)

## Do’s and don’ts
- Do: Keep chrome neutral and let content (images, icons, type) carry color.
- Don’t: Don’t introduce decorative color that competes with content.
- Do: follow the source’s license/terms listed above.
- Don’t: present ESTIMATED colors as official tokens.

## Sources
- https://www.airbnb.com
- Capture: https://www.airbnb.com/
- Capture: https://www.airbnb.com/s/Tokyo/homes
- Capture: https://www.airbnb.com/host/homes
- Library entry: https://design-library-byt.pages.dev/entry/WR-009

---

# DESIGN.md · DiceBear (AV-001)

> Written for AI coding agents. Values marked **OFFICIAL** come from the documented source named below; values marked **ESTIMATED** were measured by us from our own screenshots and are approximate. Never treat ESTIMATED values as official brand tokens.

## Overview
- Type: Avatar Library · Category: J. Avatars and Illustrations
- Platforms: Web
- Color theme: Monochrome light · Layout pattern: Split hero · Mood: Friendly, developer-focused
- License / terms: Code: MIT. Styles: each artist’s own license: 42 CC0 1.0, 14 CC BY 4.0, 1 MIT, 4 ‘free for personal and commercial use’ (see dicebear.com/licenses). Public HTTP API: free for non-commercial use, rate-limited

Avatar generator with 60+ styles, deterministic from a seed (e.g. a user ID). Use it via the HTTP API, JS library, CLI or Figma plugin. For commercial use or higher limits, self-host the API or use the JS library.

### Analysis (ours)
Captured dicebear.com: split hero with “Pick a seed. Get an avatar.” on the left and a cluster of sample avatars on the right; near-white UI so the avatars carry the color.

## Color tokens
No official color tokens documented for this entry.

ESTIMATED · dominant colors measured from our screenshot(s) of the source site (median-cut quantization; share = % of pixels). Approximate, not official:

- `#FAFAF9` ~59%
- `#868887` ~5%

## Typography
No official type scale documented for this entry; use the product’s own typography guidance.

## Spacing, radii, shadows
Not documented for this entry. Do not invent values; derive from your own design system.

## Components
No component inventory documented for this entry.

## Layout rules
- Observed layout pattern: **Split hero** (from our captures).

## Usage
```
HTTP API: https://api.dicebear.com/10.x/lorelei/svg?seed=user-8f3a2c
JS: import { createAvatar } from '@dicebear/core'; import { lorelei } from '@dicebear/collection'; const svg = createAvatar(lorelei, { seed: 'user-8f3a2c' }).toString();
```

## Do’s and don’ts
- Do: Keep chrome neutral and let content (images, icons, type) carry color.
- Don’t: Don’t introduce decorative color that competes with content.
- Do: follow the source’s license/terms listed above.
- Don’t: present ESTIMATED colors as official tokens.

## Sources
- https://www.dicebear.com/
- Library entry: https://design-library-byt.pages.dev/entry/AV-001

---

# DESIGN.md · DiceBear · Lorelei (AV-002)

> Written for AI coding agents. Values marked **OFFICIAL** come from the documented source named below; values marked **ESTIMATED** were measured by us from our own screenshots and are approximate. Never treat ESTIMATED values as official brand tokens.

## Overview
- Type: Avatar Style · Category: J. Avatars and Illustrations
- Platforms: Web
- Color theme: Monochrome light · Layout pattern: Documentation · Mood: Line-art, friendly
- License / terms: CC0 1.0 (remix of Lorelei by Lisa Wischofsky, per dicebear.com/licenses)

Clean black line-art portrait avatars; a neutral variant (lorelei-neutral) is also CC0. Good default for profile placeholders in minimal UIs.

### Analysis (ours)
Captured the Lorelei style page: documentation layout with a sidebar of styles, avatar previews and code tabs. The style is black line art on transparent background.

## Color tokens
No official color tokens documented for this entry.

ESTIMATED · dominant colors measured from our screenshot(s) of the source site (median-cut quantization; share = % of pixels). Approximate, not official:

- `#FAFAF9` ~51%
- `#CCCCCC` ~8%

## Typography
No official type scale documented for this entry; use the product’s own typography guidance.

## Spacing, radii, shadows
Not documented for this entry. Do not invent values; derive from your own design system.

## Components
No component inventory documented for this entry.

## Layout rules
- Observed layout pattern: **Documentation** (from our captures).

## Usage
```
https://api.dicebear.com/10.x/lorelei/svg?seed=Ada&backgroundColor=f3f0e8
```

## Do’s and don’ts
- Do: Keep chrome neutral and let content (images, icons, type) carry color.
- Don’t: Don’t introduce decorative color that competes with content.
- Do: follow the source’s license/terms listed above.
- Don’t: present ESTIMATED colors as official tokens.

## Sources
- https://www.dicebear.com/styles/lorelei/
- Library entry: https://design-library-byt.pages.dev/entry/AV-002

---

# DESIGN.md · DiceBear · Notionists (Notion-style avatars) (AV-003)

> Written for AI coding agents. Values marked **OFFICIAL** come from the documented source named below; values marked **ESTIMATED** were measured by us from our own screenshots and are approximate. Never treat ESTIMATED values as official brand tokens.

## Overview
- Type: Avatar Style · Category: J. Avatars and Illustrations
- Platforms: Web
- Color theme: Monochrome light · Layout pattern: Documentation · Mood: Notion-like, sketchy
- License / terms: CC0 1.0 (remix of Notionists by Zoish, per dicebear.com/licenses)

Hand-drawn, Notion-like black-and-white heads. The neutral variant (notionists-neutral) is also CC0. Works well in docs and collaboration UIs.

### Analysis (ours)
Captured the Notionists style page: same documentation layout; the avatars are black hand-drawn heads with optional color backgrounds.

## Color tokens
No official color tokens documented for this entry.

ESTIMATED · dominant colors measured from our screenshot(s) of the source site (median-cut quantization; share = % of pixels). Approximate, not official:

- `#FAFAF9` ~46%
- `#CBCBCC` ~8%

## Typography
No official type scale documented for this entry; use the product’s own typography guidance.

## Spacing, radii, shadows
Not documented for this entry. Do not invent values; derive from your own design system.

## Components
No component inventory documented for this entry.

## Layout rules
- Observed layout pattern: **Documentation** (from our captures).

## Usage
```
https://api.dicebear.com/10.x/notionists/svg?seed=Kenji
```

## Do’s and don’ts
- Do: Keep chrome neutral and let content (images, icons, type) carry color.
- Don’t: Don’t introduce decorative color that competes with content.
- Do: follow the source’s license/terms listed above.
- Don’t: present ESTIMATED colors as official tokens.

## Sources
- https://www.dicebear.com/styles/notionists/
- Library entry: https://design-library-byt.pages.dev/entry/AV-003

---

# DESIGN.md · Boring Avatars (AV-004)

> Written for AI coding agents. Values marked **OFFICIAL** come from the documented source named below; values marked **ESTIMATED** were measured by us from our own screenshots and are approximate. Never treat ESTIMATED values as official brand tokens.

## Overview
- Type: Avatar Library · Category: J. Avatars and Illustrations
- Platforms: Web
- Color theme: Pastel · Layout pattern: Card grid · Mood: Playful, geometric
- License / terms: React library: MIT (boring-avatars v2.0.4 on npm). The hosted avatar service is a separate subscription product

Open-source React component that generates abstract SVG avatars (marble, beam, pixel, sunset, ring, bauhaus) from a name and a palette you provide.

### Analysis (ours)
Captured boringavatars.com: a dashboard-like grid of generated avatars and palette controls on soft teal/gray surfaces.

## Color tokens
No official color tokens documented for this entry.

ESTIMATED · dominant colors measured from our screenshot(s) of the source site (median-cut quantization; share = % of pixels). Approximate, not official:

- `#FFFFFF` ~27%
- `#C1D8D9` ~14%
- `#919C9D` ~8%

## Typography
No official type scale documented for this entry; use the product’s own typography guidance.

## Spacing, radii, shadows
Not documented for this entry. Do not invent values; derive from your own design system.

## Components
No component inventory documented for this entry.

## Layout rules
- Observed layout pattern: **Card grid** (from our captures).

## Usage
```
npm i boring-avatars
import Avatar from 'boring-avatars';
<Avatar name="Maria Mitchell" variant="beam" colors={['#16140F','#D9411E','#F3F0E8','#E8B04B','#5E584C']} />
```

## Do’s and don’ts
- Do: Use soft tonal surfaces with one stronger accent for actions.
- Don’t: Don’t rely on pastel-on-pastel for text; check contrast.
- Do: follow the source’s license/terms listed above.
- Don’t: present ESTIMATED colors as official tokens.

## Sources
- https://boringavatars.com/
- Library entry: https://design-library-byt.pages.dev/entry/AV-004

---

# DESIGN.md · Multiavatar (AV-005)

> Written for AI coding agents. Values marked **OFFICIAL** come from the documented source named below; values marked **ESTIMATED** were measured by us from our own screenshots and are approximate. Never treat ESTIMATED values as official brand tokens.

## Overview
- Type: Avatar Library · Category: J. Avatars and Illustrations
- Platforms: Web
- Color theme: Monochrome light · Layout pattern: Centered hero · Mood: Simple, single-purpose
- License / terms: Multiavatar License v1.0: free for non-commercial and commercial use under its conditions (read the license before use)

Generates multicultural avatars from any string; JS library and API. Link-only here: no example avatars are reproduced, so the license conditions can be read at the source first.

### Analysis (ours)
Captured multiavatar.com: a centered avatar with a few actions and a short explanation; minimal white UI.

## Color tokens
No official color tokens documented for this entry.

ESTIMATED · dominant colors measured from our screenshot(s) of the source site (median-cut quantization; share = % of pixels). Approximate, not official:

- `#FFFFFF` ~83%
- `#C0C2C1` ~3%
- `#65587D` ~3%
- `#E5E2DA` ~1%
- `#FDF9AE` ~0%
- `#B4FFB8` ~0%

## Typography
No official type scale documented for this entry; use the product’s own typography guidance.

## Spacing, radii, shadows
Not documented for this entry. Do not invent values; derive from your own design system.

## Components
No component inventory documented for this entry.

## Layout rules
- Observed layout pattern: **Centered hero** (from our captures).

## Usage
```
npm i @multiavatar/multiavatar
import multiavatar from '@multiavatar/multiavatar/esm'; const svg = multiavatar('Binx Bond');
```

## Do’s and don’ts
- Do: Keep chrome neutral and let content (images, icons, type) carry color.
- Don’t: Don’t introduce decorative color that competes with content.
- Do: follow the source’s license/terms listed above.
- Don’t: present ESTIMATED colors as official tokens.

## Sources
- https://multiavatar.com/
- Library entry: https://design-library-byt.pages.dev/entry/AV-005

---

# DESIGN.md · Open Peeps (AV-006)

> Written for AI coding agents. Values marked **OFFICIAL** come from the documented source named below; values marked **ESTIMATED** were measured by us from our own screenshots and are approximate. Never treat ESTIMATED values as official brand tokens.

## Overview
- Type: Illustration Library · Category: J. Avatars and Illustrations
- Platforms: Web
- Color theme: High-contrast · Layout pattern: Split hero · Mood: Hand-drawn, expressive
- License / terms: CC0 (public domain), by Pablo Stanley

Hand-drawn mix-and-match people library (poses, faces, hair, clothing). Also available as a CC0 DiceBear style (open-peeps).

### Analysis (ours)
Captured openpeeps.com: split hero with a large title on white and a dense black-and-white crowd of peeps on the right.

## Color tokens
No official color tokens documented for this entry.

ESTIMATED · dominant colors measured from our screenshot(s) of the source site (median-cut quantization; share = % of pixels). Approximate, not official:

- `#FFFFFF` ~50%
- `#000000` ~24%
- `#BABABA` ~5%
- `#E7E6E5` ~4%
- `#1F1D1E` ~4%
- `#898788` ~4%

## Typography
No official type scale documented for this entry; use the product’s own typography guidance.

## Spacing, radii, shadows
Not documented for this entry. Do not invent values; derive from your own design system.

## Components
No component inventory documented for this entry.

## Layout rules
- Observed layout pattern: **Split hero** (from our captures).

## Usage
```
Figma/Sketch: download the library and combine nested components.
Avatar API (CC0 remix): https://api.dicebear.com/10.x/open-peeps/svg?seed=Lina
```

## Do’s and don’ts
- Do: Use pure black/white contrasts and strong type hierarchy.
- Don’t: Don’t use mid-grays for important text.
- Do: follow the source’s license/terms listed above.
- Don’t: present ESTIMATED colors as official tokens.

## Sources
- https://www.openpeeps.com/
- Library entry: https://design-library-byt.pages.dev/entry/AV-006

---

# DESIGN.md · Humaaans (AV-007)

> Written for AI coding agents. Values marked **OFFICIAL** come from the documented source named below; values marked **ESTIMATED** were measured by us from our own screenshots and are approximate. Never treat ESTIMATED values as official brand tokens.

## Overview
- Type: Illustration Library · Category: J. Avatars and Illustrations
- Platforms: Web
- Color theme: Vibrant gradient · Layout pattern: Split hero · Mood: Bold, illustrative
- License / terms: CC0 (public domain), by Pablo Stanley

Mix-and-match vector people illustrations (bodies, hair, tops, pants, poses) for onboarding, empty states and marketing. Link-only here.

### Analysis (ours)
Captured humaaans.com: oversized illustrated people overlapping the headline, saturated blue and warm skin tones on white.

## Color tokens
No official color tokens documented for this entry.

ESTIMATED · dominant colors measured from our screenshot(s) of the source site (median-cut quantization; share = % of pixels). Approximate, not official:

- `#FFFFFF` ~63%
- `#A46C46` ~6%
- `#384BE7` ~5%
- `#000000` ~5%
- `#9FBAC0` ~5%
- `#27277C` ~4%

## Typography
No official type scale documented for this entry; use the product’s own typography guidance.

## Spacing, radii, shadows
Not documented for this entry. Do not invent values; derive from your own design system.

## Components
No component inventory documented for this entry.

## Layout rules
- Observed layout pattern: **Split hero** (from our captures).

## Usage
```
Download the library (Figma/Sketch/Studio) and swap components; or use it inside Blush.
```

## Do’s and don’ts
- Do: Reserve gradients for hero/feature moments; keep body sections calm.
- Don’t: Don’t put body text on busy gradients without a contrast check.
- Do: follow the source’s license/terms listed above.
- Don’t: present ESTIMATED colors as official tokens.

## Sources
- https://www.humaaans.com/
- Library entry: https://design-library-byt.pages.dev/entry/AV-007

---

# DESIGN.md · unDraw (AV-008)

> Written for AI coding agents. Values marked **OFFICIAL** come from the documented source named below; values marked **ESTIMATED** were measured by us from our own screenshots and are approximate. Never treat ESTIMATED values as official brand tokens.

## Overview
- Type: Illustration Library · Category: J. Avatars and Illustrations
- Platforms: Web
- Color theme: Monochrome light · Layout pattern: Centered hero · Mood: Calm, flat
- License / terms: unDraw license: free for commercial and personal use without attribution; not allowed: replicating unDraw, redistributing illustration packs, ML training, or building integrations

Large set of flat SVG illustrations with one customizable accent color. Link-only here because packs may not be redistributed.

### Analysis (ours)
Captured undraw.co: centered headline with a color picker and a grid of flat illustrations in a single customizable accent (indigo by default).

## Color tokens
No official color tokens documented for this entry.

ESTIMATED · dominant colors measured from our screenshot(s) of the source site (median-cut quantization; share = % of pixels). Approximate, not official:

- `#FFFFFF` ~68%
- `#6869B2` ~3%
- `#ADB4CD` ~2%
- `#D9DCEF` ~1%

## Typography
No official type scale documented for this entry; use the product’s own typography guidance.

## Spacing, radii, shadows
Not documented for this entry. Do not invent values; derive from your own design system.

## Components
No component inventory documented for this entry.

## Layout rules
- Observed layout pattern: **Centered hero** (from our captures).

## Usage
```
Pick an accent color on undraw.co, search, and download single SVG/PNG files.
```

## Do’s and don’ts
- Do: Keep chrome neutral and let content (images, icons, type) carry color.
- Don’t: Don’t introduce decorative color that competes with content.
- Do: follow the source’s license/terms listed above.
- Don’t: present ESTIMATED colors as official tokens.

## Sources
- https://undraw.co/
- Library entry: https://design-library-byt.pages.dev/entry/AV-008

---

# DESIGN.md · Storyset (AV-009)

> Written for AI coding agents. Values marked **OFFICIAL** come from the documented source named below; values marked **ESTIMATED** were measured by us from our own screenshots and are approximate. Never treat ESTIMATED values as official brand tokens.

## Overview
- Type: Illustration Library · Category: J. Avatars and Illustrations
- Platforms: Web
- Color theme: Bold color accent · Layout pattern: Card grid · Mood: Corporate, illustrative
- License / terms: Storyset (Freepik) terms: free use requires visible attribution to Storyset with a link; no attribution with a Flaticon Premium subscription; no redistribution

Customizable and animatable illustrations in several styles, editable in the browser. Link-only here.

### Analysis (ours)
Captured storyset.com: a deep-blue hero band with search, then a grid of illustration cards and style filters.

## Color tokens
No official color tokens documented for this entry.

ESTIMATED · dominant colors measured from our screenshot(s) of the source site (median-cut quantization; share = % of pixels). Approximate, not official:

- `#FFFFFF` ~23%
- `#064183` ~13%
- `#0B315B` ~9%
- `#E0E2DB` ~6%
- `#57647D` ~4%

## Typography
No official type scale documented for this entry; use the product’s own typography guidance.

## Spacing, radii, shadows
Not documented for this entry. Do not invent values; derive from your own design system.

## Components
No component inventory documented for this entry.

## Layout rules
- Observed layout pattern: **Card grid** (from our captures).

## Usage
```
Credit line: “Illustrations by Storyset” linking to https://storyset.com
```

## Do’s and don’ts
- Do: Let one strong brand color dominate key surfaces.
- Don’t: Don’t dilute it with competing accent colors.
- Do: follow the source’s license/terms listed above.
- Don’t: present ESTIMATED colors as official tokens.

## Sources
- https://storyset.com/
- Library entry: https://design-library-byt.pages.dev/entry/AV-009

---

# DESIGN.md · Blush (AV-010)

> Written for AI coding agents. Values marked **OFFICIAL** come from the documented source named below; values marked **ESTIMATED** were measured by us from our own screenshots and are approximate. Never treat ESTIMATED values as official brand tokens.

## Overview
- Type: Illustration Library · Category: J. Avatars and Illustrations
- Platforms: Web
- Color theme: Pastel · Layout pattern: Split hero · Mood: Playful, illustrative
- License / terms: Blush license: free for commercial and non-commercial use; no resale/redistribution, no merchandising, no competing service; artists keep ownership; credit appreciated, not required

Illustration builder with collections from many artists (including Open Peeps and Humaaans); customize and export. Link-only here.

### Analysis (ours)
Captured blush.design: split hero with a large colorful character illustration and a short headline on white.

## Color tokens
No official color tokens documented for this entry.

ESTIMATED · dominant colors measured from our screenshot(s) of the source site (median-cut quantization; share = % of pixels). Approximate, not official:

- `#FFFFFF` ~77%
- `#000000` ~5%
- `#B07F6B` ~4%
- `#B5B0A3` ~3%
- `#EFEFE0` ~2%
- `#F2B1BD` ~2%

## Typography
No official type scale documented for this entry; use the product’s own typography guidance.

## Spacing, radii, shadows
Not documented for this entry. Do not invent values; derive from your own design system.

## Components
No component inventory documented for this entry.

## Layout rules
- Observed layout pattern: **Split hero** (from our captures).

## Usage
```
Customize on blush.design, export SVG/PNG (some features are Pro).
```

## Do’s and don’ts
- Do: Use soft tonal surfaces with one stronger accent for actions.
- Don’t: Don’t rely on pastel-on-pastel for text; check contrast.
- Do: follow the source’s license/terms listed above.
- Don’t: present ESTIMATED colors as official tokens.

## Sources
- https://blush.design/
- Library entry: https://design-library-byt.pages.dev/entry/AV-010

---

# DESIGN.md · Linear onboarding flow (FL-001)

> Written for AI coding agents. Values marked **OFFICIAL** come from the documented source named below; values marked **ESTIMATED** were measured by us from our own screenshots and are approximate. Never treat ESTIMATED values as official brand tokens.

## Overview
- Type: UX Flow · Category: B. UX Flows and Interaction Patterns
- Platforms: Web
- Color theme: Monochrome dark · Layout pattern: Split hero · Mood: Focused, low-friction, optional steps
- License / terms: In-app screenshots: reference captures from a free account; UI and marks © Linear

Linear’s logged-in onboarding, captured step by step from a free account: workspace creation, five optional setup steps, and the first issues view.

### Analysis (ours)
Our free-account captures: after a light ‘Create workspace’ form, onboarding switches to five dark split-screen steps (profile, invite, GitHub, Slack, updates) with progress dots and Skip on every step, then lands in the issues view pre-filled with four starter issues. Lesson: keep each step to one decision, make integrations optional, and seed the product with sample work so the first screen is never empty.

## Color tokens
No official color tokens documented for this entry.

ESTIMATED · dominant colors measured from our screenshot(s) of the source site (median-cut quantization; share = % of pixels). Approximate, not official:

- `#09090A` ~34%
- `#F8F8F9` ~17%
- `#717172` ~0%

## Typography
No official type scale documented for this entry; use the product’s own typography guidance.

## Spacing, radii, shadows
Not documented for this entry. Do not invent values; derive from your own design system.

## Components
- Centered form
- Split-screen step
- Progress dots
- Skip / Continue button pair
- Integration auth button
- Toggle list

## Layout rules
- Observed layout pattern: **Split hero** (from our captures).
- Public flow (captured, stopped before any form submission): Create workspace (linear.app (in-app, logged in)) → Set up profile (linear.app (in-app, logged in)) → Invite teammates (linear.app (in-app, logged in)) → Connect GitHub (linear.app (in-app, logged in)) → Connect Slack (linear.app (in-app, logged in)) → Subscribe to updates (linear.app (in-app, logged in)) → Issues view (app shell) (linear.app (in-app, logged in))

## Do’s and don’ts
- Do: Use a near-black canvas with high-contrast white text and at most one accent.
- Don’t: Don’t add multiple saturated accents or light-mode shadows.
- Do: follow the source’s license/terms listed above.
- Don’t: present ESTIMATED colors as official tokens.

## Sources
- https://linear.app
- Capture: linear.app (in-app, logged in)
- Capture: linear.app (in-app, logged in)
- Capture: linear.app (in-app, logged in)
- Capture: linear.app (in-app, logged in)
- Capture: linear.app (in-app, logged in)
- Capture: linear.app (in-app, logged in)
- Capture: linear.app (in-app, logged in)
- Library entry: https://design-library-byt.pages.dev/entry/FL-001

---

# DESIGN.md · Notion onboarding flow (FL-002)

> Written for AI coding agents. Values marked **OFFICIAL** come from the documented source named below; values marked **ESTIMATED** were measured by us from our own screenshots and are approximate. Never treat ESTIMATED values as official brand tokens.

## Overview
- Type: UX Flow · Category: B. UX Flows and Interaction Patterns
- Platforms: Web
- Color theme: Warm neutral · Layout pattern: Centered hero · Mood: Friendly, guided, low-pressure
- License / terms: In-app screenshots: reference captures from a free personal account; UI and marks © Notion Labs

Notion’s logged-in onboarding after email sign-up, captured from a free personal account: workspace choice, use-case question, an optional expert-session offer, and the Welcome page that teaches the editor.

### Analysis (ours)
Our free-account captures: after email sign-up (not shown), Notion asks you to join an invited workspace or start your own, then uses one centered template (blue texture band, small illustration, progress bar, big choice cards or a booking grid, full-width blue button) for the setup questions. Every optional step has Skip. It ends on a Welcome page whose to-do checklist teaches the block editor. Lesson: ask few questions, keep one visual template, and make the first page a tutorial you can act on.

## Color tokens
No official color tokens documented for this entry.

ESTIMATED · dominant colors measured from our screenshot(s) of the source site (median-cut quantization; share = % of pixels). Approximate, not official:

- `#FFFFFF` ~84%
- `#D6EBFC` ~3%
- `#7C8E9E` ~1%

## Typography
No official type scale documented for this entry; use the product’s own typography guidance.

## Spacing, radii, shadows
Not documented for this entry. Do not invent values; derive from your own design system.

## Components
- Selectable choice cards
- Progress bar
- Full-width primary button
- Date strip + time-slot grid
- Skip for now
- Checklist onboarding page

## Layout rules
- Observed layout pattern: **Centered hero** (from our captures).
- Public flow (captured, stopped before any form submission): Join or create a workspace (notion.so (in-app, logged in)) → Use case (notion.so (in-app, logged in)) → Free expert session offer (notion.so (in-app, logged in)) → Home · Welcome page (notion.so (in-app, logged in))

## Do’s and don’ts
- Do: Use off-white/cream surfaces and warm grays; keep accents sparse.
- Don’t: Don’t switch to cold pure-white/blue-gray surfaces.
- Do: follow the source’s license/terms listed above.
- Don’t: present ESTIMATED colors as official tokens.

## Sources
- https://www.notion.com
- Capture: notion.so (in-app, logged in)
- Capture: notion.so (in-app, logged in)
- Capture: notion.so (in-app, logged in)
- Capture: notion.so (in-app, logged in)
- Library entry: https://design-library-byt.pages.dev/entry/FL-002

---

# DESIGN.md · Anthropic ‘frontend-design’ skill (LN-001)

> Written for AI coding agents. Values marked **OFFICIAL** come from the documented source named below; values marked **ESTIMATED** were measured by us from our own screenshots and are approximate. Never treat ESTIMATED values as official brand tokens.

## Overview
- Type: Agent Skill · Category: G. Learning and Case Studies
- Platforms: Web
- Color theme: Monochrome light · Layout pattern: Documentation · Mood: Educational, process-driven
- License / terms: Apache License 2.0 (© Anthropic). Short quotes are reproduced with attribution; everything else is our paraphrase and is marked as modified.

Anthropic’s official agent skill for building UI that doesn’t look templated: start from the subject, plan a small token system, review the plan against a list of common AI-design tells, then build with restraint, an accessibility floor and plain, useful copy. Summarized here with a worked token plan, a checklist and a copyable agent prompt.

### Analysis (ours)
Anthropic’s skill is a process, not a style: it pushes the agent to derive choices from the subject, write a small token plan, then audit that plan against the looks AI tools converge on before coding. The strongest ideas to borrow are the explicit two-pass review, ‘spend your boldness in one place’, an unannounced accessibility floor, and treating copy as design content.

## Color tokens
No official color tokens documented for this entry.

ESTIMATED · dominant colors measured from our screenshot(s) of the source site (median-cut quantization; share = % of pixels). Approximate, not official:

- `#FFFFFF` ~48%
- `#BCC1C7` ~10%
- `#38393B` ~8%
- `#E1E2E4` ~4%

## Typography
No official type scale documented for this entry; use the product’s own typography guidance.

## Spacing, radii, shadows
Not documented for this entry. Do not invent values; derive from your own design system.

## Components
- Token plan (color, type, layout, principles)
- ASCII wireframe
- AI-design tells list
- Self-critique checklist
- Writing rules

## Layout rules
- Observed layout pattern: **Documentation** (from our captures).

## Do’s and don’ts
- Do: Keep chrome neutral and let content (images, icons, type) carry color.
- Don’t: Don’t introduce decorative color that competes with content.
- Do: follow the source’s license/terms listed above.
- Don’t: present ESTIMATED colors as official tokens.

## Sources
- https://github.com/anthropics/claude-plugins-official/blob/main/plugins/frontend-design/skills/frontend-design/SKILL.md
- Library entry: https://design-library-byt.pages.dev/entry/LN-001
## Bundled agent prompt (copy below this line)

# DESIGN.md · Agent prompt: distinctive frontend design

> Paraphrased bundle of Anthropic’s ‘frontend-design’ skill (Apache License 2.0, © Anthropic).
> Source: https://github.com/anthropics/claude-plugins-official/blob/main/plugins/frontend-design/skills/frontend-design/SKILL.md
> License: https://github.com/anthropics/claude-plugins-official/blob/main/plugins/frontend-design/skills/frontend-design/LICENSE.txt
> Modified: condensed and reworded by Mark’s UI/UX Design Research Library; quoted phrases are marked. For the exact wording, use the source file.

## Role
You are the design lead for a client who has rejected templated proposals. Make deliberate, opinionated choices about palette, type and layout that are specific to this brief.

## 1. Ground the design in the subject
- If the brief doesn’t name the product, propose one concrete subject, audience and primary job, and confirm it.
- Draw visual choices from the subject’s industry, materials and vocabulary. Use real content throughout.

## 2. Pass one: token plan (before any code)
- Color: 4–6 named hex values with roles.
- Type: 1–2 typefaces and their roles; a clear type scale; body lines under ~80 characters (slightly more line-height for serif body).
- Layout: a one-sentence concept plus ASCII wireframes; state alignment (left / center / justified).
- Principles: what makes this page unique.

## 3. Pass two: review the plan against the brief
Revise any part that reads like a default you’d produce for any similar prompt, and say what you changed and why. Common AI-design tells (fine only when the brief asks for them; the brief’s own words always win):
- Warm cream background with a high-contrast serif and a terracotta/clay accent.
- Near-black background with one acid-green or vermilion accent.
- Broadsheet look: hairline rules, zero radius, dense newspaper columns.
- The SaaS card kit: identical rounded cards, one radius everywhere, the same soft grey shadow, gradient washes as decoration.
- Template chrome: tracked ALL-CAPS eyebrows over every heading, ‘A · B · C’ meta strings, ‘WORD — fragment’ labels, tinted near-black instead of black, monospace for small labels, ‘→’ on every link and button.
- Type tells: one accented word in a headline, all-caps labels, unnecessary labels above content.
- Motion tells: fade-and-slide-up on each section, hover transitions on every card.

## 4. Build
- Hero: open with the most characteristic thing in the subject’s world; avoid the ‘big number + small label + gradient’ default unless it truly fits.
- Type is part of the design, not a neutral container.
- Structure (borders, numbering, dividers, labels) must encode information; numbered markers only for real sequences.
- Motion: one orchestrated moment at most; feedback motion for user actions is fine.
- Watch CSS specificity so section and component rules don’t cancel each other’s spacing.

## 5. Restraint and self-critique
- Spend boldness in one place; keep everything else quiet; cut decoration that doesn’t serve the brief.
- Review screenshots as you build. Before finishing, remove one accessory.
- Keep short notes of what you tried so the next design differs.

## 6. Accessibility floor (do it, don’t announce it)
- Responsive down to mobile, no horizontal scroll.
- Visible keyboard focus.
- Respect prefers-reduced-motion.
- Readable contrast (WCAG AA) and a harmonious palette.

## 7. Writing
- Words help people understand and act; they are content, not decoration.
- Use the user’s vocabulary (“notifications”, not “webhook config”). Plain, specific, not salesy.
- Active voice. Buttons say what happens (“Save changes”, not “Submit”); keep the verb through the flow (Publish → Published).
- Errors explain what happened and how to fix it; they don’t apologize. Empty states invite action.
- Sentence case, plain verbs, no filler; each element does one job.

## Checklist
### Before designing
- [ ] The subject, audience and main job are written in one sentence each (and confirmed if I inferred them).
- [ ] I listed 3+ things from the subject’s world (materials, vocabulary, artifacts) to draw from.
- [ ] I have real content, or realistic content written in the user’s words.

### Token plan (pass 1)
- [ ] 4–6 named hex colors with roles.
- [ ] 1–2 typefaces with roles and a type scale; body measure under ~80 characters.
- [ ] Layout concept in one sentence plus an ASCII wireframe, with alignment stated.
- [ ] 2–4 principles that make this page specific.

### Review (pass 2)
- [ ] Compared against the AI-design tells: cream/serif/clay, black + acid accent, broadsheet hairlines, SaaS card kit, template chrome.
- [ ] Checked type tells: single accented word, all-caps labels, extra labels.
- [ ] Every numbered marker marks a real sequence; every border/divider carries meaning.
- [ ] Revised anything generic and wrote down what changed and why.
- [ ] Where the brief specifies a look, I followed the brief exactly.

### Build
- [ ] Boldness spent in one place; everything else quiet.
- [ ] At most one orchestrated motion moment; action feedback shows what changed.
- [ ] CSS specificity checked (no section/component rules cancelling each other’s spacing).
- [ ] Screenshots reviewed while building; removed one accessory before finishing.

### Accessibility floor
- [ ] Works down to 320–375px with no horizontal scroll.
- [ ] Visible keyboard focus on every interactive element.
- [ ] prefers-reduced-motion respected.
- [ ] Text contrast meets WCAG AA (4.5:1 body, 3:1 large text and UI).

### Writing
- [ ] Names come from the user’s vocabulary, not the system’s.
- [ ] Buttons say what happens; the same verb carries through the flow (Publish → Published).
- [ ] Errors say what happened and how to fix it, without apologizing.
- [ ] Empty states invite the next action.
- [ ] Sentence case, active voice, no filler.

## Output order
1. Subject / audience / job (confirm if inferred) 2. Token plan 3. Review notes: what changed and why 4. Code 5. Self-critique against the checklist