---
version: alpha
name: "Bun"
website: "https://bun.sh"
description: "Bun’s design pairs a deep #282a36 canvas with a hot #f472b6 accent, leans on system‑ui for UI text and JetBrains Mono for code, and treats the primary button as a pink‑on‑dark pill with 8px rounding, while borders stay pure white and muted text lives at #e5e7eb."

seo:
  title: "Bun Design System for React — #f472b6, system-ui, 18 components"
  metaDescription: "The Bun design system uses a charcoal #282a36 canvas, a punchy #f472b6 pink accent, system‑ui for interface typography and JetBrains Mono for code, delivering a focused UI built from 18 ready‑made components."
  highlights:
    - "Primary pink #f472b6 — appears only on the main call‑to‑action button, the hero wordmark, and the navigation pill, never elsewhere."
    - "Ink #9ca3af — serves as the default text color across headings, paragraphs and UI labels, providing high contrast on the dark canvas."
    - "Hairline #ffffff — defines every border, from input outlines to card dividers, keeping the visual language crisp without adding visual weight."
    - "Muted #e5e7eb — used for secondary copy, code comments and subtle UI hints, ensuring a gentle hierarchy beneath the primary ink."
    - "Surface‑1 #14151a — the deepest background layer for modals and footers, creating a sense of depth without breaking the dark theme."
  tags:
    - "Design & Creative Tools"
  lastUpdated: "2026-05-14"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    Bun’s site refuses the usual runtime aesthetic of a dark terminal lit by neon green. The fold opens on a charcoal #282a36 canvas, a flat, almost matte surface that feels more like a night‑sky than a console. A single 44‑pixel tall pill‑shaped button in hot pink #f472b6 dominates the hero, its 8px rounding and white border turning the call‑to‑action into a visual anchor that instantly tells you where to click. No gradient meshes, no illustrative hero graphics – just type, color, and a bold accent that says "this is the tool you run code with."

    The palette is deliberately limited: a single saturated pink for emphasis, a deep charcoal for the main background, and a muted gray scale for supporting text. Where Stripe leans on an indigo gradient and Vercel opts for a matte black with subtle teal highlights, Bun chooses a binary contrast – dark canvas versus bright pink – to signal performance and speed. The brand’s own language talks about “fast all‑in‑one” and the visual restraint mirrors that promise, keeping the user’s eye on the code rather than decorative fluff.

    For a designer or developer feeding this spec into a component library generator, the payoff is immediate. The system tells you exactly which token to use for every UI element – pink only lives on primary actions, white borders never change, and the code font is locked to JetBrains Mono. The one thing worth stealing is the disciplined use of a single accent color as a hierarchy marker; it lets you build a UI that feels fast, focused, and unmistakably Bun without drowning the page in unnecessary hues.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://bun.sh"
      title: "Bun — official site"
      description: "Bun's public marketing site — the source of truth for the live tokens captured in this file."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files — the format this page is built on."
  questions:
    - id: "which-colors-dominate-bun-s-ui-and-where"
      title: "Which colors dominate Bun’s UI and where are they applied?"
      answer: "The visual hierarchy rests on three core colors. The dark canvas #282a36 covers the page background and large sections, establishing a high‑contrast stage. The accent pink #f472b6 is reserved for primary actions – the main \"Build\" button, the hero wordmark, and navigation pills – and never appears in body copy. Text defaults to ink #9ca3af, a medium gray that reads clearly on the dark canvas, while borders stay pure white #ffffff, giving every component a clean edge without adding visual weight."
    - id: "where-does-the-pink-f472b6-appear-in-the"
      title: "Where does the pink #f472b6 appear in the site?"
      answer: "The pink #f472b6 is deliberately scarce. It colors the primary call‑to‑action button on the hero, the wordmark that spells \"Bun\" in the hero section, and the navigation pill that repeats the \"Build\" label. Those three instances are the only places the pink surfaces, making each occurrence a clear signal of interactivity. No background blocks, no hover states, and no decorative icons use the pink, so when a user sees it they instantly know it’s actionable."
    - id: "what-typefaces-does-bun-use-for-ui-text"
      title: "What typefaces does Bun use for UI text versus code snippets?"
      answer: "Bun splits its typographic voice between two families. Interface copy – headings, paragraphs, navigation – uses the system‑ui stack (system-ui, -apple-system, \"Segoe UI\", Roboto, etc.) at sizes ranging from 14px to 18px, with weights from 400 to 600. Code snippets and terminal‑style blocks switch to a monospaced stack (\"JetBrains Mono\", \"Fira Code\", Hack, \"Source Code Pro\", \"SF Mono\", Inconsolata, monospace) at 12px‑16px, preserving the developer‑centric feel. This separation keeps UI text legible while giving code its own visual identity."
    - id: "how-are-border-radii-applied-across-bun"
      title: "How are border radii applied across Bun’s components?"
      answer: "Rounded corners follow a simple scale derived from the radii token set. The most common radius is 8px, used on primary buttons, navigation pills, and cards, giving them a friendly pill shape. Smaller UI elements like input fields and badges use 4px, while the extreme case of fully rounded elements (e.g., avatar circles) uses 9999px. The 6px and 5px values appear only on niche components such as toggle switches, ensuring the system stays consistent without over‑complicating the token list."
    - id: "what-spacing-values-does-bun-employ-for"
      title: "What spacing values does Bun employ for layout and padding?"
      answer: "Bun’s spacing system is built on a base unit of 4px, with multiples that appear as pure values: 4px, 8px, 12px, 16px, 24px, 32px, plus a zero baseline of 0px for edge‑to‑edge elements. These values are used directly for padding, margin and gap properties. For example, the primary button uses 8px vertical and 16px horizontal padding, while card containers adopt 16px padding on all sides. The consistent step‑up pattern keeps the layout grid tight and predictable."

colors:
  primary: "#f472b6"
  ink: "#9ca3af"
  canvas: "#282a36"
  hairline: "#ffffff"
  muted: "#e5e7eb"
  surface-1: "#14151a"
  surface-2: "#3b3f4b"
  surface-3: "#0d0e11"
  surface-4: "#4f5666"
  accent-red: "#ef4444"
  accent-red-light: "#f87171"
  accent-green: "#22c55e"
  accent-green-light: "#4ade80"
  accent-pink-light: "#f9a8d4"
  accent-blue: "#93c5fd"
  accent-purple: "#ff79c6"
  gray-300: "#d1d5db"
  gray-200: "#f3f4f6"
  gray-600: "#6b7280"
  gray-100: "#fbcfe8"

typography:
  body-sm:
    fontFamily: "system-ui, -apple-system, \"system-ui\", \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Open Sans\", \"Helvetica Neue\", sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
  body-md:
    fontFamily: "system-ui, -apple-system, \"system-ui\", \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Open Sans\", \"Helvetica Neue\", sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 24px
  code-sm:
    fontFamily: "\"JetBrains Mono\", \"Fira Code\", Hack, \"Source Code Pro\", \"SF Mono\", Inconsolata, monospace"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 22.4px
  code-md:
    fontFamily: "\"JetBrains Mono\", \"Fira Code\", Hack, \"Source Code Pro\", \"SF Mono\", Inconsolata, monospace"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
  heading-lg:
    fontFamily: "system-ui, -apple-system, \"system-ui\", \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Open Sans\", \"Helvetica Neue\", sans-serif"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 28px
  heading-xl:
    fontFamily: "system-ui, -apple-system, \"system-ui\", \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Open Sans\", \"Helvetica Neue\", sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 32px
  caption:
    fontFamily: "system-ui, -apple-system, \"system-ui\", \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Open Sans\", \"Helvetica Neue\", sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 20px
  subheading:
    fontFamily: "system-ui, -apple-system, \"system-ui\", \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Open Sans\", \"Helvetica Neue\", sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 24px
  code-xs:
    fontFamily: "\"JetBrains Mono\", \"Fira Code\", Hack, \"Source Code Pro\", \"SF Mono\", Inconsolata, monospace"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16px
  code-sm2:
    fontFamily: "\"JetBrains Mono\", \"Fira Code\", Hack, \"Source Code Pro\", \"SF Mono\", Inconsolata, monospace"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 20px

