Bun — design system & UI screens

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

This is a landing page for an API and backend platform used by developers to build integrations and server-side features. The page follows a single-column scroll layout with alternating content sections: hero statement at top, feature cards in a bento grid pattern with icons and descriptions, comparison charts and tables showing capabilities versus competitors, testimonial sections with imagery, code examples and technical documentation snippets, and footer navigation. The design uses dark background with accent colors (magenta, green, yellow) to highlight key differentiators and call-to-action elements.

Open in Mozaika →

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

Product Landing Page