--- version: alpha name: Bun description: A dark-header JavaScript toolkit that pairs a cream bun mascot with a single hot-pink accent, heavy system-ui weights, and JetBrains Mono code blocks — fast, playful, and unapologetically developer-direct. colors: # Surface / canvas background: "#ffffff" # main content canvas surface: "#f9fafb" # alternate light section tints surface-code: "#282a36" # dark code block / terminal shell surface-dark: "#14151a" # nav bar, header, footer # Ink / text ink: "#111111" # near-black headings and body ink-secondary: "#4b5563" # supporting copy, descriptions ink-muted: "#9ca3af" # captions, placeholders, muted labels on-dark: "#ffffff" # text on dark nav and code surfaces # Brand accent — the Bun hot pink primary: "#f472b6" # CTAs, version badge, key accent primary-deep: "#ec4899" # primary hover/pressed — deeper pink on-primary: "#ffffff" # white text on the pink button primary-soft: "#fce7f3" # pale pink tint for badge fills and highlights # Mascot palette (the bun character) mascot-body: "#fbf0df" # warm cream — the bun mascot body fill mascot-shadow: "#f6dece" # the bun's underside warm shadow # Semantic success: "#4ade80" # green — passing benchmark bar error: "#f87171" # red — failing benchmark bar warning: "#fbbf24" # amber — caution states # Borders border: "#e5e7eb" # hairline card / section dividers border-strong: "#d1d5db" # stronger dividers, input borders # Shadow tint shadow-soft: "#d9d9d9" # was #00000026 (alpha) — flattened rgba(0,0,0,0.15) over white typography: display-hero: fontFamily: "system-ui, -apple-system, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif" fontSize: 72px fontWeight: 800 lineHeight: 1.0 letterSpacing: -1px display: fontFamily: "system-ui, -apple-system, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif" fontSize: 60px fontWeight: 800 lineHeight: 1.0 letterSpacing: -0.5px heading: fontFamily: "system-ui, -apple-system, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif" fontSize: 36px fontWeight: 700 lineHeight: 1.11 letterSpacing: -0.3px heading-sub: fontFamily: "system-ui, -apple-system, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif" fontSize: 24px fontWeight: 700 lineHeight: 1.33 letterSpacing: 0px body-large: fontFamily: "system-ui, -apple-system, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif" fontSize: 20px fontWeight: 400 lineHeight: 1.63 letterSpacing: 0px body: fontFamily: "system-ui, -apple-system, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0px nav-link: fontFamily: "system-ui, -apple-system, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif" fontSize: 16px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0px button-ui: fontFamily: "system-ui, -apple-system, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif" fontSize: 16px fontWeight: 600 lineHeight: 1.2 letterSpacing: 0px label: fontFamily: "system-ui, -apple-system, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 1.43 letterSpacing: 0.7px caption: fontFamily: "system-ui, -apple-system, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.43 letterSpacing: 0px code-mono: fontFamily: "'JetBrains Mono', 'Fira Code', Hack, 'Source Code Pro', 'SF Mono', Inconsolata, monospace" fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0px code-small: fontFamily: "'JetBrains Mono', 'Fira Code', Hack, 'Source Code Pro', 'SF Mono', Inconsolata, monospace" fontSize: 14px fontWeight: 400 lineHeight: 1.43 letterSpacing: 0px spacing: xs: 4px sm: 8px md: 16px lg: 24px xl: 32px 2xl: 48px 3xl: 64px 4xl: 128px rounded: sm: 4px md: 6px lg: 8px xl: 12px pill: 9999px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.md}" padding: 8px 16px button-primary-hover: backgroundColor: "{colors.primary-deep}" textColor: "{colors.on-primary}" button-secondary: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.button-ui}" rounded: "{rounded.md}" padding: 8px 16px button-secondary-hover: backgroundColor: "#1f2028" textColor: "{colors.on-dark}" button-ghost: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.md}" padding: 8px 16px button-ghost-hover: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" card: backgroundColor: "{colors.background}" textColor: "{colors.ink}" rounded: "{rounded.lg}" padding: 24px card-dark: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" rounded: "{rounded.lg}" padding: 24px input: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.md}" padding: 8px 12px input-focus: backgroundColor: "{colors.background}" textColor: "{colors.ink}" nav-bar: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.nav-link}" padding: 12px 24px tab: backgroundColor: "{colors.surface-code}" textColor: "{colors.on-dark}" typography: "{typography.caption}" rounded: "{rounded.sm}" padding: 4px 12px tab-active: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" badge-version: backgroundColor: "{colors.primary-soft}" textColor: "{colors.primary-deep}" typography: "{typography.caption}" rounded: "{rounded.pill}" padding: 2px 10px code-block: backgroundColor: "{colors.surface-code}" textColor: "{colors.on-dark}" typography: "{typography.code-mono}" rounded: "{rounded.lg}" padding: 16px 20px benchmark-bar-pass: backgroundColor: "{colors.success}" rounded: "{rounded.sm}" padding: 4px 0px benchmark-bar-fail: backgroundColor: "{colors.error}" rounded: "{rounded.sm}" padding: 4px 0px --- # Bun Design System ## Overview Bun's homepage is a declaration of speed delivered without apology. The design leads with a dark near-black navigation bar (`{colors.surface-dark}`) against an otherwise white content canvas (`{colors.background}`), an architectural decision that immediately signals terminal-adjacent sensibility — this is a tool built for engineers who live in dark shells. But where many dev-tool sites resolve that tension into pure austerity, Bun punctures it with a cream-colored bun mascot straight from the top of a browser and a single, unmissable hot-pink brand accent (`{colors.primary}`). The contrast is deliberate: the mascot and the pink together say "fast doesn't have to be serious." The typography is system-ui pushed to extremes. Headings sit at weight 800 with negative tracking at large sizes, making the benchmark numbers — the real hero of the page — read like sports scoreboards rather than documentation metrics. `JetBrains Mono` (`{typography.code-mono}`) carries every install command and code snippet, shown inside a Dracula-palette dark shell (`{colors.surface-code}`, a deep charcoal blue). The install string `curl -fsSL https://bun.sh/install | bash` is treated as a hero artifact: framed, copyable, centered, with OS selector tabs above it. The message is that installation is the product demo. What makes Bun's aesthetic immediately recognizable is the benchmark visualization: horizontal bars in green and red (`{colors.success}`, `{colors.error}`) on a dark background, showing Bun against Node.js and Deno. This isn't just a chart — it's the brand's central argument rendered as an infographic. The bars are short for competitors, long for Bun, and the visual imbalance is the point. Combined with the hot-pink version badge (`{colors.primary-soft}` fill, `{colors.primary-deep}` text) and the fully-rounded tab selectors for OS or framework choice, the system lands as playful-precision: technically exact, visually confident, and light enough to smile at. **Key Characteristics:** - Dark near-black nav/header (`{colors.surface-dark}`) against a white content canvas (`{colors.background}`) — dual-mode contrast without committing to full dark mode - Single hot-pink accent (`{colors.primary}`) owns all primary CTAs, version badges, and key interactive highlights - System-ui at weight 800 with negative tracking for hero headlines — benchmark numbers as scoreboard typography - **JetBrains Mono** (`{typography.code-mono}`) for all code, install strings, and terminal snippets on a Dracula-palette dark shell (`{colors.surface-code}`) - Cream bun mascot (`{colors.mascot-body}`) provides personality and brand warmth against the technical dark header - Benchmark bar chart (green/red horizontal bars on dark) is the visual identity core — speed as an infographic - OS/framework selector tabs with pink active state — the install command is the hero moment - Version badge as a pill (`{rounded.pill}`) in pale pink, never dark or monochrome - `4px–8px` radius for most UI elements; pills reserved for badges, version numbers, and tab selectors - Generous use of 128px whitespace at section breaks — the speed brand breathes - Dracula-adjacent code theme (`{colors.surface-code}` dark charcoal, white text) for all terminal/code surfaces ## Colors ### Surface & Canvas - **White** (`{colors.background}`): The main content canvas. Everything non-nav sits on pure white. - **Light Gray** (`{colors.surface}`): Alternate section tints — a barely-visible cool step from white for separation without dividers. - **Code Shell** (`{colors.surface-code}`): The Dracula-palette dark charcoal for all terminal and code surfaces. - **Near-Black** (`{colors.surface-dark}`): The nav bar, header, and footer — creates the dual-mode framing the site is known for. ### Ink / Text - **Near-Black** (`{colors.ink}`): Headings and body copy. High-contrast on white. - **Slate** (`{colors.ink-secondary}`): Supporting paragraph text and descriptions. - **Muted Gray** (`{colors.ink-muted}`): Captions, metadata, and input placeholders. - **White** (`{colors.on-dark}`): All text rendered on dark nav, code blocks, and footer. ### Brand Accent - **Bun Pink** (`{colors.primary}`): The signature accent. Primary CTAs, active tab states, version badge text. Owned fully by primary actions. - **Pink Deep** (`{colors.primary-deep}`): Hover and pressed state — a darker, richer pink. - **On Primary** (`{colors.on-primary}`): White text on the pink button. - **Pink Soft** (`{colors.primary-soft}`): The pale tint fill for version badges and highlight chips. ### Mascot Palette - **Cream** (`{colors.mascot-body}`): The bun character's body — also the PWA manifest theme color. Warm, friendly, analogous to bread. - **Warm Shadow** (`{colors.mascot-shadow}`): The bun's underside shadow tint — a gentle peach. ### Semantic - **Green** (`{colors.success}`): Benchmark bars where Bun wins. Passes, healthy states. - **Red** (`{colors.error}`): Benchmark bars where competitors trail. Errors, failures. - **Amber** (`{colors.warning}`): Caution states and warning contexts. ### Borders & Shadows - **Hairline** (`{colors.border}`): Card edges and section dividers. - **Strong** (`{colors.border-strong}`): Input borders and more visible structural lines. - **Shadow Soft** (`{colors.shadow-soft}`): Subtle ambient drop — originally rgba(0,0,0,0.15), approximated to opaque per Google format. ## Typography ### Font Families - **Primary**: `system-ui` — the brand's pragmatic, fast choice. No web font to download. Renders as the OS native sans (SF Pro on Mac, Segoe UI on Windows, Roboto on Android). Heavy weights (700, 800) used aggressively for headlines. - **Monospace**: `JetBrains Mono` — the developer-beloved ligature-rich monospace, with `Fira Code`, `Hack`, `Source Code Pro`, `SF Mono`, `Inconsolata` as fallbacks. Used for all code, install strings, and terminal surfaces. - **OpenType Features**: `kern` feature-setting present throughout. ### Hierarchy The full type scale lives in the `typography:` token block above. Reference tokens directly. | Token | Use | |---|---| | `display-hero` | 72px / system-ui 800 — the marquee benchmark number or hero headline | | `display` | 60px / system-ui 800 — large section titles | | `heading` | 36px / system-ui 700 — feature headings and section leads | | `heading-sub` | 24px / system-ui 700 — sub-section headings | | `body-large` | 20px / system-ui 400 — lead paragraphs | | `body` | 16px / system-ui 400 — standard body | | `nav-link` | 16px / system-ui 500 — navigation and inline links | | `button-ui` | 16px / system-ui 600 — button labels | | `label` | 14px / system-ui 500 — 0.7px tracking, uppercase variants for section labels | | `caption` | 14px / system-ui 400 — metadata, tab labels, helper text | | `code-mono` | 16px / JetBrains Mono 400 — install commands and code surfaces | | `code-small` | 14px / JetBrains Mono 400 — inline code and dense code blocks | ### Principles - **System-ui at extremes**: the font is "free" (no load penalty), so the brand compensates with aggressive weight. 800 for anything that competes with a benchmark number. - **Monospace as identity**: JetBrains Mono isn't a fallback — it's the developer-credentials moment. Every install string and code block is a micro-brand statement. - **Kerning on**: `font-feature-settings: "kern"` is set universally — at 800 weight and negative tracking, kerning is non-negotiable. ## Layout ### Spacing System The full scale is in the `spacing:` token block above. Base unit: 8px. Most frequent values on the live site are 4, 8, 12, 16, 24px for component internals, and 128px for major section separation (`{spacing.4xl}`). The generous 128px gaps between the hero, the benchmark, and the install sections reinforce the speed narrative — fast content that makes room to breathe. ### Grid & Container - Max content width: ~1280px, centered - Common layout: full-width dark header → white hero (headline + mascot illustration + CTA row) → benchmark visualization (dark card, horizontal bars) → install command (dark shell, centered, OS tabs) → framework grid (card matrix showing React/Postgres/others) - The benchmark visualization runs near-full-width inside a dark card to maximize visual impact ### Whitespace Philosophy - **Confident and open**: 128px section breathing is a performance statement — Bun can afford the whitespace because the content lands fast - **Left-aligned within containers**: text blocks rarely center; alignment is journalistic - **Dark card breaks**: the dark benchmark card (`{colors.surface-dark}`) is the only section-level dark surface; it functions as a visual full stop ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | No shadow, `{colors.border}` hairline only | Most page content, nav | | Hairline (Level 1) | `1px solid {colors.border}` | Card edges, input borders | | Soft Drop (Level 2) | `0 4px 6px -1px` rgba(0,0,0,0.1) (`{colors.shadow-soft}`) | Floating cards, feature panels | | Dark Inset (Level 3) | Surface color swap to `{colors.surface-dark}` | The benchmark card — depth via contrast, not shadow | | Focus Ring | `0 0 0 3px {colors.primary-soft}` | Input focus, interactive focus states | **Shadow Philosophy**: Bun's elevation system is almost entirely flat. Most depth is communicated by the stark nav/header vs. white canvas contrast and by the benchmark dark card's background swap. Drop shadows appear only for modals and floating UI elements. The system reads as "no-nonsense" — a runtime that doesn't need decorative depth. ## Shapes The full radius scale is in the `rounded:` token block above. | Token | Value | Use | |---|---|---| | `sm` | 4px | Code inline elements, kbd keys, small chips | | `md` | 6px | Buttons, inputs, dialogs | | `lg` | 8px | Cards, code blocks, containers | | `xl` | 12px | Larger panels, dropdown menus | | `pill` | 9999px | Version badges, OS selector tabs, framework tags | The system makes a clear distinction: UI controls (buttons, inputs) use `md`/`lg` for precision and credibility; labels, badges, and selectors go full pill for friendliness. The bun mascot itself is all curves — the pill badges echo that geometry. ## Components The complete component spec lives in the `components:` token block above. ### Buttons - **`button-primary`** — Hot pink (`{colors.primary}`) fill, white text, `{rounded.md}`. The primary CTA (e.g. "Get Started", "Install"). Hover deepens to `{colors.primary-deep}`. - **`button-secondary`** — Dark fill (`{colors.surface-dark}`), white text, `{rounded.md}`. Secondary actions and navigation-adjacent buttons. - **`button-ghost`** — White fill, near-black text, hairline border. Tertiary/inline actions. ### Cards - **`card`** — White fill, hairline border, 8px radius. Feature cards, framework integration grid cells. - **`card-dark`** — Near-black fill (`{colors.surface-dark}`), white text. The benchmark visualization container. ### Inputs & Code - **`input`** — White fill, `{colors.border-strong}` border, `{rounded.md}`. Standard form inputs. - **`code-block`** — Dark charcoal (`{colors.surface-code}`), JetBrains Mono, `{rounded.lg}`. All terminal/install command surfaces. The hero install command gets extra horizontal centering and OS-tab chrome above it. ### Navigation - **`nav-bar`** — Near-black (`{colors.surface-dark}`), white links, `{typography.nav-link}`. Sticky. Contains the bun logo mark, nav links, and a "Docs" CTA. Below the nav bar on the home page is the version badge. ### Tabs & Badges - **`tab`** — Dark code-shell background, white text, `{rounded.sm}`. OS selector tabs (Linux, macOS, Windows) above the install command. Active state swaps to `{colors.primary}` fill. - **`badge-version`** — Pale pink fill (`{colors.primary-soft}`), deep pink text (`{colors.primary-deep}`), fully pill. Shows the current version string (e.g. "v1.2.14 →"). ### Benchmark Bars - **`benchmark-bar-pass`** / **`benchmark-bar-fail`** — Horizontal green/red bars inside the dark benchmark card. Width encodes relative speed. The most distinctive visual element of the brand. ## Do's and Don'ts ### Do - Keep the main content canvas white (`{colors.background}`) — the dark nav is the frame, not the canvas - Use hot pink (`{colors.primary}`) only for primary CTAs, active states, and version badges — it's the one accent - Show code in JetBrains Mono on a dark charcoal shell (`{colors.surface-code}`) — never inline monospace on white for install commands - Make version badges fully pill (`{rounded.pill}`) in pale pink fill with deep pink text - Use weight 800 for hero numbers and headlines — the benchmark numbers must read as scoreboards - Place the benchmark visualization in a `{colors.surface-dark}` card to maximize green/red bar contrast - Use 128px section gaps (`{spacing.4xl}`) between the major page sections — the whitespace is part of the speed story - Respect the Dracula-adjacent shell palette (`{colors.surface-code}`) for any terminal-context surfaces ### Don't - Don't put the hot pink on large background areas — it's a stamp, not a canvas - Don't use generic web fonts or webfont loading for headlines — system-ui at 800 is the identity - Don't round buttons or cards to pill — `{rounded.md}` (6px) is the correct CTA radius; pills belong to badges and tags only - Don't replace the benchmark bar chart with abstract icons or graphics — the chart is the brand argument - Don't use the mascot without the dark nav contrast — the cream `{colors.mascot-body}` only pops against near-black - Don't soften the typography with 400/500 weights for headlines — under-weight headings undermine the speed signal - Don't center body text — Bun's copy is left-aligned, journalistic, not decorative - Don't add multiple accent colors — the system has one accent. Pink. No exceptions. --- ## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |---|---|---| | Mobile | <640px | Single column; hero headline scales ~72px → ~36px; benchmark bars stack vertically; nav collapses to hamburger | | Tablet | 640–1023px | Two-column layouts begin; framework grid goes 2-column; benchmark visible in full | | Desktop | 1024–1279px | Full composition; benchmark card spans wide; copy-left / mascot-right hero | | Large | ≥1280px | ~1280px max container centered; generous 128px section gaps | ### Touch Targets - Primary buttons run ~40px height with 8px 16px padding — comfortable for thumbs - OS tab selectors are pill-shaped with adequate height; active pink state is visually unambiguous on touch ### Collapsing Strategy - **Navigation**: horizontal nav → hamburger/menu toggle on mobile; version badge persists below - **Hero**: headline and CTA stack vertically; mascot illustration scales down and may stack below copy - **Benchmark card**: horizontal bars → may convert to vertical stacked bars on narrow viewports; dark card maintains full width - **Framework grid**: 4-column → 2-column → 1-column on progressively smaller breakpoints - **Typography**: display-hero 72px scales down toward ~36px on mobile; body holds at 16px ### Image Behavior - The bun mascot SVG is vector — it scales without quality loss at any size - Benchmark bar widths are percentage-based — they adapt proportionally to card width --- ## Agent Prompt Guide ### Quick Color Reference - Background: White (`{colors.background}`) - Text: Near-Black (`{colors.ink}`) - Brand accent: Bun Pink (`{colors.primary}`) - Secondary text: Slate (`{colors.ink-secondary}`) - Border: Hairline (`{colors.border}`) - Nav / Header: Near-Black (`{colors.surface-dark}`) - Code surface: Charcoal (`{colors.surface-code}`) - CTA: Pink fill (`{colors.primary}`) with white text (`{colors.on-primary}`) ### Example Component Prompts - "Create a dark nav bar (`{colors.surface-dark}` background, white `{typography.nav-link}` links) with the Bun logo at left and a hot-pink pill version badge (`{colors.primary-soft}` fill, `{colors.primary-deep}` text, `{rounded.pill}`) showing 'v1.2.14 →' directly below the nav" - "Build a hero section on white (`{colors.background}`): 72px near-black headline in system-ui weight 800 with -1px tracking (`{typography.display-hero}`), a slate lead paragraph in 20px weight 400 (`{typography.body-large}`), and a pink primary button (`{colors.primary}`, white text, `{rounded.md}`, 8px 16px padding)" - "Render a benchmark card: `{colors.surface-dark}` background, `{rounded.lg}` radius, 24px padding. Inside, show horizontal bars for Bun (long green `{colors.success}`), Node.js (short red `{colors.error}`), Deno (medium red `{colors.error}`). Bar labels in `{typography.caption}` white. Section heading in `{typography.heading}` white weight 700" - "Create an install command block: `{colors.surface-code}` background, `{rounded.lg}` radius, 20px padding. Above it, OS selector tabs (pill-shaped, dark-fill default, pink-fill active using `{colors.primary}`). Install string `curl -fsSL https://bun.sh/install | bash` in JetBrains Mono 16px white (`{typography.code-mono}`). Copy icon at right edge" - "Build a framework integration card grid (4 columns): each card white fill (`{colors.background}`), `{rounded.lg}` radius, 24px padding, `{colors.border}` hairline border. Card content: framework logo + name in `{typography.heading-sub}` weight 700 + a short descriptor in `{typography.body}` slate `{colors.ink-secondary}`. Active card gains a hot-pink left border (`{colors.primary}`)" - "Design a version badge: `{colors.primary-soft}` background, `{colors.primary-deep}` text, `{typography.caption}`, `{rounded.pill}`, 2px 10px padding. Used inline or below the nav for the current release number" ### Iteration Guide 1. Start on white (`{colors.background}`) — the dark nav is the frame. If you reach for a dark full-page canvas, stop. 2. One accent: hot pink (`{colors.primary}`). CTAs, active states, version badge text. Nothing else gets pink. 3. Headlines are weight 800 system-ui with negative tracking. The benchmark numbers must read as scoreboards — never go under 700. 4. All code goes into JetBrains Mono on `{colors.surface-code}` charcoal. Install strings get OS tabs and a copy button. 5. Benchmark bars use green (`{colors.success}`) and red (`{colors.error}`) on the dark card — width encodes speed. This is the brand's argument; treat it as the primary visual. 6. Radius discipline: 6px for buttons, 8px for cards, pill only for badges and selector tabs. 7. Section gaps of 128px (`{spacing.4xl}`) between hero, benchmark, and install — the whitespace amplifies the speed story. --- ## Attribution Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Bun. Brand names and trademarks belong to their respective owners.