{"id":"c3ceca5c-d329-4559-b947-016172941ba2","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","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":"GitHub","summary":"Midnight command center, subtly glowing","description":"GitHub's design system evokes a dark, digital canvas – a midnight command center feel. Key elements are subtle translucency, glowing accents of blue, green, and violet, and a spacious, comfortable layout. Typography is precise and organized, contrasting bright text against deep backgrounds. Components are lightweight with rounded corners, often appearing as frosted overlays or bordered elements on a dark, unbounded canvas.","industry":"devtools","colorScheme":"dark","colors":[{"name":"Deep Space","hex":"#0d1117","role":"Primary page background, base for most dark surfaces","group":"neutral"},{"name":"Midnight Ink","hex":"#000000","role":"Elevated surfaces, code blocks, modal backgrounds, and deeply shadowed areas","group":"neutral"},{"name":"Code Canvas","hex":"#151a22","role":"Secondary background for sections, code editor areas, and subtle surface differentiation","group":"neutral"},{"name":"Subtle Gray","hex":"#21262d","role":"Borders between sections, divider lines, and very soft visual separation","group":"neutral"},{"name":"Ash Gray","hex":"#283041","role":"Faint background for inactive states or subtle borders, hinting at elevation","group":"neutral"},{"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"},{"name":"Faded Silver","hex":"#f0f6fc","role":"Secondary text, subheadings, and muted UI elements that require slightly less prominence than primary text","group":"neutral"},{"name":"UI Gray","hex":"#9198a1","role":"Placeholder text, secondary icons, and less prominent text labels","group":"neutral"},{"name":"Muted Text","hex":"#7c8980","role":"Subtle helper text, less important details, and desaturated captions","group":"neutral"},{"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"},{"name":"Spring Green","hex":"#08872b","role":"Primary action button background. Signals positive action or confirmation","group":"brand"},{"name":"Cosmic Violet","hex":"#8c93fb","role":"Decorative card borders and subtle illustrative accents, creating a sense of digital magic","group":"accent"},{"name":"Neon Green","hex":"#5fed83","role":"Highlight text or decorative elements, particularly within code or feature descriptions","group":"accent"},{"name":"Interface Blue","hex":"#1f6feb","role":"Solid background for specific active elements or content blocks, providing a stronger visual presence","group":"accent"},{"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%)"},{"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))"},{"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%)"},{"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))"}],"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"}],"typeScale":[{"role":"caption","size":12,"lineHeight":1.5},{"role":"body-sm","size":14,"lineHeight":1.5,"letterSpacing":0.015},{"role":"body","size":16,"lineHeight":1.5,"letterSpacing":0.01},{"role":"subheading","size":18,"lineHeight":1.5,"letterSpacing":0.01},{"role":"heading-sm","size":22,"lineHeight":1.4,"letterSpacing":0.01},{"role":"heading","size":24,"lineHeight":1.4,"letterSpacing":0.01},{"role":"heading-lg","size":40,"lineHeight":1.2,"letterSpacing":-0.035},{"role":"display","size":64,"lineHeight":1,"letterSpacing":-0.035}],"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."]},"components":[{"name":"Ghost Header Button","role":"Navigation, secondary actions"},{"name":"Pill Ghost Button","role":"Secondary, subtle actions, category filters"},{"name":"Primary Action Button","role":"Main call to action"},{"name":"Outlined Accent Button","role":"Secondary interactive actions, often related to product features"},{"name":"Code Block Card","role":"Displaying code snippets or technical content"},{"name":"Floating Content Card","role":"Elevated content blocks or interactive elements"},{"name":"Input Field","role":"User text input"},{"name":"Pill Input","role":"Search or short text inputs"}],"customSections":[{"title":"Agent Prompt Guide","content":"Quick Color Reference:\ntext: #ffffff\nbackground: #0d1117\nborder: #21262d\naccent: #8dd6ff\nprimary action: #08872b (filled action)\n\nExample Component Prompts:\n1. Create a Primary Action Button: #08872b background, #ffffff text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA.\n2. Create a feature card: Floating Content Card (rgba(255, 255, 255, 0.2) background, 24px radius, 8px padding). Title 'Accelerate your workflow' in Mona Sans, size 24px, weight 600, color Ghost White (#ffffff). Body text 'From your first line of code...' in Mona Sans, size 16px, weight 400, color Faded Silver (#f0f6fc).\n3. Create a navigation link: 'Solutions' in Mona Sans, size 16px, weight 400, color Ghost White (#ffffff). Hover state text Polar Blue (#8dd6ff). Ensure 16px right margin from the next element."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777505732760-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777505732760-thumb.jpg","previewVideoUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/c3ceca5c-d329-4559-b947-016172941ba2-1777557298416-preview.mp4","previewVideoPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/c3ceca5c-d329-4559-b947-016172941ba2-1777557298416-preview-poster.jpg","previewVideoDetailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/c3ceca5c-d329-4559-b947-016172941ba2-1777557298416-preview-detail.mp4","previewVideoDetailPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/c3ceca5c-d329-4559-b947-016172941ba2-1777557298416-preview-detail-poster.jpg"},"similarStyleIds":["408a149c-702f-4442-99df-bea49d9c0d9b","62e8e59e-17a5-4eba-a6c6-1c7f67ded518","10654184-eb92-4b75-a7af-bd92bc6cdc5c","e80231a2-e4d6-406a-a2c9-2e6109679690","86541d12-7870-4d51-8c47-0880fdb1ea01","4e1ac04c-02ae-41cf-b588-3f6226a882f8","c81d2be0-05b7-4755-8046-f2d19fbc448c","18a75348-513a-49d8-94f5-e2df8c118b6b","632249f1-fd78-4c77-9b34-7bae37ff3e9b","108e2695-6970-47d5-b5b0-eea8fc34e048","2bf4c61f-de10-4614-ba1b-20c0453bd2a9","d74d84a6-e04a-4bda-b1e1-5ef1c49ce328","4d4772a3-e1da-415f-a6d7-658dcefdcecd","0acef011-07da-4416-b874-ccdd675140f6","350b1557-56f0-4361-8c8b-b7a88081982b","cb6e4ab0-b8fe-45b0-bd22-6339b073e26d","2ab1abbc-b9f5-418f-a36a-94a4eca74ba9","9117a4f5-6171-44ad-aa85-a387a5d80620","50833119-cb36-4b75-b0cc-be48afea050a","8401cb26-91a3-4b46-941e-1c75790821eb"],"exports":{"designMdUrl":"/references/refero/c3ceca5c-d329-4559-b947-016172941ba2/design.md","tokensJsonUrl":"/references/refero/c3ceca5c-d329-4559-b947-016172941ba2/tokens.json","tailwindV4Url":"/references/refero/c3ceca5c-d329-4559-b947-016172941ba2/tailwind-v4.css","cssVariablesUrl":"/references/refero/c3ceca5c-d329-4559-b947-016172941ba2/tailwind-v4.css"}}