GitHub
A developer-native canvas built around the Primer design system — near-black (#0d1117) in dark mode, white (#ffffff) in light — with GitHub's signature accent blue (#0969DA) for interactive states and a green (#1a7f37) used meaningfully for open issues and successful builds. The system reads as technical documentation made beautiful: monospace code blocks, tight information density, and zero decorative chrome. Mona Sans, GitHub's custom variable font, brings humanity to the heading hierarchy while preserving the utilitarian character of a tool built by engineers for engineers.
Color Tokens
1. Visual Theme & Atmosphere
GitHub's Primer system is one of the most studied design systems in open source. The interface prioritizes information over aesthetics — repositories, issues, and code are the content; the UI is the transparent container. Dark mode (#0d1117) is the preferred developer context, borrowing from terminal tradition. Light mode is clean and document-like. The three semantic colors — green (open), red (closed), purple (merged) — form a universally understood status language across the platform.
2. Color System
GitHub maintains full light/dark parity through the Primer color system:
- Light canvas: #ffffff / #F6F8FA (alt surfaces)
- Dark canvas: #0d1117 / #161B22 (elevated panels)
- Accent blue: #0969DA — the primary interactive color for links, buttons, focus rings
- Success/Open: #1a7f37 — open PRs, successful CI checks
- Danger/Closed: #CF222E — closed issues, failed builds
- Merged: #8250DF — the unique purple for merged pull requests
- Muted text: #636C76 (light) / #8B949E (dark)
3. Typography
Mona Sans is GitHub's variable font, used on marketing and homepage at heavy weights (800). Product UI uses the system stack (-apple-system, Segoe UI) at 14px body. Code is always set in ui-monospace/SFMono-Regular. The typographic hierarchy is functional rather than expressive — clear sizing and weight contrast without decorative lettering.
4. Components & Patterns
- Repository cards: Bordered containers, name in blue link weight, description muted, language dot + star count in footer
- Issues/PRs: Green/red/purple status badges always lead the list item
- Code blocks: Monospace, #F6F8FA background, line numbers optional, syntax highlighted
- Buttons: Primary solid blue, secondary outlined gray, danger outlined red
- Navigation: Horizontal tab row with underline indicator, very thin 1px border-bottom
- Labels: Pill-shaped, user-defined colors, small font size
5. Spacing & Layout
Container max-width 1280px, centered. Repository layout: 260px sidebar (file tree/repo meta), flexible content area. Issues list uses a table-like approach: full-width rows, 1px border between. Tight vertical density — GitHub respects that developers want to see more, not fewer, items per screen.
6. Motion & Interaction
Restrained. Hover states change background color (not scale or transform). Page transitions are browser-native. The contribution graph animates on first load. Tooltips appear with 100ms delay, no animation. The focus is on data, not delight.
Use this design
Copy the DESIGN.md and paste it at the top of your AI prompt.
Format for