Bun — design system & UI screens

Dev Tools · 1 screen · 12 sections · https://bun.sh/

Light hero with an install code block, bundling benchmark and a used-by logo wall.

This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/bun.

Decoded design system

Bun's decoded design system: background #14151A, text #ECECEE, accent #9CA3AF, link #9CA3AF, primary #F472B6; type scale h1 53.3333px / h2 24px / body 16px; 8px spacing base; 5px base radius. The single interactive/action color is #14151A — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.

Color roles

Role	Value
bg	`#14151A`
surface	`#202126`
border	`#343539`
text	`#ECECEE`
text_muted	`#999A9D`
primary	`#F472B6`
accent	`#9CA3AF`
link	`#9CA3AF`
secondary	`#3B3F4B`
button_bg	`#14151A`
button_text	`#D1D5DB`

Using these colors

Action color #14151A — the single interactive color; only on things you click or must notice, never large fills.
accent, link are all #9CA3AF — one role, not several (the action color).
accent #9CA3AF — accent for emphasis — keep it rare on the page.
primary #F472B6 — a brand color — but the call-to-action uses #14151A, not this.
secondary #3B3F4B — optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two.

Typography

Heading: Roboto
Body: Roboto
Mono: JetBrains Mono
h1: 53.3333px
h2: 24px
body: 16px

Spacing

base unit: 8px
scale: 2px, 3px, 4px, 6px, 8px, 10px, 12px, 15px, 16px, 24px

Radii

base: 5px
button: 5px

Shadows (elevation)

subtle: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(230, 126, 34, 0.05) 0px 10px 15px -3px, rgba(230, 126, 34, 0.05) 0px 4px 6px -4px
card: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(168, 85, 247, 0.05) 0px 10px 15px -3px, rgba(168, 85, 247, 0.05) 0px 4px 6px -4px

Motion

Micro-interactions run at 150ms (dominant) with cubic-bezier(0.4, 0, 0.2, 1).

durations: 150ms · 200ms · 100ms
easings: cubic-bezier(0.4, 0, 0.2, 1) · linear
animated properties: opacity, color, background-color, border-color

Native design tokens

Token	Value
`--black`	`#0b0a08`
`--gray-950`	`#0d0e11`
`--gray-900`	`#14151a`
`--gray-800`	`#282a36`
`--gray-700`	`#3b3f4b`
`--gray-600`	`#4f5666`
`--gray-500`	`#6b7280`
`--gray-400`	`#9ca3af`
`--gray-300`	`#d1d5db`
`--gray-200`	`#e5e7eb`

…and 110 more measured on the page.

Button states (measured)

primary focus: outline 1px auto rgb(16, 16, 16)

Layout (measured)

container max-width: 1280px
nav: 83px
common grid: 2 columns

Motion choreography (measured)

Load order: p.duration-100 → span.blink → g.origin-[50px_50px]×4 → div.flex×3

Scroll reveal: 9 elements rest at opacity 0, translateY(-16px), animate in over 0.15s cubic-bezier(0.4, 0, 0.2, 1).

Responsive (measured)

breakpoints: 640px · 768px · 1024px · 1280px
mobile (390px): hero 37px · nav inline

Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →

Screens

A fast all-in-one JavaScript runtime