Switch between the rendered Visual preview and the Raw DESIGN.md.
This design system embodies a clean, minimalist aesthetic rooted in developer-focused functionality and clarity. The visual language prioritizes readability and accessibility through generous whitespace, restrained color use, and a neutral foundation punctuated by a signature blue accent. The atmosphere is professional yet approachable, with a emphasis on simplicity and directness—every visual element serves a functional purpose. The typography-heavy layout relies on clear hierarchy and precise spacing to guide user attention through information architecture, reflecting GitHub's commitment to uncluttered, purposeful design.
Key Characteristics
#4183C4): Call-to-action elements, interactive links, and primary UI affordances. Used for hyperlinks and primary interaction surfaces.#4183C4): Default link color for body text and navigational elements. Maintains consistency with the primary brand color.#000000): Primary text color for headings, labels, and primary body content. Used for maximum contrast and readability.#666666): Secondary text, descriptive content, and muted UI elements. Used for supporting text and reduced-emphasis information.#CCCCCC): Subtle borders, dividers, and very light UI separators.#F1F1F1): Page background, container backgrounds, and subtle surface differentiation. Used to establish content areas against pure white.Primary Font: Helvetica Neue, Helvetica, Arial, sans-serif
Secondary Font: Helvetica Neue, Helvetica, Arial, sans-serif (same stack; variation achieved through weight and size)
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display / H1 | Helvetica Neue | 60px | 100 | 60px | normal | Large error or status codes, page titles |
| Body | Helvetica Neue | 16px | 400 | 25.6px | normal | Primary content, descriptions, paragraphs |
| Secondary / Small | Helvetica Neue | 14px | 200 | normal | normal | Supporting text, metadata, footer links |
| Link / Interactive | Helvetica Neue | 16px | 400 | 25.6px | normal | Interactive text, hyperlinks in body |
| Link Secondary | Helvetica Neue | 14px | 200 | normal | normal | Secondary navigation links, footer items |
Primary Link (Body Context)
transparent#4183C416px400Helvetica Neue, sans-serif0px0pxnone25.6pxunderline (inferred default)#0366D6), text-decoration remains#0366D6, visited color #6E40AA (inferred)Secondary Link (Supporting Context)
transparent#66666614px200Helvetica Neue, sans-serif0px0pxnonenormalnone#999999, text-decoration underline added2px solid #4183C4 with 2px offsetBody Text Container
#FFFFFF (primary) or #F1F1F1 (secondary surface)#00000016px400Helvetica Neue, sans-serif40px horizontal, 36px vertical0px1px solid #CCCCCC (optional for bordered containers)25.6px40px or 52px between sectionsDisplay Heading Container
#FFFFFF#00000060px100Helvetica Neue, sans-serif36px horizontal0pxnone60px40pxMain Content Area
#F1F1F1 or #FFFFFF100%100vh52px 40px to 52px 0px (responsive adjustment)center (for centered error/info pages)flex with flex-direction: column and align-items: center and justify-content: centerBase Unit: 4px
Scale:
4px – Micro spacing, internal padding in tight components8px – Small spacing between adjacent elements12px – Standard gap between loosely related items16px – Comfortable spacing for related content blocks24px – Medium section separation36px – Standard vertical and horizontal padding within containers40px – Large section separation and primary container margins52px – Extra-large section separation and major layout divisionsUsage Context:
36px and 40px for internal padding within cards and containers.40px to 52px margins between major content sections.8px to 16px for inline spacing between text elements or form fields.display: flex with justify-content: center and align-items: center on full-viewport containers600px to 800px) through margin auto and flexboxWhitespace is treated as a fundamental design element, not empty space. The system employs generous margins and padding to create visual separation and reduce cognitive load. Vertical rhythm is established through consistent spacing multiples, creating a harmonious, scannable layout. The design prioritizes breathing room over information density.
0px – All interactive and structural elements use sharp corners; no border radius is applied anywhere in the system| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow; box-shadow: none | Primary UI surfaces, text, borders |
| Subtle (Optional) | box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.12) (inferred) | Card hover states or optional depth |
| None (Primary) | box-shadow: none | Default for all components; no shadow elevation used |
Shadow Philosophy: The GitHub Pages 404 design employs a flat, shadow-free aesthetic. Depth and hierarchy are communicated through color, typography, and whitespace rather than shadows or elevation. This maintains the clean, minimal visual language and ensures print-like clarity. Shadow effects are intentionally absent to preserve the design system's directness and functional simplicity.
#4183C4) for interactive elements and gray scale for content hierarchy.#4183C4) saturation or brightness for interactive elements; use it consistently.| Breakpoint Name | Width | Key Changes |
|---|---|---|
| Mobile | < 600px | Single-column layout, reduce padding to 24px, heading size remains 60px (consider reduction to 48px on very small screens), margins adjust to 24px–36px |
| Tablet | 600px – 960px | Padding increases to 32px–36px, margins scale to 36px–40px, single column persists |
| Desktop | ≥ 960px | Full padding (36px–52px), full margins (40px–52px), centered max-width container optional |
44px × 44px (height × width) on mobile devices.12px vertical and 8px horizontal.8px of spacing between adjacent touch targets to prevent accidental activation.52px to 40px on tablets; further reduce to 24px on mobile.40px on desktop to 32px on tablet and 24px on mobile.60px on tablet; optionally reduce to 48px on mobile (< 480px) to prevent overflow.#4183C4)#666666)#F1F1F1)#000000)#666666)#CCCCCC)Typography First: All text uses Helvetica Neue exclusively. Apply weight 100 for display headings (60px) and weight 400 for body (16px); use weight 200 only for secondary/reduced-emphasis text (14px).
Color Discipline: Use #4183C4 for all interactive links and CTAs. Use #000000 for primary headings and body text. Use #666666 for secondary/supporting content. Never introduce new colors outside the defined palette.
Spacing Consistency: Apply spacing in multiples of the 4px base unit. Use 36px to 52px for section margins and container padding. Never apply border radius; all corners remain at 0px.
Flat Design: Never apply box-shadow, gradients, or decorative effects. Hierarchy and depth are achieved through typography, color, and whitespace alone.
Layout Structure: Employ flexbox with display: flex, flex-direction: column, justify-content: center, and align-items: center for centered pages. Use single-column layouts exclusively.
Accessibility: Maintain minimum line height of 25.6px for body text (1.6x font size). Ensure text color contrast meets WCAG AA standards (charcoal on white = >12:1 contrast ratio). Touch targets minimum 44px × 44px on mobile.
Responsive Scaling: Reduce padding and margins by 25–30% on tablet and 40–50% on mobile. Keep typography sizes stable; optionally reduce large headings on very small screens only (< 480px viewport width).