rounded:
  full: "9999px"
  lg: "8px"
  md: "4px"
  sm: "6px"

spacing:
  0: "0px"
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  xxl: "32px"

components:
  primary-button:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.canvas}"
    borderColor: "{colors.hairline}"
    fontFamily: "{typography.body-md.fontFamily}"
    fontSize: "{typography.body-md.fontSize}"
    fontWeight: "{typography.body-md.fontWeight}"
    lineHeight: "{typography.body-md.lineHeight}"
    letterSpacing: "{typography.body-md.letterSpacing}"
    borderRadius: "{rounded.lg}"
    padding: "8px 16px"
    height: "44px"
    width: "auto"
  nav-link:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.canvas}"
    borderColor: "{colors.hairline}"
    fontFamily: "{typography.body-md.fontFamily}"
    fontSize: "{typography.body-md.fontSize}"
    fontWeight: "{typography.body-md.fontWeight}"
    lineHeight: "{typography.body-md.lineHeight}"
    letterSpacing: "{typography.body-md.letterSpacing}"
    borderRadius: "{rounded.lg}"
    padding: "8px 16px"
    height: "44px"
    width: "auto"
  hero-heading:
    textColor: "{colors.hairline}"
    fontFamily: "{typography.heading-xl.fontFamily}"
    fontSize: "72px"
    fontWeight: "800"
    lineHeight: "72px"
    letterSpacing: "normal"
    borderRadius: "0px"
    padding: "0px"
  section-title:
    textColor: "{colors.gray-300}"
    fontFamily: "{typography.heading-lg.fontFamily}"
    fontSize: "24px"
    fontWeight: "500"
    lineHeight: "33px"
    letterSpacing: "normal"
    borderRadius: "0px"
    padding: "0px"
  body-text:
    textColor: "{colors.muted}"
    fontFamily: "{typography.body-md.fontFamily}"
    fontSize: "18px"
    fontWeight: "600"
    lineHeight: "28px"
    letterSpacing: "normal"
    borderRadius: "0px"
    padding: "0px"
  badge:
    backgroundColor: "{colors.accent-red}"
    textColor: "{colors.hairline}"
    borderRadius: "{rounded.md}"
    padding: "4px 8px"
    fontFamily: "{typography.caption.fontFamily}"
    fontSize: "14px"
    fontWeight: "500"
    lineHeight: "20px"
  pill:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.canvas}"
    borderRadius: "{rounded.full}"
    padding: "4px 12px"
    fontFamily: "{typography.body-sm.fontFamily}"
    fontSize: "14px"
    fontWeight: "400"
    lineHeight: "20px"
  code-block:
    backgroundColor: "{colors.surface-2}"
    textColor: "{colors.hairline}"
    borderRadius: "{rounded.sm}"
    padding: "12px"
    fontFamily: "{typography.code-md.fontFamily}"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "24px"
  input:
    backgroundColor: "{colors.surface-1}"
    textColor: "{colors.hairline}"
    borderColor: "{colors.hairline}"
    borderRadius: "{rounded.md}"
    padding: "8px"
    fontFamily: "{typography.body-sm.fontFamily}"
    fontSize: "14px"
    fontWeight: "400"
    lineHeight: "20px"
  card:
    backgroundColor: "{colors.surface-1}"
    textColor: "{colors.hairline}"
    borderRadius: "{rounded.lg}"
    padding: "16px"
    fontFamily: "{typography.body-md.fontFamily}"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "24px"
  modal:
    backgroundColor: "{colors.surface-2}"
    textColor: "{colors.hairline}"
    borderRadius: "{rounded.lg}"
    padding: "24px"
    fontFamily: "{typography.body-md.fontFamily}"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "24px"
  tooltip:
    backgroundColor: "{colors.surface-3}"
    textColor: "{colors.hairline}"
    borderRadius: "{rounded.md}"
    padding: "8px"
    fontFamily: "{typography.caption.fontFamily}"
    fontSize: "14px"
    fontWeight: "500"
    lineHeight: "20px"
  footer:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    borderRadius: "0px"
    padding: "16px"
    fontFamily: "{typography.body-sm.fontFamily}"
    fontSize: "14px"
    fontWeight: "400"
    lineHeight: "20px"
  header:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.canvas}"
    borderRadius: "0px"
    padding: "16px"
    fontFamily: "{typography.heading-lg.fontFamily}"
    fontSize: "24px"
    fontWeight: "500"
    lineHeight: "33px"
  sidebar:
    backgroundColor: "{colors.surface-4}"
    textColor: "{colors.hairline}"
    borderRadius: "0px"
    padding: "16px"
    fontFamily: "{typography.body-sm.fontFamily}"
    fontSize: "14px"
    fontWeight: "400"
    lineHeight: "20px"
  alert-success:
    backgroundColor: "{colors.accent-green}"
    textColor: "{colors.hairline}"
    borderRadius: "{rounded.md}"
    padding: "8px"
    fontFamily: "{typography.caption.fontFamily}"
    fontSize: "14px"
    fontWeight: "500"
    lineHeight: "20px"
  alert-error:
    backgroundColor: "{colors.accent-red}"
    textColor: "{colors.hairline}"
    borderRadius: "{rounded.md}"
    padding: "8px"
    fontFamily: "{typography.caption.fontFamily}"
    fontSize: "14px"
    fontWeight: "500"
    lineHeight: "20px"
  alert-info:
    backgroundColor: "{colors.accent-blue}"
    textColor: "{colors.hairline}"
    borderRadius: "{rounded.md}"
    padding: "8px"
    fontFamily: "{typography.caption.fontFamily}"
    fontSize: "14px"
    fontWeight: "500"
    lineHeight: "20px"
  badge-pink:
    backgroundColor: "{colors.accent-pink-light}"
    textColor: "{colors.canvas}"
    borderRadius: "{rounded.md}"
    padding: "4px 8px"
    fontFamily: "{typography.caption.fontFamily}"
    fontSize: "14px"
    fontWeight: "500"
    lineHeight: "20px"
  badge-purple:
    backgroundColor: "{colors.accent-purple}"
    textColor: "{colors.hairline}"
    borderRadius: "{rounded.md}"
    padding: "4px 8px"
    fontFamily: "{typography.caption.fontFamily}"
    fontSize: "14px"
    fontWeight: "500"
    lineHeight: "20px"

