GitHub

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. 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. 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.