A dark, benchmark-forward runtime page (not the retired cream canvas): near-black grounds stepping through a full published gray ramp, with hot pink as the only brand colour in chrome and green, red and yellow confined to low-alpha benchmark-bar fills; type is deliberately un-designed — system-ui with no display webfont — but pushed to weight 800 at a 1.0 line-height, and switchers render as tab-topped panels whose top-only rounded caps sit flush on the panel beneath, over buttons carrying a keycap bevel.
Browse Bun in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: bun.sh (live DOM, computed styles + published CSS custom properties), 2026-07-19. Coverage: home / runtime landing. No logged-in surface exists. Note 1: the site is now DARK, not the cream/white canvas the category hint suggested — that redesign postdates the older brand. Note 2: reference screenshots could not be captured — the page repeatedly timed out script injection (heavy benchmark animations). All values below are read from computed styles, which is the authoritative source anyway; layout description is correspondingly conservative.
Bun runs a dark, benchmark-forward developer page: a near-black #0d0e11/#14151a ground with #282a36 panels, and hot pink #f472b6 as the single brand colour, carried onto the primary button and the section headings (#fbcfe8). Type is deliberately un-designed — system-ui throughout, no webfont — but pushed to weight 800 at 53px, which gives the page a blunt, performance-poster energy rather than a crafted one. The signature structural device is the tab-topped panel: platform and tool switchers are rendered as 6px 6px 0 0 / 7px 7px 0 0 tabs sitting flush on the panel below them, like a physical file divider. Buttons carry a 0 -2px 0 inset keycap bevel. Colour beyond pink appears only in benchmark bars and framework gradients. Feels: fast, blunt, benchmark-driven, developer-native.
| Token | Hex | Role / usage |
|---|---|---|
--black | #0b0a08 | Deepest ground |
--gray-950 | #0d0e11 | Page canvas |
--gray-900 | #14151a | Body / panel ground, text on pink |
--gray-800 | #282a36 | Panel fill (most common surface) |
--dark-gray | #282a35 | Alternate panel |
--gray-700 | #3b3f4b | Raised chrome, inactive tab |
--gray-600 | #4f5666 | Border / muted fill |
--gray-500 | #6b7280 | Muted, inactive tab border |
--gray-400 | #9ca3af | Caption text |
--gray-300 | #d1d5db | Body copy |
--gray-200 | #e5e7eb | Emphasised body |
--gray-100 | #f3f4f6 | Near-white |
--gray-50 | #f9fafb | Headline white |
| Token | Hex | Role / usage |
|---|---|---|
pink | #f472b6 | THE brand colour — primary button, active tab, section headings |
pink-tint | #fbcfe8 | Large section headings |
--blue | #00a6e1 | Published accent |
--orange | #f89b4b | Published accent |
--orange-light | #d4d3d2 | Published (reads as a light neutral) |
--link-hover-color | #a03939 | Link hover |
--dark-border | rgba(200,200,25,0.2) | Published border token |
50 #f3e8f9 · 100 #e1d0f2 · 200 #cfc8ec · 300 #bdb1e5 · 400 #ab99de · 500 #9982d8 · 600 #876ad1 · 700 #7553cb · 800 #633bc4 · 900 #5122bd
green rgba(35,195,95,.20) (#23c35f) · red rgba(240,70,70,.20) (#f04646) · blue rgba(59,128,245,.10) (#3b80f5) · yellow rgba(235,180,10,.20) (#ebb40a) · pink rgba(235,70,155,.20) (#eb469b) · white rgba(255,255,255,.06)
Rules. Pink #f472b6 is the only brand colour in chrome. The green/red/yellow/blue tints exist solely as benchmark-bar fills at low alpha — never as UI status colours. The published purple ramp and the blue/orange accents did not appear in the captured chrome.
system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, … (published as --system-font) — no webfont for text"JetBrains Mono", "Fira Code", "Hack", "Source Code Pro", "SF Mono", "Inconsolata", monospace (published as --monospace-font)| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Hero h1 | 53.33/53.33 | 800 | normal (#f9fafb) |
| Section h2 | 48/48 | 800 | normal (#fbcfe8) |
| Sub-headline h2 | 24/33 | 500 | normal (#d1d5db) |
| Card h3 | 24/32 | 700 | normal (#ffffff) |
| Lead paragraph | 20.8/31.2 | 400 | normal (#d1d5db) |
| Emphasis paragraph | 18.67/28 | 600 | normal (#e5e7eb) |
| Install line | 20/28 | 600 | normal (#ffffff) |
| Caption | 16/24 | 400 | normal (#9ca3af) |
| Button label | 16-18 | 400-500 | normal |
Patterns: line-height is set to exactly 1.0 on both display roles (53.33/53.33 and 48/48), which is what makes the headlines feel packed. Weight swings hard — 800 for display, 400 for body — with no intermediate display weight. Tracking is normal everywhere. Published --line-height: 1.4 governs body text. Sentence case throughout.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.