---


## Overview

Bun’s visual language hinges on a single accent that drives hierarchy. **Pink‑pill hierarchy.**

Where most JavaScript runtimes scatter brand colors across headers, footers, and icons, Bun concentrates its pink #f472b6 into a few high‑impact elements, letting the dark canvas dominate the rest of the experience. This restraint creates a clear signal path for users: pink means act now, gray means read, white means separate.

**Key Characteristics:**
- Dark charcoal canvas (#282a36) provides a high‑contrast stage for all content.
- Hot pink accent (#f472b6) appears only on primary actions and the hero wordmark.
- Ink gray (#9ca3af) serves as the default text color, balancing readability and mood.
- Pure white borders (#ffffff) define edges without adding visual weight.
- Muted gray (#e5e7eb) tones down secondary copy and code comments.
- Rounded corners follow a 4‑8‑9999px scale, giving pills a friendly feel.
- Spacing increments of 4px, 8px, 12px, 16px, 24px, 32px keep layout tight.
- System‑ui for UI text, JetBrains Mono for code, preserving developer focus.
- Surface layers (#14151a, #3b3f4b, #0d0e11) create depth for modals and footers.
- Accent reds and greens are reserved for alerts, never for decorative backgrounds.

## Known Gaps

- No explicit dark‑mode toggle; the system assumes a single dark theme, limiting flexibility for light‑mode preferring users.
- Token documentation lacks visual swatches, requiring developers to manually map hex values to UI elements.
- The spacing token list includes composite values in the source data, but the spec only exposes pure values, leaving some original intent undocumented.
- Accessibility contrast for pink on dark background meets WCAG AA but falls short of AAA, which could be a concern for high‑visibility contexts.
- The design system does not expose a dedicated icon set, forcing teams to import external SVGs or font icons.
- No variant definitions for disabled states on buttons; designers must infer styling from existing tokens.