# 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)
- Industry: Platform design system
- Patterns: Docs sidebar, Navigation rail

Google design system; baseline color roles (light/dark HEX/RGB/HSL), type scale, shape, elevation, state layers, breakpoints, motion (springs + legacy easing), components, accessibility and a deep dive with sources.

### Analysis (ours)
Material Design 3 is Google’s open, cross-platform design system, implemented natively on Android (Jetpack Compose, MDC-Android), Flutter and the web. Its core idea is that a product is themed through roles, not colors: 26+ color roles, one 15-style type scale, a corner-radius scale and six elevation levels are all tokens, so a single source color (a brand seed, the user’s wallpaper, or in-app content) can regenerate an accessible light and dark scheme without touching components. Since the May 2025 ‘M3 Expressive’ update the system leans harder on personality: emphasized type styles, larger ‘increased’ corner radii and a spring-based motion physics system that replaces the older easing-and-duration tokens. What makes it work is the strict pairing rule (every container has an ‘on’ color that is guaranteed to contrast) and adaptive layout defined by window width breakpoints instead of devices. The risk when copying it is the look: tonal, low-chroma surfaces and pill buttons read instantly as ‘Android’, so borrow the role system and the rules, and keep your own brand voice in the source color, type and imagery.

### Best practices (ours)
- Theme through roles, never raw hex: build UI with primary/on-primary, surface/surface-container-*, outline etc., so light, dark, dynamic and contrast-level schemes all work from one source color (OFFICIAL, https://m3.material.io/styles/color/roles).
- Only put text and icons on their paired ‘on’ role (on-primary on primary, on-surface on surface); never use container roles for text, and keep at least 3:1 contrast for clustered components such as button groups (OFFICIAL, https://m3.material.io/foundations/designing/color-contrast).
- Separate surfaces by tone first: use the five surface-container roles (lowest → highest) and reserve shadows for elevation levels +4/+5 during interaction; resting components stay at 0 to +3 (OFFICIAL, https://m3.material.io/styles/elevation/applying-elevation).
- Lay out by window width breakpoints, not device: compact <600dp (navigation bar, one pane), medium 600–839dp (navigation rail), expanded 840dp+ (two panes recommended) (OFFICIAL, https://m3.material.io/foundations/layout/applying-layout/window-size-classes).
- Use the shape scale and nest radii optically: outer radius − padding = inner radius (e.g. 48dp card with 14dp padding → 34dp inner); avoid large or full corners on dense components (OFFICIAL, https://m3.material.io/styles/shape/corner-radius-scale).
- Show interaction states with one state layer in the content (‘on’) color at hover 0.08, focus 0.10, pressed 0.10, dragged 0.16; disabled content at 0.38 (OFFICIAL current docs; our v0.192 web token file still says focus/pressed 0.12) (https://m3.material.io/foundations/interaction/states/state-layers).
- Keep touch targets at least 48×48dp even when the icon is 24dp, and keep body text to roughly 40–60 characters per line on wide windows (OFFICIAL, https://m3.material.io/foundations/designing/structure).
- Pick one motion scheme product-wide (expressive for most products, standard for utilitarian ones) and use spatial springs for movement and effects springs (no overshoot) for color and opacity (OFFICIAL, https://m3.material.io/styles/motion/overview/how-it-works).

### Deep analysis
Values marked OFFICIAL come from the cited source page (read 2026-10-23); ESTIMATED values were measured by us from the live page’s computed CSS or our captures on 2026-10-23 (what ships today, not official tokens); OURS is our interpretation.

#### Purpose and audience (OFFICIAL) · source: https://m3.material.io/foundations/layout/understanding-layout/overview
- Open-source system from Google for building Android, Flutter and web products; Figma Design Kit and Material Theme Builder on the design side, Compose, MDC-Android and @material/web on the code side.
- Audience: product teams who need a complete, accessible, themeable component set out of the box, and Android developers whose apps should feel native.
- Layout guidance is implemented on Android and explicitly ‘applies to web’.

#### Core principles (OURS) · source: https://m3.material.io/styles/color/system/overview
- Personal: color can come from the user (wallpaper) or content (album art) via dynamic color; baseline and custom-brand schemes stay static.
- Accessible by construction: color relationships, contrast levels and dark theme are generated, not hand-tuned.
- Adaptive: one layout model across five window breakpoints, with canonical layouts to start from.
- Expressive (May 2025 update): emphasized type, increased radii and spring physics add personality on top of the same tokens.

#### Color system (OFFICIAL) · source: https://m3.material.io/styles/color/roles
- 26 standard roles in six groups: primary, secondary, tertiary, error, surface, outline; plus add-on fixed / fixed-dim and surface dim / bright roles.
- Primary = most emphasis (FAB, high-emphasis buttons, active states); secondary = less prominent (filter chips, tonal buttons); tertiary = contrasting accents (badges, input fields).
- Every fill role has an ‘on’ role for text and icons; container roles are fills and must not be used for text. Accessible pairings meet at least 3:1.
- Surface has five containers (lowest, low, default, high, highest) to layer regions by tone; inverse surface / on-surface / primary serve snackbars.
- Outline marks important boundaries (text-field border); outline-variant is for decorative dividers only, not target boundaries.
- Error stays fixed across dynamic schemes but still adapts between light and dark. Baseline primary is #6750A4 light / #D0BCFF dark (from our token capture, see Colors tab).
- Dynamic color sources: user-generated (wallpaper) or content-based (in-app media), or both (https://m3.material.io/styles/color/dynamic/choosing-a-source).

#### Typography (OFFICIAL) · source: https://m3.material.io/styles/typography/type-scale-tokens
- One type scale of 15 baseline styles: Display, Headline, Title, Body, Label, each Large / Medium / Small; each style is a single token.
- M3 Expressive adds 15 emphasized styles with higher weight for hero moments and selected states.
- Roboto is the typeface in the baseline type tokens; exact sizes and line heights are on the Typography tab (from material-web v0.192 tokens).

#### Layout and spacing (OFFICIAL) · source: https://m3.material.io/foundations/layout/applying-layout/window-size-classes
- Breakpoints: compact <600dp · medium 600–839dp · expanded 840–1199dp · large 1200–1599dp · extra-large 1600dp+.
- Panes: 1 in compact, 1 (or 2) in medium, 2 recommended in expanded and large, 1–3 in extra-large. Navigation bar in compact becomes a navigation rail from medium up.
- When the window grows, ask whether to reveal, divide, resize, reposition or swap components.
- Spacing is about grouping (explicit containers vs implicit proximity), rhythm, similarity, continuity, focal points and negative space (https://m3.material.io/foundations/layout/understanding-layout/spacing).

#### Shape (OFFICIAL) · source: https://m3.material.io/styles/shape/corner-radius-scale
- Corner scale (dp): none 0 · extra-small 4 · small 8 · medium 12 · large 16 · large-increased 20 · extra-large 28 · extra-large-increased 32 · extra-extra-large 48 · full.
- Buttons default to full (pill) corners. Nested shapes use optical roundness: inner radius = outer radius − padding.
- Avoid large or full corners on dense, small components; save the big radii for cards, sheets and hero containers.

#### Elevation (OFFICIAL) · source: https://m3.material.io/styles/elevation/applying-elevation
- Six levels: 0, +1, +2, +3, +4, +5 = 0, 1, 3, 6, 8, 12dp.
- Default separation is tonal (surface containers), not shadow; surface tint is deprecated. Scrim behind modals is 32% opacity.
- Resting components use 0 to +3; +4 and +5 are for user interaction (e.g. dragging). Level 3: dialogs, FAB, search, pickers · level 2: scrolled app bar, menus, navigation bar · level 1: elevated button and card, banner, modal bottom sheet · level 0: filled / tonal / outlined buttons, navigation rail, lists, tabs.

#### Motion (OFFICIAL) · source: https://m3.material.io/styles/motion/overview/how-it-works
- Since May 2025 a spring-based ‘motion physics system’ replaces easing and duration. Springs are defined by stiffness, damping and initial velocity.
- Two schemes: expressive (overshoots and bounces; default for most products and hero moments) and standard (minimal bounce; utilitarian products). Custom schemes are allowed.
- Tokens per scheme: spatial (position, size, rotation, corners; may overshoot) and effects (color, opacity; no overshoot), each in fast (switches, buttons), default (sheets, expanded rail) and slow (full-screen). Example: md.sys.motion.spring.fast.spatial.
- Legacy easing tokens still documented for web: standard cubic-bezier(0.2, 0, 0, 1), emphasized decelerate (0.05, 0.7, 0.1, 1), emphasized accelerate (0.3, 0, 0.8, 0.15); durations short 50–200ms, medium 250–400ms, long 450–600ms, extra-long 700–1000ms (https://m3.material.io/styles/motion/easing-and-duration/tokens-specs).

#### Components and states (OFFICIAL) · source: https://m3.material.io/foundations/interaction/states/state-layers
- States: enabled, hover, focus, pressed, dragged, disabled, shown by a state layer in the content color at hover 0.08 · focus 0.10 · pressed 0.10 · dragged 0.16; disabled 0.38. Only one state layer at a time.
- State layer is 40dp inside a 48dp touch target for icon-sized controls.
- Note: the material-web v0.192 token file behind our PDF lists focus and pressed at 0.12; we show the current docs’ 0.10 as OFFICIAL and keep 0.12 as the legacy web token.
- Component catalog is grouped by purpose (action, containment, communication, navigation, selection, text input): buttons, button groups, FABs and FAB menu, icon / segmented / split buttons, date and time pickers, loading and progress indicators, navigation bar / drawer / rail, bottom and side sheets, app bars, badges, cards, carousel and more (https://m3.material.io/components).

#### Accessibility (OFFICIAL) · source: https://m3.material.io/foundations/designing/color-contrast
- Text contrast: small text at least 4.5:1, large text (14pt bold / 18pt regular and up) and graphics at least 3:1; disabled states are exempt.
- Clustered components (e.g. a row of buttons) need 3:1 between container and background; standalone prominent elements such as a FAB do not.
- Touch targets at least 48×48dp (~9mm); pointer targets 44dp (https://m3.material.io/foundations/designing/structure).
- On the web, map layout to the eight ARIA landmarks and keep a logical heading order so screen readers follow the intended structure.

#### What makes it work (OURS) · source: https://m3.material.io
- Roles + pairing rules make theming safe: a new seed color can’t produce unreadable text because content always sits on its ‘on’ partner.
- Tokens cover every axis (color, type, shape, elevation, motion), so components stay coherent when any one axis is customized.
- Breakpoint-based layout with named panes gives teams the same vocabulary for phone, foldable, tablet and desktop.

#### Lessons for our own systems (OURS) · source: https://m3.material.io
- Name colors by job (surface-container-high), not by hue (grey-100); it’s the single most portable idea in M3.
- Prefer tonal separation over shadows; it ages better and works in dark mode.
- Write down the nesting rule for radii; it removes most ‘something looks off’ feedback on cards.
- Treat docs and token files as separate sources and date them: values do drift (state layers 0.12 → 0.10).

## 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, dp): none 0 · extra-small 4 · small 8 · medium 12 · large 16 · large-increased 20 · extra-large 28 · extra-large-increased 32 · extra-extra-large 48 · full (m3.material.io/styles/shape/corner-radius-scale)
- OFFICIAL · Elevation levels (dp): level0 0 · level1 1 · level2 3 · level3 6 · level4 8 · level5 12 · scrim 32% (m3.material.io/styles/elevation)
- OFFICIAL · State-layer opacities: hover 0.08 · focus 0.10 · pressed 0.10 · dragged 0.16 · disabled content 0.38 (current docs; material-web v0.192 tokens list focus/pressed 0.12)
- OFFICIAL · Breakpoints (window width): compact <600dp · medium 600–839 · expanded 840–1199 · large 1200–1599 · extra-large 1600+
- OFFICIAL · Touch target: 48×48dp minimum; state layer 40dp
- OFFICIAL · Motion: spring physics (expressive / standard schemes; spatial & effects; fast / default / slow). Legacy easing: standard cubic-bezier(0.2,0,0,1); durations 50–1000ms
- Gaps (not documented / not verified): Not verified: shadow CSS values, numeric spring stiffness/damping per device, margins per breakpoint, numeric font weights beyond the token file.

## 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
- Industry: Platform design system
- Patterns: Docs sidebar

Apple HIG: system colors (light/dark/IC RGB), Dynamic Type sizes, hit targets, contrast, layout and tvOS grids, Liquid Glass materials, motion, buttons, accessibility and a deep dive with sources. Gaps: radii, shadows, spacing scale, semantic color values.

### Analysis (ours)
Apple’s Human Interface Guidelines are the platform guidance for iOS, iPadOS, macOS, tvOS, visionOS and watchOS. Unlike Material it is not a token library you install: it tells you to use system components, semantic dynamic colors, built-in text styles and SF Symbols through Apple’s APIs, and explicitly warns against hard-coding system color values because they change between releases (they did on June 9, 2025 with Liquid Glass). The 2025 Liquid Glass design adds a functional layer of translucent controls and navigation that floats above content, tinted sparingly, while content keeps its own color. What makes it work is semantic indirection everywhere: label / secondaryLabel colors, Dynamic Type styles and size classes adapt to Dark Mode, Increased Contrast, text size and window width without per-screen work. Exact numbers that the HIG does publish are mostly accessibility floors (44×44pt targets, 17pt default body on iOS, 4.5:1 contrast); spacing scales, corner radii and shadows are deliberately left to the system, so a web team borrowing the look must label those as estimates.

### Best practices (ours)
- Use semantic system colors through the API (label, secondaryLabel, systemBackground, separator, systemBlue…) and never hard-code their RGB values; Apple changes them between releases (OFFICIAL, https://developer.apple.com/design/human-interface-guidelines/color).
- Don’t redefine a semantic color’s meaning, e.g. don’t use separator as a text color, and never rely on color alone to convey state (OFFICIAL, https://developer.apple.com/design/human-interface-guidelines/color).
- Build text with the built-in text styles so Dynamic Type works; default/minimum sizes are iOS 17/11pt, macOS 13/10, tvOS 29/23, visionOS 17/12, watchOS 16/12, and avoid Ultralight, Thin and Light weights (OFFICIAL, https://developer.apple.com/design/human-interface-guidelines/typography).
- Support text enlargement of at least 200% (140% on watchOS) and keep contrast at 4.5:1 for text up to 17pt, 3:1 for 18pt+ or bold (OFFICIAL, https://developer.apple.com/design/human-interface-guidelines/accessibility).
- Keep controls at 44×44pt by default (28×28pt minimum) on iOS/iPadOS, with about 12pt padding around bezeled and 24pt around non-bezeled elements (OFFICIAL, https://developer.apple.com/design/human-interface-guidelines/accessibility).
- Lay out by size class (compact / regular) and safe areas, not by device or orientation, and keep the same functionality in every size class (OFFICIAL, https://developer.apple.com/design/human-interface-guidelines/layout).
- Use Liquid Glass only for the functional layer (controls, navigation) above content, never in the content layer, and tint it sparingly: give the accent color to the one prominent action (OFFICIAL, https://developer.apple.com/design/human-interface-guidelines/materials).
- Use button style, not size, to mark the preferred action; give destructive actions the destructive role and never make them the primary button (OFFICIAL, https://developer.apple.com/design/human-interface-guidelines/buttons).

### Deep analysis
Values marked OFFICIAL come from the cited source page (read 2026-10-23); ESTIMATED values were measured by us from the live page’s computed CSS or our captures on 2026-10-23 (what ships today, not official tokens); OURS is our interpretation.

#### Purpose and audience (OFFICIAL) · source: https://developer.apple.com/design/human-interface-guidelines
- Apple’s guidance for designing apps and games on iOS, iPadOS, macOS, tvOS, visionOS and watchOS, covering foundations (color, typography, layout, materials, motion, accessibility), patterns, components and inputs.
- Audience: designers and developers shipping on Apple platforms; supported by Apple Design Resources and implemented through Apple’s UI frameworks.
- On iOS, help people focus on primary content by limiting onscreen controls, adapt to orientation, Dark Mode and Dynamic Type, and put frequent controls where hands reach (https://developer.apple.com/design/human-interface-guidelines/designing-for-ios).

#### Core principles (OURS) · source: https://developer.apple.com/design/human-interface-guidelines/designing-for-ios
- Content first: controls recede (Liquid Glass) so content and color belong to the app’s media.
- Semantic over literal: colors, text styles and symbols are named by role and resolved by the system.
- Adaptivity: one design responds to appearance, contrast, text size, size class and input method.
- Familiarity: standard components and gestures, customized only where it serves the content.

#### Color system (OFFICIAL) · source: https://developer.apple.com/design/human-interface-guidelines/color
- System colors (systemRed, systemBlue…) and grays have light, dark and increased-contrast variants (values on the Colors tab), but Apple says don’t hard-code them; values changed on June 9, 2025.
- iOS backgrounds come in two sets, system and grouped, each with primary / secondary / tertiary levels; foreground roles are label, secondaryLabel, tertiaryLabel, quaternaryLabel, placeholderText, separator, opaqueSeparator and link.
- Dark Mode uses base and elevated backgrounds so stacked layers stay distinguishable; dark colors are not simple inversions (https://developer.apple.com/design/human-interface-guidelines/dark-mode).
- Liquid Glass has no inherent color; prominent buttons get the accent color on their background. Use sRGB, or Display P3 with 16-bit PNGs for wide color.
- Not published as values: semantic label and background colors (resolve them in code).

#### Typography (OFFICIAL) · source: https://developer.apple.com/design/human-interface-guidelines/typography
- San Francisco (SF Pro, SF Compact, SF Mono, SF Arabic, Armenian, Georgian and Hebrew, plus rounded variants) and the New York serif; variable fonts with dynamic optical sizes.
- iOS Dynamic Type at Large: Body 17pt; the accessibility sizes AX1–AX5 take Body from 28/34 up to 53/62pt (size/leading).
- macOS has no Dynamic Type; its text styles are fixed (Body 13/16pt, Large Title 26/32pt). tvOS Body is 29/36pt, Title 1 76/96pt.
- SF Pro tracking varies by size (e.g. 17pt at −0.43pt, 12pt at 0); the system applies it automatically when you use system fonts.

#### Layout and spacing (OFFICIAL) · source: https://developer.apple.com/design/human-interface-guidelines/layout
- Order content by importance from the top and leading edge; align, group related items, and use progressive disclosure.
- Size classes (compact / regular width and height) drive layout; respect safe areas and layout margins from the system.
- tvOS: safe area 60pt top/bottom and 80pt sides; grids from 2 columns (860pt wide) to 9 columns (160pt), 40pt horizontal spacing, at least 100pt vertical.
- Not published: a general spacing scale for iOS/macOS. Any 4/8pt scale you see in clones is an estimate.

#### Shape, materials and depth (OFFICIAL) · source: https://developer.apple.com/design/human-interface-guidelines/materials
- Liquid Glass forms a functional layer for controls and navigation; regular and clear variants. Clear glass over bright content needs a 35% dark dimming layer.
- Standard materials on iOS: ultra-thin, thin, regular, thick; vibrant label levels on top (avoid quaternary label on thin / ultra-thin).
- Corner radii and shadow values are not published; visionOS prefers circle or capsule button shapes (rounded rectangles in vertical stacks) and watchOS uses capsules for inline buttons (https://developer.apple.com/design/human-interface-guidelines/buttons). Treat any radius you copy as ESTIMATED.

#### Motion (OFFICIAL) · source: https://developer.apple.com/design/human-interface-guidelines/motion
- Add motion purposefully; make it optional and never the only carrier of information (pair with haptics or audio).
- Feedback motion should follow gestures, be brief and precise, and be cancellable; avoid motion on frequent interactions.
- Honor Reduce Motion; be careful with fast or blinking effects. In visionOS avoid peripheral motion and slow (~0.2 Hz) oscillation.
- No easing curves or durations are published; system components supply them.

#### Components and states (OFFICIAL) · source: https://developer.apple.com/design/human-interface-guidelines/buttons
- A button is defined by style, content and role (normal, primary, cancel, destructive). Always include a pressed state.
- Use the prominent style for the most likely action and style (not size) to distinguish it; don’t make a destructive action primary.
- macOS push buttons get a trailing ellipsis when they open another window or dialog.
- Use SF Symbols for icons so they scale with Dynamic Type and match text weight (https://developer.apple.com/design/human-interface-guidelines/sf-symbols).

#### Accessibility (OFFICIAL) · source: https://developer.apple.com/design/human-interface-guidelines/accessibility
- Design to be intuitive, perceivable and adaptable; support VoiceOver, Voice Control, Full Keyboard Access and Switch Control, and offer alternatives to gestures.
- Contrast: text up to 17pt ≥ 4.5:1; 18pt+ or bold ≥ 3:1. Dark Mode minimum 4.5:1 (https://developer.apple.com/design/human-interface-guidelines/dark-mode).
- Control size default / minimum: iOS/iPadOS 44×44 / 28×28pt · macOS 28×28 / 20×20 · tvOS 66×66 / 56×56 · visionOS 60×60 / 28×28 · watchOS 44×44 / 28×28.
- Support text enlargement of at least 200% (watchOS 140%); test with Increase Contrast and Reduce Transparency on.

#### What makes it work (OURS) · source: https://developer.apple.com/design/human-interface-guidelines
- Semantic indirection: because apps ask for ‘label’ or ‘body’, Apple can retune colors and type (as with Liquid Glass) and every app follows.
- Accessibility settings are first-class inputs, so ‘done’ includes Dynamic Type, Dark Mode and contrast variants.
- Clear layering: content layer vs functional glass layer gives hierarchy without heavy borders or shadows.

#### Lessons for our own systems (OURS) · source: https://developer.apple.com/design/human-interface-guidelines
- Publish accessibility floors as hard numbers (targets, sizes, contrast) even if you leave visual values flexible.
- Name text styles by role (Body, Headline, Caption) and let size scale with user settings.
- When cloning Apple’s look on the web, label radii, shadows and spacing as ESTIMATED; the HIG doesn’t publish them.
- One accent color, used for the primary action, is the core of the Apple feel; resist tinting everything.

## 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
- OFFICIAL · Padding around controls: ~12pt around bezeled elements · ~24pt around non-bezeled
- OFFICIAL · tvOS safe area & grid: 60pt top/bottom · 80pt sides · column spacing 40pt · rows ≥100pt
- OFFICIAL · Liquid Glass: functional layer only; clear variant over bright content gets a 35% dark dimming layer
- OFFICIAL · Text enlargement: support ≥200% (watchOS 140%)
- Gaps (not documented / not verified): Not published in HIG: semantic label & background color values, general spacing scale, corner radii, shadows, easing curves.

## 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: Split hero · Mood: Clean, technical, friendly
- License / terms: ISC
- Industry: Open-source design assets
- Patterns: Search-first gallery, Docs with code tabs

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

### Analysis (ours)
lucide.dev (our capture) uses a split hero: a version tag (v1.61.0 at capture), a two-line headline whose first line is in a coral-red accent, a ‘Made by the community’ subline, three pill buttons (filled ‘View all icons’, gray ‘Get Started’ and ‘GitHub’) and a search field showing the icon count with a Ctrl+K hint, beside an isometric spiral drawn in the icon style. Below, feature cards on light gray tiles each lead with a small icon in the same accent; the nav is minimal (Icons, Guide, Resources, Packages, Showcase) with a theme toggle and GitHub/Discord icons. The set follows a documented design language (OFFICIAL, Lucide icon design guide): 24×24 canvas, 1px safe zone, 2px centered strokes with round caps and joins, 2px corner radius on shapes 8px or larger, and at least 2px between elements. Lesson: because the rules are strict, Lucide icons sit cleanly beside text and mix well with each other. Pitfall: changing stroke width per icon, or scaling icons to sizes that blur their 2px strokes, breaks that consistency.

### Best practices (ours)
- Keep the default 24px canvas and 2px stroke; if you change stroke width, change it for every icon at once.
- Size icons to match the line height of adjacent text and align them to its center.
- Pair icon-only buttons with an accessible label (aria-label) and a tooltip.
- Install the framework package and import only the icons you use (tree-shaking).

## 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: **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://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
- Industry: Open-source design assets
- Patterns: Search-first gallery

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

### Analysis (ours)
heroicons.com (our capture) is a single-page tool: a short split hero on a faint lavender wash (headline left, an oversized outline megaphone right, and a meta line ‘316 icons · MIT license · React & Vue libraries’), then a full-width search bar and the icon grid itself. Style tabs (Outline, Solid, Mini, Micro) sit above the grid, and the active style’s spec is printed on the right (‘Outline 24×24, 1.5px stroke’ as stated on the site), so users always know which size they are taking. Each icon sits centered in a rounded white tile with its kebab-case name below, making the grid scannable by shape and by name. The palette is white, cool grays and one muted violet for the logo and hero icon. Lesson: printing the active variant’s size and stroke next to the grid prevents mismatched icons. Pitfall: Heroicons’ 1.5px outline stroke looks lighter than Lucide’s 2px stroke, so don’t mix the two sets.

### Best practices (ours)
- Pick the variant by size: Outline/Solid at 24px, Mini at 20px, Micro at 16px; don’t scale one to fit another.
- Use Outline for default states and Solid for selected/active states of the same icon.
- Show the size and stroke of the current variant wherever icons are chosen or documented.
- Don’t mix Heroicons with 2px-stroke sets in the same 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` ~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
- Industry: Open-source design assets
- Patterns: Split hero with artwork

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

### Analysis (ours)
phosphoricons.com (our capture) is the most art-directed icon site in this library: a warm off-white canvas (#EEEAE3, ESTIMATED), lime-yellow notice banners in monospace text, and tactile props (paper clips, a mixer-style control panel) around the headline. The large, light-weight headline is left-aligned above two outlined buttons (‘Get started’, ‘Explore icons’) and a two-column list of arrow links (Download all (9,072 at capture), Figma plugin, Sketch plugin, GitHub, Request an icon, Donate). The site credits its own type: Manrope and IBM Plex Mono (OFFICIAL, stated on phosphoricons.com). The family spans six weights (Thin, Light, Regular, Bold, Fill, Duotone), so the same icon can match light body text or bold UI chrome. Lesson: choose the icon weight that matches your text weight rather than one weight everywhere. Pitfall: the two stacked banners push the hero down and compete with the headline on first view.

### Best practices (ours)
- Match icon weight to type weight (Light with light text, Bold with bold labels).
- Use Fill or Duotone only for selected or emphasized states, and Regular elsewhere.
- Use one weight per component so a toolbar never mixes Thin and Bold.
- Keep site-wide notices to one dismissible banner.

## 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)
- Industry: Open-source design assets
- Patterns: Centered hero, Docs with code tabs

Unified API/framework over 200+ open icon sets (300k+ icons, per the official docs); each set keeps its own license.

### Analysis (ours)
iconify.design (our capture) is a plain centered hero on white: a teal-blue headline (‘Home of open source icon sets’), two lines stating the scale (‘Over 300,000 open source vector icons’) and four equal outlined buttons where only ‘Getting Started’ is filled, followed by a sponsors section. The nav combines a Ctrl+K search, docs links, a theme toggle and a row of social icons. Function wins over brand: the official docs describe over 300k icons from more than 200 open-source sets, a public API that returns SVG or CSS on demand, render-on-demand components and Figma/Sketch plugins. Every set keeps its own license (MIT, Apache, CC BY, OFL…), so attribution duties differ per icon. Lesson: Iconify is ideal for prototyping and for finding one set that fits, but a shipped product should still use one set. Pitfall: CC BY sets require attribution that is easy to forget when icons are pulled one by one.

### Best practices (ours)
- Prototype across sets with Iconify, then commit to one set for the shipped UI.
- Check the license of each set you pull from; record CC BY attributions as you go.
- Bundle or inline the icons you ship instead of fetching them from the public API at runtime.
- Keep one filled primary button in a hero; four equal buttons dilute the main action.

## 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
- Industry: Open-source design assets
- Patterns: Filter sidebar, Specimen list

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

### Analysis (ours)
fonts.google.com (our capture) is a tool, not a marketing page: a narrow icon rail (Fonts, Noto, Icons, Knowledge, FAQ), then a filter sidebar with a ‘Type something’ preview box and size slider, filters by writing system and language, and ‘Feeling’ chips (Business, Calm, Playful, Fancy…) each set in a font that expresses that feeling. The main column lists families as full-width specimens of the same sentence, with name, variable-axes count and designer in small text above, under a result count (‘1,950 of 1,950 families’ at capture) and a sort control. A row of Knowledge cards (Readability, Material design guidelines, Optimize font loading) links learning content into browsing. Color is Material-style: white and pale blue-gray surfaces, with Google blue only on the Filters button and selection. Lesson: identical specimen text across rows makes comparison fair. Pitfall: specimens are clipped at the right edge and shown at one size, so test your own copy at your real UI sizes before choosing.

### Best practices (ours)
- Preview candidates with your own copy at your real sizes (body 16px, UI 14px, headings).
- Prefer variable fonts and load only the axes and weights you use.
- Self-host or preconnect, and use font-display: swap to avoid invisible text.
- Use at most two families: one for text and optionally one for display.

## 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
- Industry: Type foundry
- Patterns: Category index

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

### Analysis (ours)
Fontshare’s catalog is a JavaScript app that did not render past its header in our headless captures (2026-10-22, and again on 2026-10-23), so this note covers only what we could see plus the official CSS API used for our specimens. The header is a strict row of equal cells on a pale cream background (#FFFFE3, ESTIMATED): the black ‘Fontshare™’ wordmark, then ‘Fonts’ (active, inverted to black, with a count of 100), ‘Pairs’ (100), ‘Licenses’, a menu icon and a ‘No styles selected’ status, divided by hairline rules. That print-catalog grid of black type on cream, with no accent color, is the whole brand. The families we rendered (Satoshi, Clash Display, General Sans, Cabinet Grotesk) are contemporary grotesks and display faces that work well as a product’s single brand family. Lesson: Fontshare fonts are free, but many use the ITF Free Font License, which forbids modifying, subsetting or redistributing the files. Pitfall: self-hosting a subset of an ITF FFL font breaks that license, so load it from the Fontshare CSS API or check that family’s license first.

### Best practices (ours)
- Check each family’s license (ITF FFL vs SIL OFL) before self-hosting or subsetting.
- Load ITF FFL families via the official Fontshare CSS API rather than redistributing files.
- Pair a Fontshare display face with a neutral text face for long reading.
- Test display faces like Clash Display only at large sizes; they are not body fonts.

## 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
- Industry: Design community / inspiration
- Patterns: Gallery grid, Category index

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)
logobook.com (our capture) is an archive built like a printed index: a black top bar with the Logobook™ wordmark and Directory / Resources / About links, a light-blue category bar (Letters & Numbers, Shape, Object, Nature, Business), then a hero that pairs a large featured mark with tiles for Shapes, Objects, Nature, Animals and Business, divided by thin vertical rules. Below, a row of letter marks runs A to P. Everything is black on white, so marks are compared by form alone. Lesson: browsing by basic form (a letter, a circle, an animal) is the fastest way to see how a concept has already been solved and to avoid an accidental look-alike. Pitfall: the archive shows marks without context (no color, no applications), so judge your own mark in real use too.

### Best practices (ours)
- Search the archive by your mark’s basic form before you finalize it, to catch look-alikes.
- Review your logo in black on white first; if it fails in one color, it will fail elsewhere.
- Collect references for structure (grids, negative space), never to copy a mark.
- Keep a link-only reference list; the logos belong to their owners.

### Usage terms at a glance (our summary, not legal advice)
- Commercial use: Reference only
- Attribution: n/a
- Redistribution: Logos © owners; link only
- How you get it: Browse

## 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
- Industry: Design community / inspiration
- Patterns: Gallery grid, Centered hero

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)
logolounge.com (our capture) leads with a loud orange gradient hero (#ED5D16 to amber, ESTIMATED) textured with soft pixel blocks, a centered white headline (‘The world’s premier logo showcase.’) and a mint ‘Join Today’ pill, with Compete, Trends, News and Books in the nav. Below, ‘Find your inspiration amongst 450,000 logos’ introduces a grid of logos in rounded white tiles. Membership is the business model, so the page sells joining before browsing. Lesson: the yearly LogoLounge trend reports are the most useful part for a product team: they name visual trends so you can follow or deliberately avoid them. Pitfall: building a mark on a trend makes it date quickly.

### Best practices (ours)
- Read the current trend report to know which styles will soon look dated.
- Use trends for campaign graphics, not for the core logo.
- Present your own marks in a neutral tile grid, like this showcase, for fair comparison.
- Treat logos here as references only; they belong to their owners.

### Usage terms at a glance (our summary, not legal advice)
- Commercial use: Reference only
- Attribution: n/a
- Redistribution: Logos © owners; link only
- How you get it: Browse (membership)

## 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
- Industry: Design community / inspiration
- Patterns: Gallery grid, Search-first gallery

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)
Dribbble’s logo tag page (our capture) is a dense four-column grid of shots under a centered ‘Logo’ title and a result count (about 2.78 million at capture), with a pink-accented search bar, Explore / Hire Talent / Get Hired / Community menus and a dismissible promo banner. Each card shows the designer, a PRO badge, likes and views; some slots are ads. The tag is noisy: many results are app or landing-page mockups rather than logos. Lesson: the best logo shots show construction grids, clear space and the mark on real applications, so present your own work the same way. Pitfall: shots are polished presentations; a mark that only works on a perfect mockup may fail at 16px.

### Best practices (ours)
- Use specific searches (‘monogram’, ‘lettermark’, ‘logo grid’) to cut through the noise.
- Present your logo with its construction grid, clear space and small-size tests.
- Test every reference idea at 16px and in one color before adopting it.
- Treat shots as inspiration; they belong to their designers.

### Usage terms at a glance (our summary, not legal advice)
- Commercial use: Reference only
- Attribution: n/a
- Redistribution: Shots © designers; link only
- How you get it: Browse

## 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
- Industry: Design community / inspiration
- Patterns: Gallery grid, Search-first gallery

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)
The Behance search for ‘logo’ (our capture) shows a neutral white grid of project covers with a Filter button, a search pill, Projects / People / Assets / Images tabs and a Recommended sort, under ‘10,000+ Results’. The first cell is an Adobe Stock promotion and one card is promoted; many results are ‘logofolio’ collections, large sets of marks presented together, with likes and views under each cover. Lesson: Behance is where full identity case studies live (mark, palette, type and applications together), so it is the right place to study how a logo behaves in a system. Pitfall: logofolios show marks out of context, so open full projects to see how a logo works across real touchpoints.

### Best practices (ours)
- Open full case studies, not just covers, to see a mark across real applications.
- Document your own identity the same way: mark, clear space, color, type, applications.
- Save references by structure (lockups, responsive versions), not by surface style.
- Projects belong to their creators; keep links, don’t reuse artwork.

### Usage terms at a glance (our summary, not legal advice)
- Commercial use: Reference only
- Attribution: n/a
- Redistribution: Projects © creators; link only
- How you get it: Browse

## 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
- Industry: Music streaming
- Patterns: Docs sidebar, Usage rules

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)
Spotify’s Design & Branding Guidelines (our capture) live inside the developer docs: a deep purple top bar (#412E6F, ESTIMATED) with ‘Spotify for Developers’, Documentation and Community, a pale left sidebar of sections (Introduction, Attribution, Using our content, Browsing Spotify content, Linking to Spotify, Playing views, Showing entities, Using our logo, Using our colors, Logos and naming restrictions, Fonts), and a white content column with a bold heading, an introduction linking the Developer Terms of Service, End User Agreement and Privacy Policy, then a green rule above ‘Attribution’ and a diagram of app screens showing where the Spotify attribution goes. Lesson: the guidelines are organized by integration task (attribute, link, play, show content) rather than by asset, which is what a developer actually needs. Pitfall: the rules are part of the developer terms, so treating them as optional advice can break your agreement.

### Best practices (ours)
- Organize your own brand rules by the task a partner is doing (attribute, link, embed), not only by asset type.
- Show rules as annotated screen diagrams; one picture of ‘where the logo goes’ beats a paragraph.
- Link the legal terms at the top so partners know the rules are binding.
- When integrating Spotify, follow its attribution and logo rules exactly; don’t restyle the mark.

### Usage terms at a glance (our summary, not legal advice)
- Commercial use: Only as the guidelines allow
- Attribution: Required in integrations (per guidelines)
- Redistribution: Trademark; follow guidelines
- How you get it: Docs + newsroom logo files

## 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
- Industry: Workplace software
- Patterns: Centered hero, Download cards

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)
Slack’s Media Kit (our capture) is a short marketing page rather than a manual: the standard Slack nav (Product, Solutions, Enterprise, Resources, Pricing, an outlined ‘Request a demo’ and a filled aubergine ‘Get started’), a large centered ‘Media Kit’ heading, two short paragraphs, then three aubergine cards (#4A154B, ESTIMATED): Logos, Product screenshots and the Slack brand center. The copy explains that the assets can be used without negotiating legal agreements and asks for a visual mockup for anything not covered. Lesson: a media kit works best as three clear doors (logos, screenshots, full guidelines) with the permission model stated up front. Pitfall: the full rules live in the separate brand center, so downloading logos from the kit alone can miss clear-space and color rules.

### Best practices (ours)
- Give press and partners three clear doors: logo files, product screenshots, full guidelines.
- State the permission model (what’s allowed without asking, how to ask) in the first paragraph.
- Show the logo on the brand color and on white in the download tiles.
- Read the brand-center rules before using Slack marks; the kit is only the entry point.

### Usage terms at a glance (our summary, not legal advice)
- Commercial use: Only as the media kit allows
- Attribution: Per brand center rules
- Redistribution: Trademark; follow media-kit terms
- How you get it: Logo files, screenshots

## 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
- Industry: Email marketing
- Patterns: Long-form editorial, Usage rules

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)
Mailchimp’s Brand Assets page (our capture) sits under an Intuit product bar and a dark promo strip: a nav with the Freddie-and-wordmark logo, a yellow header band (#FFE01B, ESTIMATED) with a centered serif ‘Brand Assets’ title and a friendly two-line intro, then a white, narrow reading column that starts with ‘Our name’: one word, a big M and a little c. A cookie banner covered the lower part of the page in our capture. Lesson: starting with how to spell and write the name is smart, because the name is the asset people misuse most. Pitfall: a single, very strong yellow means the logo needs clear rules for use on yellow, white and dark backgrounds.

### Best practices (ours)
- Begin brand guidelines with name spelling and capitalization, then the logo.
- Use one signature color as a header band, and keep long-form guidance on white for readability.
- Document how the logo and mascot behave on the brand color, on white and on dark.
- Follow Mailchimp’s brand-asset terms; don’t alter Freddie or the wordmark.

### Usage terms at a glance (our summary, not legal advice)
- Commercial use: Only as the brand-asset terms allow
- Attribution: Per terms
- Redistribution: Trademark; follow terms
- How you get it: Logo / Freddie files

## 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
- Industry: Developer platform
- Patterns: Docs sidebar, Usage rules

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)
Vercel’s brand page (our capture) lives inside the Geist design system: a docs shell with a search field (Ctrl K), theme toggles, and a sidebar that lists Foundations (Introduction, Colors, Typography, Materials), Brands (Vercel, Next.js, Turbo, v0, AI SDK and others) and Components (Address Input, Avatar, Badge…). The ‘Brands’ page opens with a short permission statement, then each brand gets a trademark note, a ‘Usage and misuse’ link, a ‘Download Vercel Assets’ button and the logotype shown on a white panel and then on black. The page is near-colorless (#FAFAFA, ESTIMATED). Lesson: keeping brand assets inside the design system means logos, colors and components are versioned together. Pitfall: product sub-brands (Next.js, Turbo, v0) have their own marks, so use the right one and don’t mix lockups.

### Best practices (ours)
- Put brand assets in the same docs site as your design tokens and components.
- Show every logo on light and dark panels, and offer one download per brand.
- Link a ‘usage and misuse’ page next to every download.
- Use each sub-brand’s own mark; don’t combine marks into new lockups.

### Usage terms at a glance (our summary, not legal advice)
- Commercial use: Only as the guidelines allow
- Attribution: Per usage & misuse page
- Redistribution: Trademark; don’t alter
- How you get it: Asset download per brand

## 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)
- Industry: Open-source design assets
- Patterns: Search-first gallery, Gallery grid

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)
simpleicons.org (our capture) is a utilitarian tool in a monospace face: a title with the icon count (3,453 at capture), then a control row (Search, Order, Theme, Download as SVG or PNG, Layout) above a dense card grid. Each card shows a black brand icon, the brand name and a footer strip filled with that brand’s color and its hex value, plus search and download buttons; some cards carry a license tag (MIT, MPL-2.0, CC-BY-SA-4.0) or a ‘Brand guidelines’ link. Lesson: putting license and guideline flags on each card, at the moment of download, is the right way to handle trademark assets. Pitfall: CC0 covers the SVG data only; the logos remain trademarks, and the listed hex is a convenience, not a guarantee of the brand’s current color.

### Best practices (ours)
- Use Simple Icons for ‘Sign in with…’ buttons and integration lists, at one size and one style.
- Follow each brand’s guidelines when shown (some require their own button styles).
- Check the brand’s current color in its own guidelines before using the listed hex in a hero or ad.
- Give icon-only brand links an accessible name (‘GitHub’), not just the SVG.

### Usage terms at a glance (our summary, not legal advice)
- Commercial use: Yes (SVG data CC0); trademarks still apply
- Attribution: Not required for SVG data
- Redistribution: SVG data CC0; marks belong to owners
- How you get it: SVG/PNG download, npm package

## 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
- Industry: Reference / education
- Patterns: Long-form editorial, Guide / checklist

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)
This entry pairs our own illustration of the five logo types (wordmark, lettermark, emblem, abstract mark, combination mark) with Wikipedia’s ‘Logo’ article as background reading. The illustration uses this site’s paper, ink and vermilion palette so no third-party marks are reproduced. The article (standard Wikipedia layout with a contents sidebar covering history, logo design, logo color and design protection) is useful for vocabulary and history, not for craft. Lesson: choose the logo type from the name and use case: a short distinctive name suits a wordmark, a long name a lettermark, a product that needs a small app icon a symbol or combination mark. Pitfall: many logos fail at small sizes, so test at 16px, in one color and as an app icon early.

### Best practices (ours)
- Pick the logo type from the name length and where the mark must appear (app icon, favicon, signage).
- Design in black and white first, then add color.
- Test at 16px, at 32px and as a square app icon before polishing.
- Plan horizontal, stacked and icon-only lockups with clear space from the start.

### Usage terms at a glance (our summary, not legal advice)
- Commercial use: Our illustration: free to reference
- Attribution: Credit this library if reused
- Redistribution: Our original illustration
- How you get it: Read

## 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: Stacked product hero · Mood: Precise, engineering-minimal
- License / terms: Screenshots: fair-use reference captures; site content © Linear
- Industry: SaaS
- Patterns: Product-as-hero, Pricing table, Sign-up entry

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

### Analysis (ours)
In our 2026-10-22 capture, linear.app opens on a near-black canvas (#08090A, ESTIMATED) with a two-line, left-aligned white headline, one muted supporting line, and a full-width render of the real app (sidebar, issue detail, properties panel) directly underneath, so the product UI is the hero and there is no illustration. The top nav is quiet gray text with a single light pill ‘Sign up’ as the only high-contrast control. Pricing keeps the dark canvas: four plan columns separated by thin vertical rules, checkmark lists, and buttons aligned on one baseline, with fill reserved for the ‘Billed yearly’ toggles and the highlighted Business ‘Get started’. The sign-up step switches to a light gray page with a centered logo, ‘Create your workspace’ and three stacked pill buttons (Google filled in violet, email and SAML SSO outlined) plus legal and log-in links. Lesson: in a dark, almost colorless system, the one light or colored element on each screen becomes the obvious next action. Pitfall: gray secondary text on near-black easily drops below 4.5:1 contrast, so measure it before copying the look.

### Best practices (ours)
- Use a real product render as the hero visual when the UI itself is the selling point.
- Keep one filled or light button per screen for the primary action (Sign up, the recommended plan).
- Align plan buttons on one baseline so pricing columns compare at a glance even when feature lists differ in length.
- For team products, offer SSO/SAML at sign-up and keep the auth card to a single decision.
- Generate themes from a few inputs instead of hand-picking dozens of colors: Linear moved from 98 variables per theme to three (base color, accent color, contrast), computed in LCH so equal lightness looks equal across hues (OFFICIAL, https://linear.app/now/how-we-redesigned-the-linear-ui).
- Expose a contrast input in your theme generator so a high-contrast theme comes for free instead of being a separate design (OFFICIAL, https://linear.app/now/how-we-redesigned-the-linear-ui).
- Keep the type scale small and the tracking rule simple: Linear’s site uses about −0.012em on small titles and −0.022em on large ones (ESTIMATED, live CSS).
- Give every interactive element a visible focus ring and a 44px minimum tap size; Linear defines both as tokens (ESTIMATED, live CSS).

### Deep analysis
Values marked OFFICIAL come from the cited source page (read 2026-10-23); ESTIMATED values were measured by us from the live page’s computed CSS or our captures on 2026-10-23 (what ships today, not official tokens); OURS is our interpretation.

#### Purpose and audience (OURS) · source: https://linear.app
- Marketing site for a product-development and issue-tracking tool. The audience is engineering and product teams who judge a tool by how fast and well made it feels.
- The site has to prove craft before it explains features, which is why the real app UI is the hero instead of an illustration.
- Two paths: self-serve sign-up (the light pill in the nav) and a pricing page for team plans.

#### Page structure and flow (ESTIMATED) · source: https://linear.app
- Landing (capture 2026-10-22): left-aligned two-line headline, one muted support line, then a full-width render of the app (sidebar, issue detail, properties panel). On 2026-10-23 the live headline reads ‘The product development system for teams and agents’.
- Pricing: four plan columns split by thin vertical rules on the same dark canvas; buttons share one baseline.
- Sign-up switches to a light page with a centered card and three stacked pill buttons (Google, email, SAML SSO).
- Inside the app (free account, see the In-app tab): 5-step onboarding on a dark split screen with step dots, a quiet ‘My issues’ empty state, a Ctrl/Cmd-K command menu, and light/dark theme settings.

#### Color: official brand and theme system (OFFICIAL) · source: https://linear.app/brand
- Brand guidelines list two monochrome accents for the wordmark: Mercury White #F4F5F8 (RGB 244, 245, 248) and Nordic Gray #222326 (RGB 35, 35, 38). Monochrome wordmark use is preferred.
- The primary brand color is described as ‘a subtle desaturated blue’, ‘typically reserved for backgrounds’. The brand page we read does not give its hex value.
- App themes (2024 redesign) are generated in LCH from three variables: base color, accent color and contrast, replacing 98 hand-set variables per theme (https://linear.app/now/how-we-redesigned-the-linear-ui).
- The redesign limited how much ‘chrome (blue)’ goes into the generated neutrals to get a more neutral, timeless look, and made text and neutral icons darker in light mode and lighter in dark mode (https://linear.app/now/how-we-redesigned-the-linear-ui).

#### Color as shipped on the site (ESTIMATED) · source: https://linear.app
- Canvas #08090A, primary text #F7F8F8, secondary text #8A8F98 (also used for the gray half of section headings).
- Nav ‘Sign up’ pill: #E5E5E6 fill with #08090A text, the only light control in the first viewport.
- Tokens in the site CSS: --color-indigo #5E6AD2 (also the skip-link background), --focus-ring-color #5E69D1; status colors blue #4EA7FC, red #EB5757, green #27A644, orange #FC7840, yellow #F0BF00.
- Chips use a 1px #2E2E32 border; small buttons sit on rgba(255,255,255,0.04) instead of a solid gray. Measured 2026-10-23 (UTC+8) from the public page’s computed CSS at 1440px and 375px; values can change without notice.

#### Typography (ESTIMATED) · source: https://linear.app
- Official: the 2024 redesign added Inter Display for headings and kept Inter for other text in the app (OFFICIAL, https://linear.app/now/how-we-redesigned-the-linear-ui).
- Site stack: ‘Inter Variable’, then SF Pro Display and system fonts; ‘Berkeley Mono’ for code; a ‘Tiempos Headline’ serif token exists but we did not see it used on the landing.
- Weight tokens 300 / 400 / 510 / 590 / 680. The in-between 510 and 590 are variable-font steps, a little lighter than the usual 500/600.
- Hero h1: 64px / 64px, weight 510, −1.408px tracking (−0.022em) at 1440px; 38px / 41.8px at 375px. Section h2: 48px, weight 510, part white and part #8A8F98.
- Title scale tokens title-1 to title-9 = 17, 20, 24, 32, 40, 48, 56, 64, 72px, weight 590; tracking −0.012em up to 24px and −0.022em from 32px. Body: 15px / 1.6 (text-regular) and 14px / 21px.

#### Layout, spacing and shape (ESTIMATED) · source: https://linear.app
- Fixed header, 72px token (73px measured at 1440px), translucent #0B0B0B at 80% with a 20px backdrop blur and a faint white hairline.
- 12-column grid token; long text capped at 624px (--prose-max-width).
- Radius scale: 4, 6, 8, 12, 16, 24, 32px, plus 9999px for pills and 50% for circles. Borders are 1px hairlines.
- Shadows are few and soft: low 0 2px 4px rgba(0,0,0,.10), medium 0 4px 24px rgba(0,0,0,.20), high 0 7px 32px rgba(0,0,0,.35). On the dark canvas, separation comes mostly from hairlines and slightly lighter fills. Measured 2026-10-23 (UTC+8) from the public page’s computed CSS at 1440px and 375px; values can change without notice.

#### Motion (ESTIMATED) · source: https://linear.app
- Transition speeds: quick 0.1s, regular 0.25s; highlight fade-in 0s and fade-out 0.15s, so feedback appears instantly and fades gently.
- A full set of Penner easing curves is tokenised (e.g. ease-out-quint cubic-bezier(.23, 1, .32, 1), ease-in-out-cubic cubic-bezier(.645, .045, .355, 1)).
- Linear does not publish a motion spec; these are site CSS values, not app guidance.

#### Components and states (ESTIMATED) · source: https://linear.app
- Primary pill: 32px tall, 9999px radius, 13px / 510 label, 12px side padding.
- Filter chips: 24px tall, 16px radius, 1px #2E2E32 border, 12px label. Segmented ‘feature’ buttons: 28px, 8px radius, translucent white fill.
- Pricing table, centered auth card, onboarding split screen with step dots, and a command menu are the four patterns we captured (see the Flow and In-app tabs).

#### Accessibility check (ESTIMATED) · source: https://linear.app
- Contrast (computed by us): #F7F8F8 on #08090A = 18.7:1; secondary #8A8F98 on #08090A = 6.1:1, which passes WCAG AA for body text. Our earlier pitfall still applies to dimmer grays in footers and captions, so measure those.
- Skip link (‘Skip to content →’) is present: white on #5E6AD2 = 4.7:1 (AA).
- Focus ring token is only 1px (#5E69D1, 2px offset). That is visible on dark backgrounds but thin; use 2px if you copy it.
- A --min-tap-size of 44px is defined, but chips measure 24px tall, below that size for touch.

#### What makes it work (OURS) · source: https://linear.app
- Almost no color, so the single light pill or the one indigo element on each screen becomes the obvious next step.
- The product render shows quality directly; the site needs very little copy to argue its case.
- A compact, consistent token set (a 9-step title scale, a 7-step radius scale, a few shadows) keeps a dense page calm.

#### Lessons for our own sites (OURS) · source: https://linear.app
- Borrow the method (theme from base, accent and contrast in a perceptual color space) rather than the near-black look, which many dev tools now copy.
- Use two tracking values, not one per size; it is simple to apply and holds up across the scale.
- If you go dark, check every gray against WCAG at its real size, and keep touch targets at 44px even when the visual chip is smaller (pad the hit area).

## 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: **Stacked product 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
- Industry: Fintech
- Patterns: Split hero, Pricing table, Multi-step form

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

### Analysis (ours)
Stripe’s landing (our capture) sets a left-aligned, four-line headline whose first sentence is dark navy and whose continuation shifts to a softer blue-gray, so one block of text works as headline and subhead without a size change. The signature multicolor gradient ribbon (orange, pink, violet, blue) bleeds off the right edge behind the nav, while thin vertical guide lines frame the content column; a live ‘Global GDP running on Stripe’ counter and a customer logo row add proof above the fold. Navigation is a mega-menu bar (Products, Solutions, Developers, Resources, Pricing) with an outlined ‘Sign in’ and a violet ‘Contact sales’. Pricing pairs a white Standard card, with the per-transaction price in its own panel, against a dark navy Custom card, and adds in-page anchors for Standard pricing, Custom pricing and FAQs. The contact-sales step is a three-step form (Your email → Your info → Let’s talk) in a white card over the gradient. Pitfall: a floating ‘sales reps available’ chat popover overlaps content in every capture, so keep such widgets out of the first viewport.

### Best practices (ours)
- Use color inside the headline (dark lead sentence, lighter continuation) to merge headline and subhead into one block.
- Keep a loud brand gradient to one edge or band and set text on plain white for contrast.
- Split pricing into a self-serve card and a sales card with different surface colors so the two paths never blur.
- Break sales forms into labeled steps with a visible progress row, asking for work email first.
- Build color scales in a perceptually uniform space (Stripe used CIELAB) so every hue has the same contrast at the same step (OFFICIAL, https://stripe.com/blog/accessible-color-systems).
- Encode contrast in the scale: in Stripe’s product palette any two colors at least 5 steps apart pass for small text, and 4 steps for icons and large text (OFFICIAL, https://stripe.com/blog/accessible-color-systems).
- On a platform, give third parties one branded element (Stripe Apps: a colored app indicator) and keep the rest of the UI standard (OFFICIAL, https://docs.stripe.com/stripe-apps/design).

### Deep analysis
Values marked OFFICIAL come from the cited source page (read 2026-10-23); ESTIMATED values were measured by us from the live page’s computed CSS or our captures on 2026-10-23 (what ships today, not official tokens); OURS is our interpretation.

#### Purpose and audience (OURS) · source: https://stripe.com
- Marketing site for payments and financial infrastructure. It speaks to two audiences at once: developers who self-serve, and business buyers who talk to sales.
- The design must look premium and trustworthy (it handles money) and also feel energetic and modern.

#### Page structure and flow (ESTIMATED) · source: https://stripe.com
- Landing (capture 2026-10-22): left-aligned headline, gradient ribbon bleeding off the right edge, thin vertical guide lines, a live ‘Global GDP running on Stripe’ counter and a logo row above the fold.
- Pricing: a white Standard card next to a dark navy Custom card, with in-page anchors (Standard, Custom, FAQs).
- Contact sales: a three-step form (Your email → Your info → Let’s talk) in a white card over the gradient. We captured it but did not submit it.
- Live 2026-10-23 hero: ‘Get started’ (filled) next to ‘Sign up with Google’ (outlined) under the headline.

#### Color: official product color system (OFFICIAL) · source: https://stripe.com/blog/accessible-color-systems
- Stripe rebuilt the color system for the Dashboard and products using its internal interface library (blog, 15 Oct 2019). This describes product UI, not the marketing gradient.
- Three goals: predictable accessibility, clear vibrant hues, and consistent visual weight, so no hue looks more important than another at the same level.
- Scales were tuned in CIELAB (a perceptually uniform space) with an in-house tool, because HSL lightness makes yellows look lighter than blues.
- Rules: default text and icon colors pass WCAG 2.0 contrast on white and on the lightest tint of any hue. Any two colors at least 5 levels apart pass for small text; 4 levels for icons and large text.
- Badges moved both background and text up one level so all badge colors stay legible without per-color tuning.

#### Color as shipped on the site (ESTIMATED) · source: https://stripe.com
- Primary action #533AFD (filled ‘Get started’ / ‘Contact sales’, and the ‘Sign in’ text). Outlined buttons: #B9B9F9 border with a rgba(255,255,255,.65) fill so the gradient shows through.
- Headline navy #061B31; the softer continuation and secondary text are #64748D.
- Gradient ribbon colors sampled from our capture: peach #E39B86, violet #845990, light orange #FCD2A6, pale blue #D4DCEE (approximate pixel samples, not tokens).
- The site exposes no CSS custom properties at :root (styles are compiled), so there is no public token file to read. Measured 2026-10-23 (UTC+8) from the public page’s computed CSS at 1440px and 375px; values can change without notice.

#### Typography (ESTIMATED) · source: https://stripe.com
- One family throughout: ‘sohne-var’ (Söhne, a commercial typeface from Klim Type Foundry, licensed separately), with ‘SF Pro Display’ as fallback.
- Hero h1: 48px / 55.2px (1.15), weight 300 (light), −0.96px tracking (−0.02em) at 1440px; 34px / 35px at 375px.
- Two-tone section heading, measured: the navy h2 and its slate continuation are both 32px / 35.2px, weight 300, −0.02em. Only the color changes, which confirms what we saw in the captures.
- Buttons are 16px / 400 in the hero and 14px in the nav. Using a light weight for display sizes and regular for UI text is the main type contrast.

#### Layout, spacing and shape (ESTIMATED) · source: https://stripe.com
- A 4px radius on every button we measured: square, not pill, which reads as ‘financial’ and precise.
- Button heights: 40px (nav), 48px (hero), 44px on mobile, where hero CTAs become full width (343px in a 375px viewport, 16px side margins).
- The nav is 76px and scrolls away instead of sticking (position: relative). Thin vertical guide lines mark the content column at desktop sizes.

#### Platform design rules (Stripe Apps) (OFFICIAL) · source: https://docs.stripe.com/stripe-apps/design
- Custom styling of UI elements is intentionally limited to keep the Dashboard consistent and accessible; colors per element are restricted because contrast matters.
- Brand expression goes into one place: the app indicator, a color bar and icon (brandColor and brandIcon props on ContextView). Any color is allowed there.
- Apps are built from provided UI components and recommended patterns, which the docs say also speeds up app review.

#### Accessibility check (ESTIMATED) · source: https://stripe.com
- Contrast (computed by us): navy #061B31 on white = 17.4:1; slate #64748D on white = 4.75:1, just above AA for body text, so don’t lighten it further; white on #533AFD = 6.2:1.
- Text sits on plain white, not on the gradient, so the ribbon never hurts legibility.
- In every capture a floating ‘sales reps available’ chat popover covered content in the first viewport. That is a usability and focus-order risk.

#### What makes it work (OURS) · source: https://stripe.com
- One loud signature (the gradient) kept to one edge, and everything else quiet: white surfaces, light-weight type, square buttons.
- Color changes inside headings do the work of extra type sizes.
- Clear dual paths: violet filled for self-serve, sales on a dark card. The two never blur.

#### Lessons for our own sites (OURS) · source: https://stripe.com
- If you want a gradient, give it a fixed zone and never set body text on it.
- Light (300) display type looks premium only with a high-quality face and generous size; at small sizes go back to 400.
- Copy the product palette method from the 2019 blog (perceptual scales with contrast built into the steps) for any app with status colors.

## 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: Split hero · Mood: Stark, editorial, technical
- License / terms: Screenshots: fair-use reference captures; site content © Vercel
- Industry: Devtools
- Patterns: Product-as-hero, Pricing table, Sign-up entry

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

### Analysis (ours)
Vercel’s landing (our capture) is a stark three-part hero on an off-white canvas (#FAFAFA, ESTIMATED): a two-word, tightly tracked headline on the left, the black triangle mark with a soft glow in the center, and three short positioning lines on the right. Color is effectively absent; hierarchy comes from scale, weight and fill versus outline (‘Deploy now’ filled black, ‘Talk to sales’ outlined), and the three header actions are graded the same way (Get a Demo and Log In outlined, Sign Up filled). Pricing is a bordered three-column table (Hobby, Pro marked ‘Popular’, Enterprise) where the price is the largest type, every feature row has a small line icon, and each tier opens with ‘All … features, plus:’ so lists show only the differences. Sign-up is a centered white card on the gray page with four provider buttons (Google, GitHub, ChatGPT, Apple), ‘Show other options’, an email link and one customer metric below. Lesson: in a monochrome system, fill versus outline alone can carry the whole primary/secondary hierarchy. Pitfall: with no accent color, the Popular tier relies on a tiny badge and a slightly whiter column, which is easy to miss.

### Best practices (ours)
- Grade every button pair the same way (filled = primary, outlined = secondary) across nav, hero and pricing.
- Start each higher tier with ‘Everything in X, plus:’ and list only the additions.
- Put the developer’s likely identity providers first on sign-up and tuck email behind them.
- If you remove accent color, give the recommended plan a stronger cue than a small badge.
- Map every color step to a job: Geist steps 100–300 are component backgrounds (default, hover, active), 400–600 borders, 700–800 high-contrast fills, 900–1000 text and icons (OFFICIAL, https://vercel.com/geist/colors).
- Use solid grays by default and alpha grays only when the background must show through; draw each border once and keep shadows translucent (OFFICIAL, https://vercel.com/geist/colors).
- Tie radius to elevation: Geist uses 6px for on-page surfaces and tooltips, 12px for menus and modals, 16px for fullscreen (OFFICIAL, https://vercel.com/geist/materials).
- Publish docs as Markdown for coding agents: every Geist page is available with .md appended (OFFICIAL, https://vercel.com/geist/introduction).

### Deep analysis
Values marked OFFICIAL come from the cited source page (read 2026-10-23); ESTIMATED values were measured by us from the live page’s computed CSS or our captures on 2026-10-23 (what ships today, not official tokens); OURS is our interpretation.

#### Purpose and audience (OURS) · source: https://vercel.com
- Marketing site for a frontend cloud and AI infrastructure platform. The audience is developers and engineering leads; the site has to feel as precise as a developer tool.
- The site is built with Vercel’s own public design system, Geist, so the marketing page also shows off the system.

#### Page structure and flow (ESTIMATED) · source: https://vercel.com
- Landing (capture 2026-10-22): a three-part hero on #FAFAFA with a two-word headline left, the triangle mark with a soft glow center, and short positioning lines right. Live 2026-10-23 headline: ‘Agentic Infrastructure’.
- Pricing: bordered three-column table (Hobby, Pro ‘Popular’, Enterprise); each tier starts ‘All … features, plus:’.
- Sign-up: centered white card with Google, GitHub, ChatGPT and Apple providers first, then ‘Show other options’ and an email link.

#### Color system (OFFICIAL) · source: https://vercel.com/geist/colors
- 10 scales: backgrounds, gray, gray-alpha, blue, red, amber, green, teal, purple, pink. P3 colors are used on supporting browsers and displays.
- Each non-background scale has steps 100–1000: 100 default bg, 200 hover bg, 300 active bg, 400 default border, 500 hover border, 600 active border, 700 high-contrast bg, 800 hover high-contrast bg, 900 secondary text and icons, 1000 primary text and icons.
- Two backgrounds: Background 1 (default, use it especially under color) and Background 2 (use sparingly for subtle separation).
- Gray for text, icons, fills, borders and dividers by default; gray-alpha only when the background should show through (shadows, overlays). Draw each border once; keep material shadows translucent.

#### Color as shipped on the site (ESTIMATED) · source: https://vercel.com
- Page #FAFAFA, primary text #171717, secondary text #4D4D4D, hairlines #EBEBEB.
- --ds-blue-700 = hsl(212 100% 48%) ≈ #0072F5 (the skip-link color); --ds-blue-900 = hsl(211 100% 42%).
- Primary button: #171717 fill with white text; secondary: white fill with dark text. No brand accent appears in the hero. Measured 2026-10-23 (UTC+8) from the public page’s computed CSS at 1440px and 375px; values can change without notice.

#### Typography (OFFICIAL) · source: https://vercel.com/geist/typography
- Geist Sans and Geist Mono (plus the display-only Geist Pixel), 9 weights each, Swiss-inspired, free under the SIL Open Font License 1.1 (https://vercel.com/font).
- Styles are Tailwind classes that set size, line height, tracking and weight together: text-heading-72 … 14, text-button-16 / 14 / 12, text-label-20 … 12 (with mono variants), text-copy-24 … 13.
- Label = single line (Label 14 is ‘most common… used in many menus’); Copy = multi-line with more line height (Copy 14 is ‘most commonly used’). Copy 24 and 20 are for marketing heroes.
- Measured on the site (ESTIMATED): h1 64px / 64px, weight 400, −3.84px (−0.06em); section h2 56px, weight 450, −0.06em; 48px / 56px at 375px; hero copy 24px / 32px, weight 450, −0.04em; nav buttons 14px / 500.

#### Materials, radius and shadow (OFFICIAL) · source: https://vercel.com/geist/materials
- Surface (on the page): base and small 6px radius, medium and large 12px.
- Floating (above the page): tooltip 6px (the only floating element with a triangular stem), menu 12px, modal 12px, fullscreen 16px.
- Measured shadow tokens (ESTIMATED): borders are drawn as shadows (0 0 0 1px rgba(0,0,0,.08)); elevation stacks several very light layers, e.g. medium = 0 2px 2px rgba(0,0,0,.04), 0 8px 8px −8px rgba(0,0,0,.04).
- Hero CTAs on the site are full pills (9999px, 40px tall) while nav buttons use the 6px material radius. Marketing and product shapes are deliberately different.

#### Layout and grid (OFFICIAL) · source: https://vercel.com/geist/grid
- Grid is ‘a core part of the Vercel aesthetic’: a GridSystem with visible guide lines, cells that can span, and ‘solid’ cells that hide the guides they cover.
- Responsive rows and columns are set per breakpoint (sm, md, lg), e.g. 1 / 2 / 3 columns.
- Measured on the site (ESTIMATED): page width tokens 1200px (--geist-page-width) and 1400px (--ds-page-width), each with 24px margins; a 4px spacing unit (4, 8, 12, 16, 24, 32, 40, 64, 96, 128…); form control heights 32 / 36 / 40px; 64px sticky header.

#### Components and states (ESTIMATED) · source: https://vercel.com
- Button pairs are always ranked the same way: filled black = primary, white or outlined = secondary (nav, hero and pricing).
- Geist components ship as @vercel/geistcn (React) with icons in @vercel/geistcn-assets (OFFICIAL, https://vercel.com/geist/introduction).
- Pricing rows use small line icons, and price is the largest type in each column.

#### Accessibility check (ESTIMATED) · source: https://vercel.com
- Contrast (computed by us): #171717 on #FAFAFA = 17.2:1; secondary #4D4D4D on #FAFAFA = 8.1:1, comfortably AA.
- A skip link is present. Geist states 900/1000 are designed for ‘accessible text and icons’ (OFFICIAL, https://vercel.com/geist/colors).
- Watch-out: −0.06em tracking on 56–64px headings is very tight; it works for Geist at that size but will collide in other fonts or at smaller sizes.

#### What makes it work (OURS) · source: https://vercel.com
- Monochrome plus fill vs outline gives a whole hierarchy without an accent color.
- Visible grid lines turn layout into decoration, so the page looks engineered without illustrations.
- The design system is public, documented and agent-readable, so the marketing site and the product share one source.

#### Lessons for our own sites (OURS) · source: https://vercel.com
- Adopt the 10-step ‘job per step’ color model; it makes hover, active and border states predictable.
- Since Geist is open-licensed, it is a safe font choice for a developer-tool look, but pair it with your own color so you don’t look like a Vercel template.
- Give the recommended pricing tier a stronger cue than a small badge when there is no accent 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:

- `#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: **Split 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: Centered hero · Mood: Friendly, illustrated
- License / terms: Screenshots: fair-use reference captures; site content © Notion
- Industry: SaaS
- Patterns: Product-as-hero, Pricing table, Sign-up entry

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

### Analysis (ours)
Notion’s landing (our capture) is a centered hero: a very heavy, tightly set black headline over two lines with a green ‘Ship’ pill embedded mid-sentence, one line of subcopy, and a blue primary button next to a pale-blue secondary. Below sits a framed product screenshot (sidebar, team home page, kanban board) flanked by Notion’s black-and-white hand-drawn characters, with a customer logo strip pinned to the fold. The nav centers Product, Resources, Pricing and Request a demo, with ‘Log in’ as text and ‘Get Notion free’ as the only filled blue button. Pricing groups four plans into two panels, a white ‘Essentials’ panel (Free, Plus) and a tinted ‘AI workspace’ panel (Business, marked Recommended, and Enterprise), with a monthly/yearly segmented toggle and ‘Save up to 20% with yearly’ beside it. Sign-up is a centered modal over a blurred app skeleton: work email first, an inline tip explaining why, then Google, Microsoft and ChatGPT as alternatives. Lesson: one brand blue used only for actions, plus monochrome illustrations, keeps a busy page calm; pitfall: two-panel pricing makes plan names harder to scan than one row, so the Recommended label carries a lot of weight.

### Best practices (ours)
- Use the brand color only for actions; keep illustrations and imagery monochrome.
- Highlight one word of the headline with a small colored pill instead of coloring the whole line.
- Explain why you ask for a work email right under the field.
- Group pricing tiers by audience (personal vs company) when you have four or more plans.

## 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: **Centered 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
- Industry: Productivity / Devtools
- Patterns: Product-as-hero, Pricing table, Sign-up entry

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

### Analysis (ours)
Raycast (our capture) runs every page on a near-black canvas (#07080A, ESTIMATED) with a rounded, translucent floating nav bar and a single light ‘Download’ button carrying the Apple logo. The hero is full-bleed abstract artwork of diagonal red light bars behind a centered white headline, a two-line description, a ‘Download for Mac’ button and small monospace notes on system requirements and Homebrew install. Pricing uses dark cards with a Monthly/Yearly segmented toggle (with a ‘-20%’ chip); the middle Pro card is raised and gets the only light button, and nested segmented controls inside cards switch sub-tiers (Pro/Plus/Max) without adding columns. The Store page reuses the hero formula: floating app-icon tiles fading toward the edges, a centered ‘Store’ title and a search field with a keyboard-shortcut hint. Lesson: one dramatic art direction plus a repeated centered template makes every page instantly recognizable. Pitfall: gray body text in long feature lists on dark cards gets small and dim.

### Best practices (ours)
- Repeat one hero template (art + centered title + one action) across pages for instant recognition.
- Use segmented controls inside a pricing card to show sub-tiers instead of adding columns.
- Show keyboard-shortcut hints in search fields for keyboard-first products.
- Raise and lighten the recommended pricing card rather than recoloring 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:

- `#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: Bold color accent · Layout pattern: Centered hero · Mood: Playful, colorful
- License / terms: Screenshots: fair-use reference captures; site content © Arc
- Industry: Consumer software
- Patterns: Centered hero, Sign-up entry

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

### Analysis (ours)
arc.net in our capture is loud and playful: a saturated, slightly grainy blue (#3E45FA, ESTIMATED) frames a cream content band with wavy, ticket-stub edges, and the nav is plain white text on blue. At capture time the homepage hero promotes Dia, the makers’ newer browser, with a serif headline, a dark pill ‘Try Dia’ button containing the app icon and a product screenshot, so Arc itself is no longer the hero. The Max page centers a hand-drawn ‘MAX’ logotype, two short lines and a small red ‘Get Started’ pill above a large video frame, under a dark-blue Dia banner. The download page is a violet-to-blue gradient with the app icon, a two-line question headline, a note that Arc now gets Chromium updates only, and a white ‘Download Arc for Windows’ button. Lesson: texture, wavy dividers and a custom logotype give a consumer product personality that flat SaaS pages lack. Pitfall: cross-promotion for another product on all three pages dilutes the primary download path.

### Best practices (ours)
- Use texture, custom dividers and a hand-drawn logotype to give a consumer product personality.
- Keep one conversion button per page and make it the highest-contrast element (white on blue here).
- Say plainly when a product is in maintenance mode, next to the download button.
- Limit cross-promotions to one placement so they don’t compete with the main action.

## 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: 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://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: Stacked product hero · Mood: Futuristic, motion-heavy
- License / terms: Screenshots: fair-use reference captures; site content © Framer
- Industry: SaaS
- Patterns: Product-as-hero, Pricing table, Sign-up entry

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

### Analysis (ours)
Framer (our capture) is pure black (#000000, ESTIMATED) with a left-aligned two-line white headline, a white ‘Get started for free’ button beside a dark ‘Download app’, and a ‘New: Framer MCP →’ link right-aligned on the same line. Instead of a static screenshot, the hero is a large dark editor frame with a glowing electric-blue canvas outline and an agent panel showing a prompt, a design plan and its ‘Thought’ steps, so the demo reads as live. Pricing is a four-column bordered table on black with a yearly-billing toggle, each plan paired with a one-line audience (‘Creative personal sites’, ‘Mission critical sites’), a credits dropdown per plan, and the Pro button as the only blue fill. In our capture the Pro price had not rendered (only ‘per month’ shows), a reminder to server-render prices. Sign-up leaves the dark theme entirely for a small centered white card: Google first, an ‘OR’ divider, a work-email field and Continue. Lesson: a one-line audience per plan helps people choose faster than a feature list; pitfall: the cookie banner covers the lower-left of both hero and pricing in our captures.

### Best practices (ours)
- Pair every plan name with a one-line audience description.
- Show the product working (an agent panel mid-task) rather than a static screenshot.
- Server-render prices so they never appear blank while scripts load.
- Keep cookie banners compact and away from primary content and 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:

- `#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: **Stacked product 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
- Industry: Consumer electronics
- Patterns: Product-as-hero, Sign-up entry

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

### Analysis (ours)
apple.com (our capture) is a stack of full-width product tiles, each centered: a large product name, a one-line tagline, availability text and a pair of pill buttons (filled blue ‘Learn more’, outlined ‘Pre-order’), then product photography. Tiles alternate light gray and black backgrounds to separate stories without dividers. The global nav is a thin bar of small text links with icon-only search and bag. The iPhone page switches to a left-aligned ‘iPhone’ title and a horizontal row of model thumbnails with small orange ‘New’ labels, so users can jump to a model before reading anything. The store page (‘Shop iPhone’) has a large title with help links (Connect with a Specialist, Find an Apple Store) on the right, a text sub-nav, and a horizontally scrolling carousel of rounded white model cards under ‘All models. Take your pick.’, where the second phrase is set in gray. Lesson: photography plus centered type with almost no UI chrome works when the product is the visual; pitfall: horizontal card rows hide models off-screen, so the arrow control and the partially visible next card must stay obvious.

### Best practices (ours)
- Let photography carry the page; keep type centered and chrome minimal.
- Alternate section backgrounds (light/dark) instead of drawing dividers.
- Offer a thumbnail row of models near the top so users can jump straight to what they want.
- Use a two-tone heading (black statement, gray aside) to add voice without extra size.
- Keep primary buttons at least 44px tall; apple.com’s pill buttons are 44px, matching the HIG’s 44×44pt default control size on iOS (OFFICIAL, https://developer.apple.com/design/human-interface-guidelines/accessibility).
- Don’t ship SF Pro on a non-Apple website: Apple’s licence limits the SF fonts to mock-ups of interfaces for Apple platforms; use a system-ui stack or an open font (OFFICIAL, https://developer.apple.com/fonts/).
- Use near-black (#1D1D1F) instead of pure black for text on white to soften contrast without losing legibility (ESTIMATED, live CSS).

### Deep analysis
Values marked OFFICIAL come from the cited source page (read 2026-10-23); ESTIMATED values were measured by us from the live page’s computed CSS or our captures on 2026-10-23 (what ships today, not official tokens); OURS is our interpretation.

#### Purpose and audience (OURS) · source: https://www.apple.com
- A product showcase and store front door for a very broad consumer audience. Every tile has to sell one product in a few words and a photo.
- The site needs almost no explanation, because the products are already known.

#### Page structure and flow (ESTIMATED) · source: https://www.apple.com
- Landing (capture 2026-10-22): stacked full-width product tiles, each centered with a name, a one-line tagline, availability text, two pill buttons, then photography. Tiles alternate light and dark backgrounds instead of using dividers.
- iPhone page: left-aligned title and a row of model thumbnails with small orange ‘New’ labels.
- Store page: large title, help links on the right, text sub-nav, and a horizontal carousel of rounded white model cards under a two-tone heading.

#### Typography (OFFICIAL) · source: https://developer.apple.com/fonts/
- SF Pro is the system font for Apple platforms: nine weights, variable optical sizes, four widths and a rounded variant; New York is the companion serif.
- Licence: the SF fonts may be used ‘solely for creating mock-ups of user interfaces’ for software on Apple’s platforms (licence text on the fonts page). A third-party website can’t self-host SF Pro.
- Measured on the site (ESTIMATED): ‘SF Pro Display’ is used for large text and ‘SF Pro Text’ for small text, a manual optical-size split. Tile headline copy 28px / 32px; availability line 19px / 23px in #6E6E73; buttons 17px / 400 with −0.374px tracking (≈ −0.022em).

#### Color as shipped on the site (ESTIMATED) · source: https://www.apple.com
- Text #1D1D1F on #FFFFFF; secondary #6E6E73.
- Filled button #0071E3 with white text. Outline and links are #0066CC on light tiles and #2997FF on dark tiles, so the blue is retuned per background.
- The focus color token is #0071E3 (--sk-focus-color) with a 1px offset.
- Global nav: rgba(255,255,255,.8) with saturate(1.8) blur(20px), a translucent-material look similar to the HIG’s materials. Measured 2026-10-23 (UTC+8) from the public page’s computed CSS at 1440px and 375px; values can change without notice.

#### Layout and spacing (ESTIMATED) · source: https://www.apple.com
- Global nav 44px; product local nav 52px (66px when stacked).
- Breakpoints read from CSS variables: small 320–833px, medium 834–1023px, large 1024px and up.
- Content is centered with generous vertical space; each tile is a self-contained story, so the page can be re-ordered without redesign.

#### Components and states (ESTIMATED) · source: https://www.apple.com
- Pill buttons: 980px radius, 44px tall, 11px / 21px padding. Pairs are filled ‘Learn more’ + outlined ‘Buy’ / ‘Pre-order’.
- Model thumbnail row with ‘New’ labels, and a horizontal card carousel with an arrow control and a partly visible next card.
- Search and Bag are icon-only in the nav; everything else is small text links.

#### Relation to the HIG (OFFICIAL) · source: https://developer.apple.com/design/human-interface-guidelines/accessibility
- Control size default / minimum on iOS and iPadOS is 44×44 / 28×28pt. The site’s 44px pills meet the default.
- Contrast: text up to 17pt needs at least 4.5:1; 18pt and up or bold needs 3:1 (https://developer.apple.com/design/human-interface-guidelines/accessibility).
- The HIG is written for apps, not websites. apple.com borrows its values (44pt targets, translucent materials, SF type) rather than following a separate public web spec. See DS-002 for the full HIG deep dive.

#### Accessibility check (ESTIMATED) · source: https://www.apple.com
- Contrast (computed by us): #6E6E73 on white = 5.1:1 (AA); white on #0071E3 = 4.7:1 (AA at 17px, with little margin); #2997FF on black = 7.0:1; #0066CC on white = 5.6:1.
- Carousels hide models off-screen, so the arrow control and the partial next card are what make the content discoverable. Keep both if you copy the pattern.
- Alternating black and light tiles means each tile needs its own tuned link color, as Apple does (#0066CC vs #2997FF).

#### What makes it work (OURS) · source: https://www.apple.com
- The photography does the persuading; the type is centered, short and calm, and the UI chrome is minimal.
- One button style (the pill) in two weights (filled and outline) appears everywhere, so users never have to learn a new control.
- Small, consistent tokens: one blue, one near-black, one gray.

#### Lessons for our own sites (OURS) · source: https://www.apple.com
- This style works only with strong imagery. Without product photos, centered minimal tiles look empty.
- Retune your accent per background instead of using one blue on both light and dark.
- Get the feel with system-ui plus tight tracking on large sizes instead of copying Apple’s licensed fonts.

## 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
- Industry: Travel marketplace
- Patterns: Search-first gallery, Map + list, Sign-up entry

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

### Analysis (ours)
Airbnb’s homepage (our capture) is search-first: category tabs with small 3D illustrated icons (All, Homes, Experiences, Services) sit above a pill search bar split into Where / When / Who segments with a round coral-red search button, and the rest of the page is horizontal rows of rounded photo cards grouped by destination. Cards are image-led with a heart to save, a ‘Guest favorite’ badge and two short lines (title, then total price and rating); at capture time a modal announcing all-fees-included pricing covered the first view. Search results split the screen into a two-column card list and a map with price pins, under a row of filter chips (Washer, Wifi, Self check-in…), with ‘Prices include all fees’ repeating the pricing promise. The host entry page leads with a personalized earnings estimate (‘Your home could make $…’) driven by a nights slider and a location field, beside a map of nearby rates. Lesson: put the primary task (search, or estimate) in the first viewport and keep the brand color for the button that runs it. Pitfall: announcement modals on first load block the very grid the page is built around.

### Best practices (ours)
- Make the primary task (search) the first thing on the page, and give it the only brand-colored button.
- Keep cards image-first with two short text lines and one save action.
- Pair list results with a map and put price on the map pins.
- Turn a sign-up pitch into an interactive estimate with the user’s own numbers.

## 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
- Industry: Open-source design assets
- Patterns: Generator / playground, Docs with code tabs

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)
dicebear.com (our capture) is a light, developer-first split hero: a two-line headline ‘Pick a seed. Get an avatar.’ with only the word ‘avatar’ in blue, a paragraph that lists every delivery route (HTTP API, JS, PHP, Python, Rust, Go, Dart, C# libraries and a CLI) and links the style count (61 at capture), then a black ‘Try Playground’ button beside an outlined ‘Get Started →’. On the right, six sample avatars sit in rounded-square tiles, each on its own pastel background and slightly rotated, so the hero shows the range of styles instead of describing it. The nav is short (Playground, Styles, Animated, Docs, About) with search, a theme toggle and a GitHub star count. The UI itself is almost colorless (#FAFAF9 canvas, ESTIMATED) so the avatars carry all the color. Lesson: the core idea, the same seed always returns the same avatar, is the headline itself, which is why DiceBear works so well for user IDs. Pitfall: styles have different licenses (most CC0, some CC BY 4.0) and the free public HTTP API is for non-commercial use, so check both before shipping.

### Best practices (ours)
- Use a stable, non-personal seed (a user ID or hash), never an email address, so avatars stay the same and leak nothing.
- Pick one style per product and fix its options (background color, radius) so every avatar matches.
- For commercial products, generate with the JS library or a self-hosted API instead of the public HTTP API.
- Record the style’s license; add the credit line when the style is CC BY 4.0.
- Show a generated avatar as the fallback until a user uploads a photo, at the same size and shape.

### Usage terms at a glance (our summary, not legal advice)
- Commercial use: Yes via JS library or self-hosted API; public HTTP API is non-commercial
- Attribution: Depends on style (CC BY 4.0 styles need credit; CC0 don’t)
- Redistribution: Per style license
- How you get it: HTTP API, JS/PHP/Python/Rust/Go/Dart/C# libraries, CLI

## 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)
- Industry: Open-source design assets
- Patterns: Docs with code tabs

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

### Analysis (ours)
The Lorelei page (our capture) uses DiceBear’s documentation template: a left sidebar listing every style (with ‘New’ badges on recent ones), a breadcrumb and ‘View as Markdown’ link, a short description, a preview strip of eight avatars on a checkerboard that shows the transparent background, a LICENSE box crediting the original artist (Lisa Wischofsky, CC0 1.0), and code tabs for HTTP-API, JS, PHP, Python, Rust, Go, Dart, C# and CLI. A right-hand ‘On this page’ rail lists every option (earrings, eyebrows, freckles, glasses, hair, mouth and their colors). The style itself is fine black ink line art of heads with detailed hair and expressive eyes. Lesson: line art reads well on any background color, so Lorelei suits both light and dark UIs and pairs with a single tinted circle behind it. Pitfall: thin strokes get muddy below about 32px; at small sizes use a bolder style or show initials.

### Best practices (ours)
- Place Lorelei on a solid tinted circle or rounded square; the transparent default can vanish on busy backgrounds.
- Use it at 40px and above; switch to initials or a simpler style for 24–32px lists.
- Keep the same backgroundColor set across the product so lists look consistent.
- Use the neutral variant (lorelei-neutral) for a calmer, less expressive set.

### Usage terms at a glance (our summary, not legal advice)
- Commercial use: Yes
- Attribution: Not required (CC0)
- Redistribution: Allowed (CC0)
- How you get it: DiceBear API / libraries

## 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)
- Industry: Open-source design assets
- Patterns: Docs with code tabs

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)
The Notionists page (our capture) follows the same DiceBear template as Lorelei (style sidebar, preview strip, LICENSE box crediting Zoish under CC0 1.0, code tabs, options rail), with a sponsored CDN card in the right rail. The style differs: half-body characters drawn in black hand-drawn lines, often posing with a small prop (a phone or a coffee cup), and options that include Gesture, Clothes Graphic, Ink Color and Paper Color. The sketchy, black-and-white look matches the illustration style many docs and workspace tools use, which is why it fits collaboration UIs. Lesson: the Ink Color and Paper Color options let you tint the whole set to your brand while keeping the hand-drawn feel. Pitfall: half-body poses with props are busy at small sizes, so crop to the head for 24–32px avatars.

### Best practices (ours)
- Use Notionists for larger placements (profile headers, comment threads), not tiny 24px chips.
- Tint with Paper Color to a soft brand tone and keep Ink Color dark for contrast.
- Pair with a matching illustration style elsewhere so avatars and empty states feel like one family.
- Use notionists-neutral when you want faces without varied skin tones and props.

### Usage terms at a glance (our summary, not legal advice)
- Commercial use: Yes
- Attribution: Not required (CC0)
- Redistribution: Allowed (CC0)
- How you get it: DiceBear API / libraries

## 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
- Industry: Open-source design assets
- Patterns: Generator / playground, In-context product preview

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)
boringavatars.com (our capture) sets everything in a monospace typeface: a short left column (‘Generate unique SVG avatars’, a one-paragraph description and a GitHub button with the star count), and a large soft teal-gray panel (#C1D8D9, ESTIMATED) that works like a live playground. Palette chips and variant toggles float above the panel; a row of named avatars sits over the copyable component code (‘<Avatar colors={[…]} variant="beam" />’), and below that the same avatars appear inside realistic mock UI: a feed post, a chat thread, a profile card with follower counts. Lesson: showing generated avatars inside real interface patterns proves they work in context, and the palette you pass in is the whole brand. Pitfall: the React library is MIT, but the hosted avatar service is a separate subscription product, so don’t confuse the two.

### Best practices (ours)
- Pass your own 5-color palette so the abstract avatars match your brand.
- Use one variant (beam for faces, marble or bauhaus for teams or workspaces) across the product.
- Generate from a stable ID, not a display name that users can change.
- Preview avatars inside your real list, chat and profile layouts before committing.

### Usage terms at a glance (our summary, not legal advice)
- Commercial use: Yes (MIT library); hosted service is paid
- Attribution: Keep the MIT notice in code
- Redistribution: Library: MIT terms
- How you get it: npm React component

## 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)
- Industry: Free design assets
- Patterns: Generator / playground

Generates multicultural avatars from any string; JS library and API. No avatar files are reproduced here, so the license conditions can be read at the source first.

### Analysis (ours)
multiavatar.com (our capture) is a single-purpose generator: one large circular avatar centered on white, a text field under it that doubles as the seed (it showed ‘Linux’ at capture), and four round icon buttons (regenerate, download, share, favorite). Short centered paragraphs explain the controls (type anything, click the spinning button or press N), state the scale (12 billion possible avatars) and the terms of use, while gray doodle shapes in the top corners and cart and favorite counters in the header add personality. Lesson: one input, one result and a keyboard shortcut make generation feel instant. Pitfall: the Multiavatar License v1.0 has its own conditions, so read it before using the avatars in a product (this library shows only the page capture, not avatar files).

### Best practices (ours)
- Read the Multiavatar License v1.0 before shipping and record the decision with the entry.
- Seed from a stable ID so the same user always gets the same avatar.
- Offer a keyboard shortcut for repeat actions like ‘generate another’.
- Label icon-only buttons with accessible names and tooltips.

### Usage terms at a glance (our summary, not legal advice)
- Commercial use: Under Multiavatar License v1.0 conditions
- Attribution: Check the license
- Redistribution: Check the license
- How you get it: JS library, API, web generator

## 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
- Industry: Open-source design assets
- Patterns: Mix-and-match builder, Split hero with artwork

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

### Analysis (ours)
openpeeps.com (our capture) is a 50/50 split: on the left, a white panel with a heavy italic display serif title (‘Open Peeps’), a one-line subline (‘A hand-drawn illustration library.’), a black filled ‘Use with Blush’ button next to an outlined ‘Download’, a row of design-tool icons and the license line (by Pablo Stanley, free for commercial and personal use under CC0); on the right, a dense black-and-white crowd of hand-drawn people fills the whole column. A promotional banner sits above and a ‘Made with Webflow’ badge in the corner. Lesson: a crowd shot shows the system’s range (faces, hair, clothing) at a glance, which is the real selling point of a mix-and-match library. Pitfall: black line art on white is high-contrast and heavy, so in a product use it sparingly (empty states, onboarding) rather than on every screen.

### Best practices (ours)
- Build a small, fixed cast of characters from the library and reuse them across the product.
- Use Open Peeps for empty states and onboarding; keep dense UI screens free of illustration.
- Add one brand accent color to clothing or background so the black line art feels on-brand.
- CC0 needs no credit, but keep a note of the source in your design files.

### Usage terms at a glance (our summary, not legal advice)
- Commercial use: Yes
- Attribution: Not required (CC0)
- Redistribution: Allowed (CC0)
- How you get it: Figma/Sketch download, Blush, DiceBear style

### Mockups (ours)
Original example screens made by Design Library with Open Peeps illustrations (CC0 1.0, https://www.openpeeps.com/). Open Peeps are black line art with white fills, so colour comes from vermilion and sand shapes behind each figure (the approach the Open Peeps site itself uses).
- phones: https://design-library-byt.pages.dev/full/AV-006-mockup-phones.png · caption: Mockup by Design Library using Open Peeps illustrations (CC0 1.0, https://www.openpeeps.com/)
- hero: https://design-library-byt.pages.dev/full/AV-006-mockup-hero.png · caption: Mockup by Design Library using Open Peeps illustrations (CC0 1.0, https://www.openpeeps.com/)

### How to use in onboarding / empty states / success
- Onboarding: Open Peeps are black line art, so put a solid brand-colour circle or blob behind each peep to add colour without editing the figures.
- Empty states: a seated or relaxed peep with a single soft shape behind it feels calm; avoid crowds on small screens.
- Success: a waving or smiling peep with an accent check mark; keep the illustration and check close together so they read as one moment.
- The thin strokes thin out when scaled down: keep figures at least ~180 px tall on mobile and test on dark 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:

- `#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: Bold color accent · Layout pattern: Centered hero · Mood: Bold, illustrative
- License / terms: CC0 (public domain), by Pablo Stanley
- Industry: Open-source design assets
- Patterns: Mix-and-match builder, Centered hero with artwork

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

### Analysis (ours)
humaaans.com (our capture) puts the product in the hero: oversized flat-color people (saturated blue, red, orange and warm skin tones) are cropped at the edges and overlap a big lowercase plum serif wordmark, ‘humaaans’, with a two-line subline and two pill buttons (blue ‘Use with Blush’, outlined ‘Download’), plus a CC0 line crediting Pablo Stanley. Movement comes from figures striding into and out of the frame. Lesson: cropping illustrations off the edges makes a small page feel large and lively. Pitfall: in our capture one figure overlaps the end of the subline, cutting into the text; keep illustrations clear of copy so every word stays readable.

### Best practices (ours)
- Keep illustrations clear of text; never let a figure cover copy.
- Recolor clothing to your brand palette and keep skin tones varied.
- Use the same pose set and scale across onboarding steps for continuity.
- Crop figures at the frame edge for energy, but keep faces and hands inside it.

### Usage terms at a glance (our summary, not legal advice)
- Commercial use: Yes
- Attribution: Not required (CC0)
- Redistribution: Allowed (CC0)
- How you get it: Figma/Sketch/Studio download, Blush

### Mockups (ours)
Original example screens made by Design Library with Humaaans illustrations (CC0 1.0, https://www.humaaans.com/). Clothing blues (#2B44FF, #1F28CF) swapped to vermilion #D9411E / #A8320F and navy #191847 to ink #16140F; the files are CC0, so editing is allowed.
- phones: https://design-library-byt.pages.dev/full/AV-007-mockup-phones.png · caption: Mockup by Design Library using Humaaans illustrations (CC0 1.0, https://www.humaaans.com/)
- hero: https://design-library-byt.pages.dev/full/AV-007-mockup-hero.png · caption: Mockup by Design Library using Humaaans illustrations (CC0 1.0, https://www.humaaans.com/)

### How to use in onboarding / empty states / success
- Onboarding: use one striding or reaching figure per slide and keep the pose pointing toward the next button, so the motion reads as ‘continue’.
- Empty states: a seated or waiting pose plus one clear action (‘Start exploring’) works better than a busy scene; keep the figure under ~40% of the screen height.
- Success: pair a relaxed, open pose with a check mark in your accent colour; Humaaans are CC0, so recolour clothing to your brand colours freely.
- Mix-and-match bodies, tops and hair to show a varied cast across screens rather than repeating the same person.

## 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: **Centered 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: 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.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
- Industry: Free design assets
- Patterns: Search-first gallery, Centered hero with artwork

Large set of flat SVG illustrations with one customizable accent color. Asset files are not reproduced here because packs may not be redistributed.

### Analysis (ours)
undraw.co (our capture) is calm and centered: a minimal nav (logo, Supporters, More, Illustrations), a two-line headline whose first phrase (‘Open-source illustrations’) is underlined in indigo, a violet ‘Browse now’ button and a ‘Created by Katerina Limpitsouni’ credit. Small flat figures stand on an invisible baseline across the page, then a lavender panel restates the promise: free SVGs ‘without attribution’. The single indigo accent (#6869B2, ESTIMATED) is the same color the illustrations use by default, so the page previews the style. Lesson: one accent color across UI and illustrations makes a set look custom-made; unDraw lets you change that color before download. Pitfall: the headline says open-source, but the unDraw license forbids redistributing packs, replicating unDraw, ML training and building integrations, so read it before bundling files.

### Best practices (ours)
- Set the accent color to your primary brand color before downloading so every illustration matches.
- Download single illustrations as needed; don’t bundle or redistribute packs.
- Use one illustration per empty state or onboarding step, sized consistently.
- Give decorative illustrations empty alt text (alt="") and meaningful ones a short description.

### Usage terms at a glance (our summary, not legal advice)
- Commercial use: Yes
- Attribution: Not required
- Redistribution: Not allowed (no packs, no ML training, no integrations)
- How you get it: Single SVG/PNG downloads

### Mockups (ours)
Original example screens made by Design Library with unDraw illustrations (unDraw License, https://undraw.co/). unDraw’s own accent colour (#6C63FF by default) set to vermilion #D9411E, the same swap the colour picker on undraw.co makes.
- phones: https://design-library-byt.pages.dev/full/AV-008-mockup-phones.png · caption: Mockup by Design Library using unDraw illustrations (unDraw License, https://undraw.co/)
- hero: https://design-library-byt.pages.dev/full/AV-008-mockup-hero.png · caption: Mockup by Design Library using unDraw illustrations (unDraw License, https://undraw.co/)

### How to use in onboarding / empty states / success
- Onboarding: pick illustrations that show the actual task (lists, phones, steps); set unDraw’s colour picker to your primary colour before downloading.
- Empty states: unDraw’s ‘nobody home’ style room scenes read as ‘nothing here yet’; keep the copy short and give one primary action.
- Success: choose a ‘completed steps’ or celebration scene and repeat the same accent in the check icon and button so the screen feels like one system.
- Download single SVGs only; don’t bundle unDraw files into a pack or redistribute them, and keep them out of AI training data.

## 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
- Industry: Free design assets
- Patterns: Search-first gallery, Filter sidebar

Customizable and animatable illustrations in several styles, editable in the browser.

### Analysis (ours)
storyset.com (our capture) is a search-first marketplace: a deep navy hero band with faint stars (#064183, ESTIMATED), a centered headline (‘Awesome free customizable illustrations for your next project’), a subline and a large white search field, with category links (Business, Education, Medical, Technology, People, Multi-purpose) in the nav. Below, a left filter sidebar offers Styles (Rafiki, Bro, Amico, Pana, Cuate, each with a thumbnail), a Change color control and Background options, beside a grid of square white cards and a Recent / Popular toggle. Lesson: naming styles and showing a thumbnail for each lets users stay within one consistent style. Pitfall: free use requires a visible credit line with a link to Storyset; teams that forget it break the license.

### Best practices (ours)
- Pick one Storyset style (e.g. Rafiki or Bro) and stay with it across the product.
- Add the credit ‘Illustrations by Storyset’ with a link wherever the illustrations appear, unless you have a Flaticon Premium subscription.
- Use the color control to match your primary color before export.
- Don’t redistribute the files; download each illustration from the source.

### Usage terms at a glance (our summary, not legal advice)
- Commercial use: Yes with credit (or Flaticon Premium)
- Attribution: Required: visible ‘Storyset’ credit with link
- Redistribution: Not allowed
- How you get it: Web editor, SVG/PNG/animated export, Figma plugin

### Mockups
No Storyset mockups. Storyset’s Terms of Use (storyset.com/terms, February 2022) forbid getting content by robots, programs or any non-ordinary method (s.2), and forbid including Storyset content or derivatives in a library or collection for distribution (s.6.3). This site is a design library with downloadable zips, and our builds are scripted, so we don’t include Storyset art. Using it in your own product is fine with the credit ‘Illustrations by Storyset’ linking to https://storyset.com.

## 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: Bold color accent · 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
- Industry: Design tools
- Patterns: Mix-and-match builder, Split hero with artwork, In-context product preview

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

### Analysis (ours)
blush.design (our capture) demonstrates customization in the hero itself: a large flat-color character (bold pink, blue and yellow) on white with a floating picker of alternative heads, a dashed selection box and a cursor mid-click, beside a bold geometric sans headline (‘Tell your story with illustrations’), a one-line subline, a black ‘Create Random’ button with a shuffle icon and an outlined ‘Install Plugin’ dropdown with design-tool icons. The header holds the illustration and artist menus, a wide search field, a blue ‘Try Pro Free’ button and ‘Sign In’. Lesson: showing the editing interaction in the hero explains the product faster than any sentence. Pitfall: some export features are Pro-only, and the license forbids resale, redistribution, merchandising and competing services, so check what your plan allows.

### Best practices (ours)
- Use Blush collections from one artist per product so line weight and color treatment match.
- Customize characters to reflect your users, then save the variants as reusable components.
- Show the core interaction in your own hero when the product is a tool.
- Credit the artist when you can (appreciated, not required) and never resell the exports.

### Usage terms at a glance (our summary, not legal advice)
- Commercial use: Yes
- Attribution: Appreciated, not required
- Redistribution: Not allowed (no resale, merch or competing service)
- How you get it: Web editor, Figma/Sketch plugin; some features Pro

### Mockups
No Blush mockups. Blush’s license forbids redistribution and competing services, and exports go through the Blush app. Two of its CC0 collections are covered instead: see the Humaaans (AV-007) and Open Peeps (AV-006) mockups, built from those sets’ own official downloads.

## 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: 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://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
- Industry: Productivity / Devtools
- Patterns: Onboarding wizard, Integrations step

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.

### Best practices (ours)
- Keep each onboarding step to one decision (profile, invite, one integration) and show progress dots so people know how much is left.
- Put Skip on every optional step; integrations like GitHub and Slack should never block reaching the product.
- Seed the first screen with sample work (Linear pre-fills four starter issues) so the workspace is never an empty state.
- Switch to a focused, distraction-free layout (Linear’s dark split screen) during setup, then hand off to the real app.
- Ask for the lightest possible input first (a workspace name) and defer everything else until people have seen value.

## 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
- Industry: SaaS
- Patterns: Onboarding wizard, Use-case survey

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.

### Best practices (ours)
- Branch early on the one question that changes everything (join an invited workspace or create your own).
- Reuse a single visual template for all setup questions (Notion: same band, illustration, progress bar, full-width button) so each step feels quick.
- Use big tappable choice cards for use-case questions and keep optional offers (like an expert session) skippable.
- Land people on a page that teaches by doing: Notion’s Welcome checklist teaches the block editor while it orients them.
- Keep the question count low; every answer should visibly change what people see next.

## 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.
- Industry: AI tooling
- Patterns: Guide / checklist

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.

### Best practices (ours)
- Derive visual choices from the subject (its materials, era, audience) before opening a component library.
- Write a small token plan (palette, type pair, spacing, one signature detail) and review it before writing code.
- Audit the plan against common ‘AI look’ tells (purple gradients, generic glassmorphism, centered hero + three cards) and replace any you find.
- Spend boldness in one place, such as a type choice or one illustration style, and keep everything else quiet.
- Keep an accessibility floor (contrast, focus states, target sizes) that never gets announced as a feature but is always met.
- Treat copy as design content: plain, specific labels beat filler marketing lines.

## 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