{"id":"408a149c-702f-4442-99df-bea49d9c0d9b","source":{"name":"Refero","url":"https://styles.refero.design/","kind":"public-design-reference"},"contributors":[{"name":"Refero","role":"reference-helper","url":"https://styles.refero.design/"}],"attributionLabel":"Referenced with help from Refero","sourceUrl":"https://styles.refero.design/style/408a149c-702f-4442-99df-bea49d9c0d9b","originalSiteUrl":"https://bun.sh","capturedAt":"2026-04-11T15:57:56.162Z","licenseNote":"Public design-reference facts mirrored from Refero for agent context. Keep source attribution visible and verify rights before reusing media, logos, or brand assets.","name":"Bun","summary":"Synthwave dark lab – precision code illuminated by neon accents.","description":"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.","tags":["dark mode","synthwave","developer","neon accents","code-centric","high-contrast","minimalist","technical","focused","vibrant"],"industry":"devtools","colorScheme":"dark","colors":[{"name":"Midnight Core","hex":"#0d0e11","role":"Page background, primary dark surface.","group":"neutral"},{"name":"Obsidian Base","hex":"#14151a","role":"Card backgrounds, section backgrounds, deeper surface level.","group":"neutral"},{"name":"Charcoal Canvas","hex":"#282a36","role":"Component backgrounds, code blocks, secondary dark surfaces.","group":"neutral"},{"name":"Slate Border","hex":"#3a3a3f","role":"Subtle borders, dividers, subtle active states.","group":"neutral"},{"name":"Graphite Accent","hex":"#3b3f4b","role":"Accent borders, button outlines, subtle hover states.","group":"neutral"},{"name":"Ash Text","hex":"#6b7280","role":"Secondary body text, disabled states.","group":"neutral"},{"name":"Silver Text","hex":"#e5e7eb","role":"Primary body text, labels, icons.","group":"neutral"},{"name":"Polar White","hex":"#ffffff","role":"High-contrast text, primary headers, active elements.","group":"neutral"},{"name":"Cyber Pink","hex":"#f472b6","role":"Primary brand accent, interactive elements (buttons, links), highlight text for 'fast', 'toolkit'.","group":"brand"},{"name":"Neon Violet","hex":"#a855f7","role":"Secondary brand accent, highlight boxes, specific callouts.","group":"brand"},{"name":"Faded Rose","hex":"#fbcfe8","role":"Subtle highlight text, often paired with Cyber Pink for larger headings.","group":"brand"},{"name":"Magenta Glow","hex":"#ec4899","role":"Call-to-action button backgrounds, strong interactive elements.","group":"accent"},{"name":"Electric Cyan","hex":"#22d3ee","role":"Highlight text for specific data points or status indicators.","group":"accent"},{"name":"Virtual Violet","hex":"#c084fc","role":"Interactive text like tooltips or active filters.","group":"accent"},{"name":"System Green","hex":"#34d399","role":"Success states, positive indicators, checkmarks.","group":"semantic"},{"name":"Warning Yellow","hex":"#fcd34d","role":"Warning messages, caution indicators.","group":"semantic"},{"name":"Danger Red","hex":"#f87171","role":"Error messages, destructive actions.","group":"semantic"},{"name":"Gradient Pink Pulse","hex":"#ec4899","role":"Decorative gradients creating a subtle pulse effect around key content, drawing attention without being overly aggressive.","group":"brand","gradient":"linear-gradient(to right, rgba(0, 0, 0, 0), rgba(236, 72, 153, 0.5), rgba(0, 0, 0, 0))"},{"name":"Gradient Pink Fade","hex":"#f472b6","role":"Background gradient for certain elevated sections, providing a soft transition from the Cyber Pink hue.","group":"brand","gradient":"linear-gradient(rgba(244, 114, 182, 0.03), rgba(20, 21, 26, 0.5))"},{"name":"Gradient Sunset","hex":"#e67e22","role":"Illustration accent, indicating energy or speed.","group":"accent","gradient":"linear-gradient(to right, rgb(230, 126, 34), rgb(243, 156, 18))"},{"name":"Gradient Cosmos","hex":"#b301b3","role":"Illustration accent, adding depth and visual interest.","group":"accent","gradient":"radial-gradient(134.26% 244.64% at 42.92% -80.36%, rgb(179, 1, 179) 25.45%, rgb(56, 29, 189) 100%)"}],"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\""}],"typeScale":[{"role":"caption","size":12,"lineHeight":1.5},{"role":"body","size":14,"lineHeight":1.43},{"role":"heading","size":20,"lineHeight":1.4},{"role":"heading-lg","size":24,"lineHeight":1.33},{"role":"display","size":60,"lineHeight":1}],"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"},"shadows":{"surfaces":[{"hex":"#0d0e11","name":"Midnight Core","level":0,"purpose":"Primary page background."},{"hex":"#14151a","name":"Obsidian Base","level":1,"purpose":"Base for cards and primary content sections."},{"hex":"#282a36","name":"Charcoal Canvas","level":2,"purpose":"Code blocks, component backgrounds, and interactive elements."}]},"guidelines":{"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."],"dont":["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."]},"components":[{"name":"Install Command Line Input with OS Tabs","role":""},{"name":"Feature Cards — Four Tools One Toolkit","role":""},{"name":"API Pill Selector + Code Block","role":""},{"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."}],"customSections":[{"title":"Agent Prompt Guide","content":"1. **Quick Color Reference:**\n   - Text (primary): #ffffff\n   - Text (secondary): #e5e7eb\n   - Background (page): #0d0e11\n   - Background (card): #14151a\n   - CTA: #ec4899\n   - Border (subtle): #3a3a3f\n   - Accent: #f472b6\n\n2. **Example Component Prompts:**\n   - Create a hero section: background Midnight Core (#0d0e11). Headline 'Bun is a fast JavaScript all-in-one toolkit' using system-ui, weight 800 for 'fast' and 'all-in-one toolkit' color Cyber Pink (#f472b6), size 60px, line-height 1.0. Body text Silver Text (#e5e7eb) at 16px, line-height 1.5. Include a Primary CTA Button labeled 'Try it'.\n   - Generate a 'Bundling Performance' card: background Obsidian Base (#14151a), padding 16px. Title 'Bundling 10,000 React components' text Polar White (#ffffff), size 20px, weight 700. Inside, add a Performance Bar Graph with bars colored Cyber Pink (#f472b6) and labels Silver Text (#e5e7eb), code values Polar White (#ffffff).\n   - Design a command line input: background Charcoal Canvas (#282a36), border Slate Border (#3a3a3f), radius 8px, padding 16px. Placeholder text 'bun ./index.ts' using JetBrains Mono, Silver Text (#e5e7eb), 16px. Place a Cyber Pink (#f472b6) highlight badge with 'REPLACES NPM' text to its right, using 9999px radius and 4px 8px padding."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1775923049306-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1775923049306-thumb.jpg","previewVideoUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/408a149c-702f-4442-99df-bea49d9c0d9b-1777567430937-preview.mp4","previewVideoPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/408a149c-702f-4442-99df-bea49d9c0d9b-1777567430937-preview-poster.jpg","previewVideoDetailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/408a149c-702f-4442-99df-bea49d9c0d9b-1777567430937-preview-detail.mp4","previewVideoDetailPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/408a149c-702f-4442-99df-bea49d9c0d9b-1777567430937-preview-detail-poster.jpg"},"similarStyleIds":["c3ceca5c-d329-4559-b947-016172941ba2","62e8e59e-17a5-4eba-a6c6-1c7f67ded518","86541d12-7870-4d51-8c47-0880fdb1ea01","f71e92b0-d7a5-4203-b975-394f185218c2","4e1ac04c-02ae-41cf-b588-3f6226a882f8","c81d2be0-05b7-4755-8046-f2d19fbc448c","0acef011-07da-4416-b874-ccdd675140f6","b8ba443e-5d83-4f37-b8c6-a1acd7623d0c","18a75348-513a-49d8-94f5-e2df8c118b6b","ed10ae04-24ec-4e42-9bf2-ea12a4b58d67","cc38369a-41e3-4bcd-b619-230ccffe7e8e","733e6475-892a-4138-8835-bf40344df317","8eb9c53e-d69c-497a-b640-610856cf3a60","632249f1-fd78-4c77-9b34-7bae37ff3e9b","79714b4e-c89a-44b3-8da4-931daa9a466f","350b1557-56f0-4361-8c8b-b7a88081982b","bc4fb98b-37ec-480a-b7a9-acd197cbebb9","10654184-eb92-4b75-a7af-bd92bc6cdc5c","834ce97f-61f2-4b12-bf5c-e9fad2544456","cfab7b43-ed24-41e9-9272-c858700b865b"],"exports":{"designMdUrl":"/references/refero/408a149c-702f-4442-99df-bea49d9c0d9b/design.md","tokensJsonUrl":"/references/refero/408a149c-702f-4442-99df-bea49d9c0d9b/tokens.json","tailwindV4Url":"/references/refero/408a149c-702f-4442-99df-bea49d9c0d9b/tailwind-v4.css","cssVariablesUrl":"/references/refero/408a149c-702f-4442-99df-bea49d9c0d9b/tailwind-v4.css"}}