{"id":"408a149c-702f-4442-99df-bea49d9c0d9b","name":"Bun","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","colors":[{"name":"Midnight Core","hex":"#0d0e11","role":"Page background, primary dark surface.","group":"neutral","cssVariable":"--color-midnight-core"},{"name":"Obsidian Base","hex":"#14151a","role":"Card backgrounds, section backgrounds, deeper surface level.","group":"neutral","cssVariable":"--color-obsidian-base"},{"name":"Charcoal Canvas","hex":"#282a36","role":"Component backgrounds, code blocks, secondary dark surfaces.","group":"neutral","cssVariable":"--color-charcoal-canvas"},{"name":"Slate Border","hex":"#3a3a3f","role":"Subtle borders, dividers, subtle active states.","group":"neutral","cssVariable":"--color-slate-border"},{"name":"Graphite Accent","hex":"#3b3f4b","role":"Accent borders, button outlines, subtle hover states.","group":"neutral","cssVariable":"--color-graphite-accent"},{"name":"Ash Text","hex":"#6b7280","role":"Secondary body text, disabled states.","group":"neutral","cssVariable":"--color-ash-text"},{"name":"Silver Text","hex":"#e5e7eb","role":"Primary body text, labels, icons.","group":"neutral","cssVariable":"--color-silver-text"},{"name":"Polar White","hex":"#ffffff","role":"High-contrast text, primary headers, active elements.","group":"neutral","cssVariable":"--color-polar-white"},{"name":"Cyber Pink","hex":"#f472b6","role":"Primary brand accent, interactive elements (buttons, links), highlight text for 'fast', 'toolkit'.","group":"brand","cssVariable":"--color-cyber-pink"},{"name":"Neon Violet","hex":"#a855f7","role":"Secondary brand accent, highlight boxes, specific callouts.","group":"brand","cssVariable":"--color-neon-violet"},{"name":"Faded Rose","hex":"#fbcfe8","role":"Subtle highlight text, often paired with Cyber Pink for larger headings.","group":"brand","cssVariable":"--color-faded-rose"},{"name":"Magenta Glow","hex":"#ec4899","role":"Call-to-action button backgrounds, strong interactive elements.","group":"accent","cssVariable":"--color-magenta-glow"},{"name":"Electric Cyan","hex":"#22d3ee","role":"Highlight text for specific data points or status indicators.","group":"accent","cssVariable":"--color-electric-cyan"},{"name":"Virtual Violet","hex":"#c084fc","role":"Interactive text like tooltips or active filters.","group":"accent","cssVariable":"--color-virtual-violet"},{"name":"System Green","hex":"#34d399","role":"Success states, positive indicators, checkmarks.","group":"semantic","cssVariable":"--color-system-green"},{"name":"Warning Yellow","hex":"#fcd34d","role":"Warning messages, caution indicators.","group":"semantic","cssVariable":"--color-warning-yellow"},{"name":"Danger Red","hex":"#f87171","role":"Error messages, destructive actions.","group":"semantic","cssVariable":"--color-danger-red"},{"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))","cssVariable":"--color-gradient-pink-pulse"},{"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))","cssVariable":"--color-gradient-pink-fade"},{"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))","cssVariable":"--color-gradient-sunset"},{"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%)","cssVariable":"--color-gradient-cosmos"}],"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":{"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."]}}