# Bun · Design system migration spec

> Source: https://bun.sh  ·  Curated by OpenDesign  ·  en

> This site is an excellent example of a modern developer tool's UI, balancing technical clarity with a bold, high-end aesthetic.

## 1. Identity DNA

The Bun identity operates like a high-performance sports car: every component is streamlined for velocity, with no extraneous ornamentation to create drag. The design language is built on a foundation of speed, rendering its developer-facing tooling with the same precision engineering found in its runtime. This is a system where visual minimalism serves technical clarity.

**One-liner:** A fast, all-in-one JavaScript runtime and toolkit.
**Keywords:** Performance · Developer-first · All-in-one · Fast · Runtime
**Analogy:** A high-performance sports car for JavaScript developers

## 2. Color

The color system is built for sustained focus on dark interfaces, using a deep charcoal (#0D0E11) as its primary ground to minimize eye strain during long coding sessions. A single vibrant pink (#F472B6) functions as a strategic accent, reserved for highlighting key performance metrics and primary actions, creating a clear visual hierarchy without chromatic noise.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#0D0E11` | main background |
| `--bg-soft` | `#282A36` | card background |
| `--ink` | `#FFFFFF` | body text |
| `--ink-soft` | `#E5E7EB` | secondary text |
| `--muted` | `#9CA3AF` | placeholder |
| `--muted-soft` | `#D1D5DB` | weak hint |
| `--accent` | `#F472B6` | single accent |
| `--line` | `rgba(255,255,255,0.16)` | divider |

**Color principle:** High contrast on dark surfaces with a single bold pink accent.

The principle is disciplined restraint: one accent color does all the persuasive work, ensuring it never competes with the content it's meant to emphasize.

## 3. Typography

The typographic voice is utilitarian and immediate, employing the native system-ui stack for interface text to ensure native rendering performance and consistency across platforms. Technical content and code samples use a monospace counterpart, creating a clear typographic distinction between prose and executable commands.

- **Display:** grotesque-sans
- **Body:** system-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 700 | -1px | Hero headlines and large section headers. |
| body | 16px | 1.5 | 400 | 0px | Main body text and descriptions. |
| caption | 14px | 1.4 | 500 | 0px | Secondary labels and navigation links. |
| mono | 16px | 1.5 | 400 | 0px | Code snippets, terminal commands, and technical data. |

**Type rules:**
- 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.

## 4. Spacing

The spatial rhythm is governed by an 8px baseline grid, creating a predictable vertical cadence that structures content from component padding to section gutters.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** A strict 4px-based grid system ensuring consistent vertical and horizontal rhythm.

## 5. Surfaces

Surface depth is achieved through shadow and border, not color variation. A primary deep shadow provides lift for elevated cards, while a secondary, subtly tinted pink shadow creates thematic linkage for interactive elements.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - rgba(0, 0, 0, 0.25) 0px 25px 50px -12px
  - rgba(131, 24, 67, 0.1) 0px 10px 15px -3px
- **Borders:** Subtle white borders (0.16 opacity) to define dark card edges.

## 6. Layout

The layout skeleton centers content within generous whitespace, prioritizing readability and focus. On desktop, the hero section adopts a two-column structure to present narrative alongside empirical benchmark data, establishing a pattern of claim and proof.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion is treated as functional feedback, not decoration. Transitions are swift (150ms) and purposeful, communicating state changes through color shifts, opacity adjustments, and subtle transforms that confirm interaction without delay.

- **Durations:** micro 150ms · small 200ms · medium 400ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth color and background transitions on hover.
  - Subtle opacity changes for interactive feedback.

- **Hover:** Subtle background color shifts and text color changes.
- **Click:** Immediate visual response with minimal delay.
- **Transition:** All interactive elements should have a 150ms transition.
- **Keyboard:** Clear focus states for navigation.

## 8. Voice & Don'ts

The editorial voice is confident and technical, using bold, large typography to headline performance metrics and direct, action-oriented calls to action that provide immediate installation commands.

- **Tone:** Confident, technical, and direct.
- **Headline style:** Bold, impactful, and often using a single word highlight in pink.
- **CTA style:** Clear, action-oriented, and visually prominent.
- **Avoid:** Avoid verbose or flowery language. / Avoid unnecessary decorative elements. / Avoid overly complex layouts that distract from the core technical value.

### Don'ts
- ❌ 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.

The system deliberately avoids corporate jargon, passive constructions, and explanations that lack practical context for its developer audience.

## System Prompt (paste into AI tool)

```
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.
```