Skip to content

Bun Design System

Bun's charcoal #282a36 canvas, one hot-pink #f472b6 accent, system-ui interface type and JetBrains Mono code. 20 components for React and AI tools.

Get ProDownload DESIGN.md
Primary color
#f472b6
Typeface
system-ui
Shape
Sharp
Base radius
4px
Colors
20
Type tokens
10
Components
20
Spacing values
7

About Bun DESIGN.md

Curated by Dov Azencot, updated May 14, 2026. Source bun.sh (opens in a new tab).

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.

What makes it distinct

5 highlights

  1. Primary pink #f472b6Appears only on the main call‑to‑action button, the hero wordmark, and the navigation pill, never elsewhere.
  2. Ink #9ca3afServes as the default text color across headings, paragraphs and UI labels, providing high contrast on the dark canvas.
  3. Hairline #ffffffDefines every border, from input outlines to card dividers, keeping the visual language crisp without adding visual weight.
  4. Muted #e5e7ebUsed for secondary copy, code comments and subtle UI hints, ensuring a gentle hierarchy beneath the primary ink.
  5. Surface‑1 #14151aThe deepest background layer for modals and footers, creating a sense of depth without breaking the dark theme.

Live at bun.sh

Bun in production, as captured. Scroll the window to see the whole page.

Visit bun.sh (opens in a new tab)
Bun's website at bun.sh

20 colors

Bun's system runs on #f472b6 as its primary voltage, used in 4 of 20 components. Type is set in system-ui across 10 tokens from 12px to 18px, weights 400–600. Shape language is sharp — components average 0px corner radius, favoring crisp rectangles.

Brand & Accent

Sparing, CTA-only voltage · 8

Surface

Page and card backgrounds · 5

Text

Headlines, body, captions · 2

Borders & Hairlines

Dividers, outlines, rules · 1

Other

Specialty colors · 4

10 type tokens

Set in system-ui across 10 tokens, from 12px to 18px, weights 400–600. Shown in its own stack: where the font isn't installed, the fallback the file names stands in.

  • body-sm14px · weight 400 · lh 20pxThe quick brown fox jumps over the lazy dog
  • body-md16px · weight 600 · lh 24pxThe quick brown fox jumps over the lazy dog
  • code-sm14px · weight 400 · lh 22.4pxThe quick brown fox jumps over the lazy dog
  • code-md16px · weight 400 · lh 24pxThe quick brown fox jumps over the lazy dog
  • heading-lg18px · weight 600 · lh 28pxThe quick brown fox jumps over the lazy dog
  • heading-xl18px · weight 400 · lh 32pxThe quick brown fox jumps over the lazy dog
  • caption14px · weight 500 · lh 20pxThe quick brown fox jumps over the lazy dog
  • subheading16px · weight 500 · lh 24pxThe quick brown fox jumps over the lazy dog
  • code-xs12px · weight 400 · lh 16pxThe quick brown fox jumps over the lazy dog
  • code-sm213px · weight 400 · lh 20pxThe quick brown fox jumps over the lazy dog

Radii and spacing

4 corner radii and 7 spacing values. Shape language: sharp, on a 4px base radius.

Radii4

  • full9999px
  • lg8px
  • md4px
  • sm6px

Spacing7

  • 00px
  • xs4px
  • sm8px
  • md12px
  • lg16px
  • xl24px
  • xxl32px

20 components

Each rendered from its tokens (color, type, radius, padding) on Bun's own canvas.

  • Primary Button
    Primary Buttonprimary-button
  • Nav Link
    Nav Linknav-link
  • Hero Heading
    Hero Headinghero-heading
  • Section Title
    Section Titlesection-title
  • Body Text
    Body Textbody-text
  • Badge
    Badgebadge
  • Pill
    Pillpill
  • Code Block
    Code Blockcode-block
  • Input
    Inputinput
  • Card
    Cardcard
  • Modal
    Modalmodal
  • Tooltip
    Tooltiptooltip
  • Footer
    Footerfooter
  • Header
    Headerheader
  • Sidebar
    Sidebarsidebar
  • Alert Success
    Alert Successalert-success
  • Alert Error
    Alert Erroralert-error
  • Alert Info
    Alert Infoalert-info
  • Badge Pink
    Badge Pinkbadge-pink
  • Badge Purple
    Badge Purplebadge-purple

The system, in use

Bun's tokens on the kind of product it builds.

Marketing heroThe homepage: its nav, a headline and the main call to action.
Bun
Get started

Plan, build and ship in one place

Bring your team's work together, from the first idea to the final release.

Get startedBook a demo
BunA
Active users12,489
Projects342
Tasks done8,921
Avg. response1.8h
ActivityLast 30 days

Bun design system FAQ

Bun's tokens, its components and how to use this DESIGN.md in your project.

What are the color tokens in the Bun DESIGN.md?

Bun's DESIGN.md has 20 color tokens: primary (#f472b6), ink (#9ca3af), canvas (#282a36), hairline (#ffffff), muted (#e5e7eb), surface-1 (#14151a) and 14 more. Every value is a quoted hex you can copy.

What is Bun's primary color hex code?

The color token `primary` is #f472b6, used by 4 components. The surface behind it is `canvas` (#282a36).

How do I use Bun's colors in Tailwind CSS?

Map the tokens to your CSS variables: `primary` (#f472b6) to `--primary`, `canvas` (#282a36) to `--background`, `ink` (#9ca3af) to `--foreground`. shadcn/ui's Tailwind setup maps them to classes such as `bg-primary` and `text-foreground`, so they then use Bun's palette.

Which colors dominate Bun’s UI and where are they applied?

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.

Related reading

Specs, directories and component libraries that pair with this design system.

Use Bun in your project

One machine-readable file. Drop it into Claude Code, Cursor, VS Code or any AI tool that reads DESIGN.md.

Download DESIGN.md

  1. Download the DESIGN.md

    One machine-readable file: every color, type, radius, spacing, and component token of Bun.

  2. Feed it to your AI tool

    Drop it into Claude, Cursor, or GitHub Copilot. The agent writes React components and Tailwind classes that match Bun's visual language.

  3. Reference the tokens directly

    Or paste the values into your Tailwind config, CSS variables, or component library: every color, size and radius is a quoted, ready-to-copy value.

Read the full DESIGN.md overview, rationale, do’s and don’ts

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.

More systems like this

Adobe, Boursorama, Canva and 23 more in Design & Creative Tools: each brand's colors, type and components in one file your AI agent builds from.

All 27 in Design & Creative Tools

Build it with Pro

The DESIGN.md files are free. Pro adds 6,000+ blocks, premium templates and the MCP server, so your AI editor builds in your system for you.

See full pricing

4.9/5 out of 5 · 150+ reviewsfrom 150+ founders and developers.

  • Secure checkout via Stripe
  • Code lives in your repo
  • Keep what you've shipped if you cancel
  • License terms

4.9 out of 5 from 150+ developers

Your system, built for you

Every block, template and icon, installed by your AI agent in your design system. The DESIGN.md files stay free.

Get Pro
  • Cancel anytime
  • Keep what you've shipped