CURATED · OPEN · FREE

Bun

A fast, all-in-one JavaScript runtime and toolkit.

devtoolsruntime

Bun screenshot

↓ Download design system (26 MB)Open in OpenDesign

Visit: https://bun.sh

📦 Browse pack contents →

01

Identity DNA

PerformanceDeveloper-firstAll-in-oneFastRuntime

A high-performance sports car for JavaScript developers

02

Color

#F472B6Accent

#FFFFFFInk

#E5E7EBInk soft

#0D0E11BG

#282A36BG soft

#9CA3AFMuted

rgba(255,255,255,0.16)Line

High contrast on dark surfaces with a single bold pink accent.

03

Typography

grotesque-sans · system-sans · monospace

display56px · 700
body16px · 400
caption14px · 500
mono16px · 400

Use system-ui for body text for performance and native feel. · Use JetBrains Mono or similar for code blocks to ensure legibility. · Keep line-heights tight for display text to maintain a dense, modern feel.

04

Spacing

4px

8px

12px

16px

24px

32px

48px

64px

96px

A strict 4px-based grid system ensuring consistent vertical and horizontal rhythm.

05

Surfaces

sm · 4px

md · 8px

lg · 12px

pill · 999px

Subtle white borders (0.16 opacity) to define dark card edges.

rgba(0, 0, 0, 0.25) 0px 25px 50px -12px · rgba(131, 24, 67, 0.1) 0px 10px 15px -3px

06

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

A standard 12-column responsive grid with a centered max-width container.

07

Motion & Interaction

150msmicro

200mssmall

400msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

Smooth color and background transitions on hover. · Subtle opacity changes for interactive feedback.

Subtle background color shifts and text color changes. · Immediate visual response with minimal delay.

08

Components

button High-contrast pill-shaped buttons with bold background colors.
card Dark surfaces with subtle borders and soft rounded corners.
chip Small pill-shaped tags for categories and filters.
input Dark input fields with subtle borders and monospace text for commands.
hero A full-width dark section featuring a massive bold headline and a primary call-to-action.

09

Voice & Don'ts

Tone Confident, technical, and direct.
Headlines Bold, impactful, and often using a single word highlight in pink.
CTAs Clear, action-oriented, and visually prominent.

Don't use light backgrounds — the screenshot shows a deep dark theme (#0D0E11) as the primary surface.
Don't use serif fonts for headings — the screenshot uses a bold grotesque-sans for display text.
Don't use more than one accent color — the screenshot shows a single dominant pink (#F472B6) for emphasis.
Don't use large border radii on everything — the screenshot uses small (4-8px) or full pill (999px) radii.
Don't use complex shadows — the screenshot uses subtle, dark shadows primarily for depth.
Don't use thin, elegant typography — the screenshot shows bold, weighty headings and clear body text.
Avoid: Avoid verbose or flowery language.
Avoid: Avoid unnecessary decorative elements.
Avoid: Avoid overly complex layouts that distract from the core technical value.

10

Inside the pack — real screenshots

Bun — 桌面首屏（hero） — 桌面首屏（hero）

Bun — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Bun — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Bun — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Bun — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Bun — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Bun — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Bun — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Bun — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Bun — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Bun — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Bun — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Bun — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Bun — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Bun — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Bun — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Bun — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Bun — 移动首屏 — 移动首屏

Captured from the live site · real computed styles

11

System prompt

Bun is a high-performance JavaScript runtime and toolkit, positioned as a modern, all-in-one solution for developers. The design uses a deep dark background (#0D0E11) with high-contrast white text (#FFFFFF) and a single, vibrant pink accent (#F472B6). Typography is a bold grotesque-sans for headings and a clean system-sans for body text. Critical constraints: don't use light themes, don't use serif fonts for headlines, don't overcomplicate the UI with multiple accent colors or excessive decorative elements, and don't use overly large border radii on non-pill components.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko