Studio
Studio
GitHub tasarım sistemi koyu temalı bir arayüz dili kullanıyor. Ana marka rengi Spring Green (#08872b); metinler Ghost White (#ffffff), arka plan Deep Space (#0d1117). Tipografide Mona Sans, Mona Sans VF ve Mona Sans Mono kullanılıyor. Bu DESIGN.md dosyası 14 renk token'ı ve 8 kademeli bir yazı ölçeği içeriyor; Claude, Cursor veya v0 gibi yapay zekâ araçlarına verildiğinde GitHub tarzında tutarlı arayüzler üretmelerine yardımcı olur.
Bağımsız Stil İncelemesi
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.
| Renk | HEX | CSS token | Kullanım (İngilizce) |
|---|---|---|---|
| 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 | Ağırlıklar | Yedek font |
|---|---|---|
| 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 |
| Rol | Boyut | Satır yüksekliği | 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 |
