# Design Reference - Bun
> Synthwave dark lab – precision code illuminated by neon accents.

## Source
- Original site: https://bun.sh
- Captured: 2026-04-11T15:57:56.162Z

## Tags
- dark mode
- synthwave
- developer
- neon accents
- code-centric
- high-contrast
- minimalist
- technical
- focused
- vibrant

## Colors
| Name | Value | Group | Role |
|------|-------|-------|------|
| Midnight Core | `#0d0e11` | neutral | Page background, primary dark surface. |
| Obsidian Base | `#14151a` | neutral | Card backgrounds, section backgrounds, deeper surface level. |
| Charcoal Canvas | `#282a36` | neutral | Component backgrounds, code blocks, secondary dark surfaces. |
| Slate Border | `#3a3a3f` | neutral | Subtle borders, dividers, subtle active states. |
| Graphite Accent | `#3b3f4b` | neutral | Accent borders, button outlines, subtle hover states. |
| Ash Text | `#6b7280` | neutral | Secondary body text, disabled states. |
| Silver Text | `#e5e7eb` | neutral | Primary body text, labels, icons. |
| Polar White | `#ffffff` | neutral | High-contrast text, primary headers, active elements. |
| Cyber Pink | `#f472b6` | brand | Primary brand accent, interactive elements (buttons, links), highlight text for 'fast', 'toolkit'. |
| Neon Violet | `#a855f7` | brand | Secondary brand accent, highlight boxes, specific callouts. |
| Faded Rose | `#fbcfe8` | brand | Subtle highlight text, often paired with Cyber Pink for larger headings. |
| Magenta Glow | `#ec4899` | accent | Call-to-action button backgrounds, strong interactive elements. |
| Electric Cyan | `#22d3ee` | accent | Highlight text for specific data points or status indicators. |
| Virtual Violet | `#c084fc` | accent | Interactive text like tooltips or active filters. |
| System Green | `#34d399` | semantic | Success states, positive indicators, checkmarks. |
| Warning Yellow | `#fcd34d` | semantic | Warning messages, caution indicators. |
| Danger Red | `#f87171` | semantic | Error messages, destructive actions. |
| Gradient Pink Pulse | `#ec4899` | brand | Decorative gradients creating a subtle pulse effect around key content, drawing attention without being overly aggressive. |
| Gradient Pink Fade | `#f472b6` | brand | Background gradient for certain elevated sections, providing a soft transition from the Cyber Pink hue. |
| Gradient Sunset | `#e67e22` | accent | Illustration accent, indicating energy or speed. |
| Gradient Cosmos | `#b301b3` | accent | Illustration accent, adding depth and visual interest. |

## Typography
- role: Primary text font for all UI elements, body copy, headings, and navigation. Uses various weights and sizes to establish hierarchy, with weight 800 often used for bold declarations within headlines.; sizes: 12px, 13px, 14px, 16px, 18px, 20px, 21px, 24px, 48px, 53px, 60px; family: system-ui; weight: 300, 400, 500, 600, 700, 800; lineHeight: 1.00, 1.20, 1.33, 1.40, 1.43, 1.50, 1.54, 1.56, 1.63, 1.78, 1.85; substitute: Inter; letterSpacing: normal; fontFeatureSettings: "kern"
- role: Monospace font specifically for code snippets, command line inputs, and technical details, reinforcing the developer-centric nature of the product.; sizes: 12px, 13px, 14px, 16px, 18px, 19px; family: JetBrains Mono; weight: 400, 500, 600, 700; lineHeight: 1.11, 1.33, 1.43, 1.50, 1.51, 1.54, 1.60, 1.63; substitute: Fira Code; letterSpacing: normal; fontFeatureSettings: "kern"

## Spacing And Radius
```json
{
  "spacing": {
    "radius": {
      "badge": "9999px",
      "input": "7px",
      "buttons": "8px",
      "default": "8px"
    },
    "elementGap": "8px",
    "sectionGap": "128px",
    "cardPadding": "",
    "pageMaxWidth": "1280px"
  },
  "radius": {
    "badge": "9999px",
    "input": "7px",
    "buttons": "8px",
    "default": "8px"
  }
}
```

## Component Patterns
- name: Install Command Line Input with OS Tabs
- name: Feature Cards — Four Tools One Toolkit
- name: API Pill Selector + Code Block
- name: Primary CTA Button; role: Main call-to-action.
- name: Ghost Navigation Button; role: Secondary navigation or filter items.
- name: Text Accent Button; role: Tertiary actions or category toggles.
- name: Large Feature Card; role: Prominent feature display.
- name: Command Line Input; role: Code snippets for user interaction.
- name: Performance Bar Graph; role: Visual representation of data.
- name: Code Block; role: Displaying source code.
- name: Highlight Badge (Replaces); role: Emphasizing replacements or comparisons.

## Do
- Use Midnight Core (#0d0e11) as the base page background.
- Apply Charcoal Canvas (#282a36) for card surfaces and code blocks.
- Highlight primary calls-to-action with Magenta Glow (#ec4899) background and Polar White (#ffffff) text.
- Maintain high contrast text with Polar White (#ffffff) for headings and Silver Text (#e5e7eb) for body copy against dark backgrounds.
- Utilize 9999px radius for small interactive elements like tags and badges, creating a soft pill shape.
- Reserve JetBrains Mono for all code-related content, including command-line interfaces and code snippets.
- Use Cyber Pink (#f472b6) and Neon Violet (#a855f7) sparingly for key accents, interactive states, and important highlights.

## Don't
- Avoid using light backgrounds; the theme is exclusively dark, leveraging specific dark neutrals.
- Do not introduce strong shadows on most elements, as depth is primarily created through varying dark surface colors and subtle inner borders.
- Do not deviate from the system-ui for general text content; save JetBrains Mono for code only.
- Avoid overuse of chromatic colors; they are accents, not primary content colors.
- Do not use generic button styles; always apply the specified padding, border, and radius for each button variant.
- Avoid any radius value other than 4px, 8px, 12px, 30px, or 9999px, as these define the system's shape language.