DESIGN.md · explainx registry
GitHub (Primer)
Primer is the open-source design system that powers GitHub. It is built to be accessible, consistent, and efficient, focusing on developer productivity and complex information density.
Design System#design#ui#ux#template
DESIGN.md (markdown body)
| name | GitHub (Primer) |
| colors | background: "#ffffff" foreground: "#1f2328" brand: "#0969da" # accent.fg muted: "#636c76" # fg.muted border: "#d0d7de" # border.default card: "#ffffff" accent: "#0969da" success: "#1a7f37" attention: "#9a6700" danger: "#d1242f" dark: background: "#0d1117" # canvas.default foreground: "#e6edf3" # fg.default muted: "#848d97" # fg.muted border: "#30363d" # border.default card: "#161b22" # canvas.overlay accent: "#2f81f7" # accent.fg success: "#3fb950" attention: "#d29922" danger: "#f85149" |
| typography | fontFamily: sans: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'" mono: "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace" body: fontFamily: sans fontSize: "14px" lineHeight: "1.5" code: fontFamily: mono fontSize: "12px" |
| rounded | default: "6px" md: "6px" lg: "10px" |
Design System: GitHub (Primer)
Overview
Primer is the open-source design system that powers GitHub. It is built to be accessible, consistent, and efficient, focusing on developer productivity and complex information density.
Design Philosophy
- Productive Complexity: Designed to handle high-density information (code, timelines, grids) without overwhelming the user.
- Accessibility-First: Color scales and contrast ratios are strictly enforced to meet WCAG standards.
- Pragmatic Visuals: Uses system fonts and minimal decorative elements to maximize performance and platform familiarity.
- Consistency through Primitives: Relying on a robust set of "primitives" (spacing, color, typography) to ensure a cohesive experience across all GitHub features.
Colors
- Functional Palettes: Colors are assigned "functional" roles (e.g.,
accent.fg,success.fg,danger.fg) rather than just being chosen by hue. - The GitHub Blue:
#0969da(Light) and#2f81f7(Dark) are the core interactive accents used for links and primary actions. - Canvas System: Uses a layered canvas approach (
default,overlay,inset,subtle) to create depth without relying on heavy shadows.
Typography
- System Stack: Prioritizes the user's operating system fonts for maximum legibility and zero-latency loading.
- Code as a First-Class Citizen: Monospace fonts are treated with equal importance to sans-serif fonts, ensuring code readability is never compromised.
- Scale: Uses a 14px base for body text to balance information density with readability.
Components
- The "Box": The fundamental layout unit. Often featured with a 1px border (
#d0d7de) and6pxrounding. - Buttons: Available in "Default," "Primary," and "Danger" variants, each with specific hover and active states defined by functional tokens.
- Octicons: GitHub's bespoke icon set, used to provide semantic meaning and visual cues.
- Timelines: A specific pattern used for activity feeds and pull request conversations, emphasizing sequential flow.
Visual Effects
- Subtle Depth: Uses thin borders and very soft shadows (
0 1px 0 rgba(27,31,35,0.04)) rather than large drop shadows. - High Contrast Focus: Focus states are highly visible, usually using a 2px blue ring.
- Hover States: Most interactive elements use a subtle background color shift (e.g.,
bgColor-muted) to indicate interactivity.
Usage
- Copy DESIGN.md into your project or paste it into your IDE agent chat.
- Ask your assistant to follow the tokens for color, typography, spacing, and component styling.
- When collaborating, share the file directly—or tap “Copy page link” below so teammates open the same snapshot.
Common questions
- What is GitHub (Primer) on explainx.ai?
- Primer is the open-source design system that powers GitHub. It is built to be accessible, consistent, and efficient, focusing on developer productivity and complex information density. Listed under category “Design System”. Explainx.ai mirrors the full DESIGN.md document so assistants can cite stable tokens and prose in one place.
- What is DESIGN.md?
- DESIGN.md blends YAML design tokens—colors, typography, spacing, radii—with markdown that explains intent. Google documents this pattern for agent-driven UI work under Stitch (stitch.withgoogle.com).
- How do I use this with ChatGPT, Cursor, Claude Code, or another IDE agent?
- Paste the DESIGN.md into your repo root or attach it to the agent conversation, then ask explicitly for layouts, spacing, palette, type scale, and component tone that follow the document. Refresh from this listing when upstream authors publish changes.
- Where is the source repo?
- Maintainers link to github.com/whyashthakker/design-md-templates-skills. Community listings on explainx.ai may reference popular aesthetic names for inspiration; that does not imply official endorsement by any trademark holder.
- How current is this DESIGN.md?
- Explainx snapshots the file at import time. Recorded last update on this listing: May 8, 2026.
- Need a fresh DESIGN.md from scratch?
- Use the ExplainX DESIGN.md generator to describe your product and audience; it returns Stitch-style YAML plus narrative guidance you can publish or submit to the registry afterward.
Still exploring the format? Browse the full DESIGN.md registry or draft a new system with our DESIGN.md generator.
Community listing for AI design workflows—not necessarily affiliated with any brand referenced in the name or summary. For context on the format, see Google Stitch.
List Your Design.md
Share your design system with AI agents worldwide