Bun

Bun, dark mode, dark-mode

Preview image. Unlock full-res

Synthwave dark lab – precision code illuminated by neon accents.

Palette
#0d0e11
#14151a
#282a36
#3a3a3f
#3b3f4b
#6b7280
#e5e7eb
#ffffff
#f472b6
#a855f7
#fbcfe8
#ec4899

This design system conjures a high-tech laboratory vibe, a 'synthesized chaos' where sophisticated functionality meets playful, almost neon, branding. The dominant dark charcoal background creates a stark stage for bursts of vivid pinks and violets. Careful use of these vibrant chromatic accents for interactive elements and key messaging prevents visual fatigue, while subtle textural gradients and inner borders add depth to an otherwise flat dark aesthetic. The fusion of precise monospace code snippets with the broader system font reflects the dual nature of developer tools: serious, technical work presented with an engaging, almost futuristic flair. 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. 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.

More like this