An original, unofficial Bun-inspired system for fast JavaScript tooling, install proof, benchmark comparison, and toolkit navigation. It retains only 14 focused elements supported by Bun's live product story.
Foundations
A public overview of the typography, palette, icon language, spacing, shape, and motion used throughout this AI Kit.
Style identity
A fast, energetic developer-tooling system that puts install commands, benchmark comparison, release context, and compact assistant access in one technical story.
Dark plum and black with warm cream copy, pink selected states, and terminal-fir themeTypography
System UI
Body, headings, navigation, and controls observed on bun.sh.
system-ui, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serifFallback: ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif
Terminal mono
Install commands, benchmark values, and code snippets.
ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, monospaceFallback: monospace
Palette
Toolkit canvas / light
#fff7f4Warm documentation canvas.
Toolkit canvas / dark
#14151aObserved near-black homepage canvas.
Surface / light
#ffffffLight tool and benchmark panel.
Surface / dark
#1d1721Raised plum command surface.
Ink / light
#24131dWarm dark text on light.
Ink / dark
#f9fafbWarm white homepage type.
Pink action / light
#bd4f83Selected tool and primary action.
Pink action / dark
#ff9fc5Selected state and link emphasis.
Benchmark cream
#f9d9c1Warm proof highlight.
Muted copy
#d1d5dbObserved benchmark supporting text.
Hairline
#30433eQuiet divider and control border.
Type scale
| Role | Size | Weight | Line height | Tracking |
|---|---|---|---|---|
| Hero desktop | 53.3333px | 800 | 53.3333px | — |
| Hero mobile | 37.3333px | 800 | 37.3333px | — |
| Proof section | 48px | 800 | 48px | — |
| Body | 16px | 400 | 24px | — |
| Benchmark label | 24px | 500 | 33px | — |
| Command | 13px | 500 | 20px | — |
Spacing & shape
Iconography
Use currentColor, pair symbols with labels for important actions, and preserve optical alignment.
System metrics
Radius
Spacing
Motion
Guidelines
Imagery
Prefer CSS-only benchmark bars, terminal geometry, and original abstract texture. Do not copy Bun logos, hero.jpg, screenshots, or brand artwork.
Layout
Balance a direct toolkit claim with install proof on desktop, then stack install, benchmark, and assistant access on mobile. Keep the first command visible before secondary proof.
Concept
Use the file tree to move between the full reference preview, implementation guidance, portable tokens, and framework-ready styles. Each surface stays focused, so you can understand the system before copying code.
Assigned collection
14 published components in collection order
Components
Production-ready specimens from this AI Kit's approved collection.
More like this
An unofficial, original Postman-inspired interface study with 14 focused specimens supported by the live product and content experience.
An unofficial, original v0-inspired Prompt Workshop system grounded in 17 retained, evidence-backed interface patterns.
13 focused, original elements for Borderless Ledger; categories are retained only when supported by the live reference. Published flags remain disabled.
A high-contrast studio language for a platform that moves between creative production, developer workflows, robotics, research, and enterprise. The system uses a dark stage, warm action color, and compact cross-platform wayfinding without copying Runway's wordmark, content, or media. Responsive previews and 8 evidence-backed interface elements.
An original, unofficial Observable-inspired system for reactive notebooks, executable explanations, and data visualization surfaces. It retains only 11 focused elements supported by Observable's live notebook and chart workflows.
A friendly builder language for moving from prompt to app: vivid purple/green accents, a prominent idea field, artifact type selection, parallel execution, built-in infrastructure, team plans, agent chat, and a clear publish handoff. It is an original study without Replit's logo, pixel font, testimonials, screenshots, or protected copy. Responsive previews and 14 evidence-backed interface elements.