---
name: Bun
description: "This site is an excellent example of a modern developer tool's UI, balancing technical clarity with a bold, high-end aesthetic."
version: alpha

colors:
  background: "#0D0E11"
  primary: "#FFFFFF"
  secondary: "#E5E7EB"
  tertiary: "#F472B6"
  neutral: "#9CA3AF"
  bg-soft: "#282A36"
  muted-soft: "#D1D5DB"
  line: "rgba(255,255,255,0.16)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-1px"
  body:
    fontFamily: system-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: system-sans
    fontSize: 14px
    lineHeight: 1.4
    fontWeight: 500
    letterSpacing: "0px"
  mono:
    fontFamily: system-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px

---

## Overview

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

*A high-performance sports car for JavaScript developers*

## Colors

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

- **Background (`#0D0E11`)** — uses `bg` token
- **Primary text (`#FFFFFF`)** — uses `ink` token
- **Secondary text (`#E5E7EB`)** — uses `ink-soft` token
- **Accent (`#F472B6`)** — uses `accent` token
- **Muted (`#9CA3AF`)** — uses `muted` token
- **Borders (`rgba(255,255,255,0.16)`)** — uses `line` token

## Typography

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

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

## Layout

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

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

## Elevation & Depth

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

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

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

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

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