Studio
Studio
The GitHub design system uses a dark-themed visual language. The primary brand color is Spring Green (#08872b); text is Ghost White (#ffffff) on a Deep Space (#0d1117) background. Typography is set in Mona Sans, Mona Sans VF and Mona Sans Mono. This DESIGN.md contains 14 color tokens and a 8-step type scale; give it to AI tools like Claude, Cursor or v0 to generate consistent interfaces in the style of GitHub.
Independent Style Review
Midnight command center, subtly glowing
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.
| Color | HEX | CSS token | Usage |
|---|---|---|---|
| Deep Space | #0d1117 | --color-deep-space | Primary page background, base for most dark surfaces |
| Midnight Ink | #000000 | --color-midnight-ink | Elevated surfaces, code blocks, modal backgrounds, and deeply shadowed areas |
| Code Canvas | #151a22 | --color-code-canvas | Secondary background for sections, code editor areas, and subtle surface differentiation |
| Subtle Gray | #21262d | --color-subtle-gray | Borders between sections, divider lines, and very soft visual separation |
| Ash Gray | #283041 | --color-ash-gray | Faint background for inactive states or subtle borders, hinting at elevation |
| Ghost White | #ffffff | --color-ghost-white | Primary text, prominent icons, and active navigation elements. Also used as a white background for some translucent elements |
| Faded Silver | #f0f6fc | --color-faded-silver | Secondary text, subheadings, and muted UI elements that require slightly less prominence than primary text |
| UI Gray | #9198a1 | --color-ui-gray | Placeholder text, secondary icons, and less prominent text labels |
| Muted Text | #7c8980 | --color-muted-text | Subtle helper text, less important details, and desaturated captions |
| Polar Blue | #8dd6ff | --color-polar-blue | Link text, outlined button borders, and interactive icon accents. It's a key brand identifier for interactive elements |
| Spring Green | #08872b | --color-spring-green | Primary action button background. Signals positive action or confirmation |
| Cosmic Violet | #8c93fb | --color-cosmic-violet | Decorative card borders and subtle illustrative accents, creating a sense of digital magic |
| Neon Green | #5fed83 | --color-neon-green | Highlight text or decorative elements, particularly within code or feature descriptions |
| Interface Blue | #1f6feb | --color-interface-blue | Solid background for specific active elements or content blocks, providing a stronger visual presence |
| Font | Weights | Fallback |
|---|---|---|
| Mona Sans | 400, 425, 440, 460, 480, 500, 600, 800 | Inter |
| Mona Sans VF | 400, 500, 600, 700 | Inter |
| Mona Sans Mono | 400 | JetBrains Mono |
| ui-monospace | 400 | Menlo, Monaco |
| Role | Size | Line height | Token |
|---|---|---|---|
| caption | 12px | 1.5 | --text-caption |
| body-sm | 14px | 1.5 | --text-body-sm |
| body | 16px | 1.5 | --text-body |
| subheading | 18px | 1.5 | --text-subheading |
| heading-sm | 22px | 1.4 | --text-heading-sm |
| heading | 24px | 1.4 | --text-heading |
| heading-lg | 40px | 1.2 | --text-heading-lg |
| display | 64px | 1 | --text-display |
