{"id":"c3ceca5c-d329-4559-b947-016172941ba2","name":"GitHub","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/c3ceca5c-d329-4559-b947-016172941ba2","originalSiteUrl":"https://github.com","capturedAt":"2026-04-29T23:35:59.626Z","colors":[{"name":"Deep Space","hex":"#0d1117","role":"Primary page background, base for most dark surfaces","group":"neutral","cssVariable":"--color-deep-space"},{"name":"Midnight Ink","hex":"#000000","role":"Elevated surfaces, code blocks, modal backgrounds, and deeply shadowed areas","group":"neutral","cssVariable":"--color-midnight-ink"},{"name":"Code Canvas","hex":"#151a22","role":"Secondary background for sections, code editor areas, and subtle surface differentiation","group":"neutral","cssVariable":"--color-code-canvas"},{"name":"Subtle Gray","hex":"#21262d","role":"Borders between sections, divider lines, and very soft visual separation","group":"neutral","cssVariable":"--color-subtle-gray"},{"name":"Ash Gray","hex":"#283041","role":"Faint background for inactive states or subtle borders, hinting at elevation","group":"neutral","cssVariable":"--color-ash-gray"},{"name":"Ghost White","hex":"#ffffff","role":"Primary text, prominent icons, and active navigation elements. Also used as a white background for some translucent elements","group":"neutral","cssVariable":"--color-ghost-white"},{"name":"Faded Silver","hex":"#f0f6fc","role":"Secondary text, subheadings, and muted UI elements that require slightly less prominence than primary text","group":"neutral","cssVariable":"--color-faded-silver"},{"name":"UI Gray","hex":"#9198a1","role":"Placeholder text, secondary icons, and less prominent text labels","group":"neutral","cssVariable":"--color-ui-gray"},{"name":"Muted Text","hex":"#7c8980","role":"Subtle helper text, less important details, and desaturated captions","group":"neutral","cssVariable":"--color-muted-text"},{"name":"Polar Blue","hex":"#8dd6ff","role":"Link text, outlined button borders, and interactive icon accents. It's a key brand identifier for interactive elements","group":"brand","cssVariable":"--color-polar-blue"},{"name":"Spring Green","hex":"#08872b","role":"Primary action button background. Signals positive action or confirmation","group":"brand","cssVariable":"--color-spring-green"},{"name":"Cosmic Violet","hex":"#8c93fb","role":"Decorative card borders and subtle illustrative accents, creating a sense of digital magic","group":"accent","cssVariable":"--color-cosmic-violet"},{"name":"Neon Green","hex":"#5fed83","role":"Highlight text or decorative elements, particularly within code or feature descriptions","group":"accent","cssVariable":"--color-neon-green"},{"name":"Interface Blue","hex":"#1f6feb","role":"Solid background for specific active elements or content blocks, providing a stronger visual presence","group":"accent","cssVariable":"--color-interface-blue"},{"name":"Violet Glow","hex":"#e6b7fe","role":"Illustrative element — background highlight for abstract graphics","group":"accent","gradient":"radial-gradient(circle at 0px 100%, rgb(230, 183, 254) 10%, rgb(80, 73, 194) 20%, rgba(87, 78, 255, 0) 60%)","cssVariable":"--color-violet-glow"},{"name":"Blue-Violet Orb","hex":"#a7a2ff","role":"Illustrative element — focused glow emanating from central points in graphics","group":"accent","gradient":"radial-gradient(rgb(167, 162, 255) 30%, rgba(147, 80, 255, 0.5))","cssVariable":"--color-blue-violet-orb"},{"name":"Vapor Trail Blue","hex":"#5993d4","role":"Illustrative element — upward-sweeping light beams in abstract backgrounds","group":"accent","gradient":"linear-gradient(rgba(120, 115, 203, 0.2) 60%, rgb(89, 147, 212) 100%)","cssVariable":"--color-vapor-trail-blue"},{"name":"Deep Gradient Start","hex":"#000240","role":"Illustrative element — beginning of a deep blue gradient for background effects","group":"accent","gradient":"linear-gradient(rgb(0, 2, 64), rgba(0, 0, 0, 0))","cssVariable":"--color-deep-gradient-start"}],"typography":[{"role":"Primary brand typeface for all headings, body text, UI elements, and navigation. Its wide range of weights and precise letter-spacing ensures a consistent, modern voice.","sizes":"14px, 16px, 18px, 22px, 24px, 40px, 48px, 64px","family":"Mona Sans","weight":"400, 425, 440, 460, 480, 500, 600, 800","weights":[400,425,440,460,480,500,600,800],"lineHeight":"1.00, 1.08, 1.18, 1.20, 1.30, 1.40, 1.50","substitute":"Inter","letterSpacing":"-0.035, 0.01, 0.011, 0.013, 0.015"},{"role":"Used for smaller text, auxiliary information, and captions where Mona Sans would be too heavy. Its variable font capabilities likely allow for subtle optical adjustments.","sizes":"12px, 14px, 16px, 24px","family":"Mona Sans VF","weight":"400, 500, 600, 700","weights":[400,500,600,700],"lineHeight":"1.00, 1.25, 1.43, 1.50","substitute":"Inter","letterSpacing":"0"},{"role":"Monospace variant for code snippets, technical terms, and environments where code-like presentation is desired, ensuring visual consistency with the main typeface.","sizes":"14px","family":"Mona Sans Mono","weight":"400","weights":[400],"lineHeight":"1.50","substitute":"JetBrains Mono","letterSpacing":"0.015"},{"role":"Fallback monospace font for code blocks and technical displays, ensuring readability across systems.","sizes":"14px","family":"ui-monospace","weight":"400","weights":[400],"lineHeight":"1.50","substitute":"Menlo, Monaco","letterSpacing":"0"}],"spacing":{"radius":{"pill":"60px","cards":"24px","input":"8px","buttons":"6px","default":"6px"},"elementGap":"16px","sectionGap":"24px","cardPadding":"8px"},"radius":{"pill":"60px","cards":"24px","input":"8px","buttons":"6px","default":"6px"},"shadows":{"surfaces":[{"hex":"#0d1117","name":"Deep Space","level":0,"purpose":"Base page background"},{"hex":"#151a22","name":"Code Canvas","level":1,"purpose":"Secondary page sections, code editor areas"},{"hex":"#000000","name":"Midnight Ink","level":2,"purpose":"Elevated panels, code blocks, deepest darks"},{"hex":"#ffffff","name":"Floating Card Translucent","level":3,"purpose":"Cards and overlays with high transparency (rgba(255, 255, 255, 0.2))"}]},"guidelines":{"do":["Prioritize Deep Space (#0d1117) as the canvas background for most page sections.","Use Ghost White (#ffffff) for all primary body and heading text for maximum contrast on dark backgrounds.","Apply Spring Green (#08872b) exclusively for primary call-to-action button backgrounds.","Utilize Polar Blue (#8dd6ff) for all links, outlined buttons, and interactive icons.","Apply a 6px border radius for most interactive elements like buttons and inputs, but use 60px for pill-shaped elements.","Ensure cards use a larger 24px border radius, often with only top corners rounded for a more architectural feel.","Maintain comfortable element spacing using multiples of 4px, especially 16px for elementGap."],"dont":["Avoid using bright, saturated colors for backgrounds; stick to the dark neutral palette.","Do not use generic gray borders (such as #f0f6fc) on interactive elements; Polar Blue (#8dd6ff) is reserved for interaction outlining.","Never introduce hard, sharp corners on cards or primary buttons; maintain a consistent rounded aesthetic.","Do not use overly large or decorative drop shadows; the system favors subtle glows and translucency over heavy elevation.","Avoid dense packing of information; allow ample `elementGap` and `sectionGap` for a comfortable user experience.","Do not vary font families outside of Mona Sans variants and monospace fallbacks; maintain typographic consistency.","Avoid using Mona Sans Mono or ui-monospace for non-code content; these are specifically for technical text."]}}