Bun — Design System

Colors

Primary

cream#FBF0DFPage (light)

ink#14151APage (dark)

bun-coral#FF6164Brand accent, buttons

Surfaces

cream-2#FBF6EACards (light)

cream-3#F6DECEFills, hover

ink-2#1C1D24Raised (dark)

ink-3#24252EFill / border (dark)

dracula-bg#282A36Terminal, code

border#EAD9BEDividers (light)

Text

text#14151APrimary ink

text-2#374151gray-700

text-3#6B7280gray-500, muted

text-invert#F9FAFBOn ink (dark)

Semantic (traffic-light + pink)

green#28C840Success

yellow#FEBC2EWarning

red#FF5F57Error

pink#F472B6Secondary accent

Typography · system-ui (native) · JetBrains Mono

display

800 · −0.035em

Bun is a fast toolkit

42px800

h2

700 · −0.02em

A complete toolkit for building JavaScript apps

28px700

h3

600

Bun aims for 100% Node.js compatibility

21px600

body

400

Develop, test, run, and bundle JavaScript & TypeScript projects — all with Bun.

16px400

command

JetBrains Mono · 500

$ bun install

14pxmono

code

JetBrains Mono · 400

Bun.serve({ port: 3000, fetch: req => new Response("Bun!") })

12pxmono

Benchmarks · Bun is fast

Speed comparison

~/my-app — bun

# install every dependency in one shot $ bun install

Components

Buttons

Install command & tags

$curl -fsSL https://bun.sh/install | bashcopy

runtime bundler test runner package manager

Spacing

space-1

4px

space-2

8px

space-3

12px

space-4

16px

space-6

24px

space-8

32px

space-12

48px

Guardrails

DO

Anchor the light UI on cream #FBF0DF — the warm canvas is the brand, not white

Keep the mascot full-color with its fixed cream / blush / coral / red palette

Use JetBrains Mono for every command, metric and terminal line; system-ui for the rest

Style terminals and code with the Dracula palette on #282A36

Show real commands (bun install, bun run, bunx) and lead with speed

DON'T

Use pure white as the light page — it loses the cream identity

Recolor or flatten the mascot, or drop its blush/mouth colors

Add a bespoke display font — Bun is system-native by design

Use #000 for text on the dark surface — flip to #F9FAFB

Fabricate benchmark numbers — use Bun's published relative speeds, deterministically

Bun is a fast JavaScript all-in-one toolkit