{ "id": "github-primer", "name": "GitHub Primer", "version": "1.0", "tagline": "Clear, developer-first, utilitarian.", "description": "GitHub's open-source Primer design system: functional color tokens, Mona Sans variable typography, 4px spacing grid, and semantic states (accent, success, danger, attention, done, sponsors, open, closed).", "inspired_by": { "name": "GitHub Primer", "url": "https://primer.style" }, "vibe_tags": ["clear", "accessible", "developer-tool", "docs", "open-source"], "domain_hint": "developer tool / code collaboration", "identity": { "logomark": { "shape": "octocat", "description": "Octocat mascot + Invertocat mark; Octicons icon set" }, "wordmark": { "text": "GitHub", "font": "Mona Sans", "weight": 700 } }, "voice": { "principles": ["Clear, opinionated, developer-first", "Calm, utilitarian", "Color supports — never primary emphasis"], "sample_headlines": [ "The design system for GitHub.", "Build UI at GitHub with Primer Product UI.", "Create for GitHub using the Brand toolkit." ], "sample_lead": "Color is a fundamental part of Primer's visual language. In this guide you will learn about the principles, patterns, and abstractions that make up Primer's color system.", "sample_code_lang": "git", "sample_code": "git commit -m \"Fix typo in primitives table\"\ngit push origin main" }, "design_principles": [ "Functional tokens, not raw hex.", "9 themes via the same token names — never hard-code.", "Two-color pattern: emphasis (bold action) + muted (subtle background).", "4px spacing grid; 8px stack gaps." ], "color": { "primary": { "name": "primer-green", "hex": "#1f883d", "scale": { "fg": "#1a7f37", "emphasis": "#1f883d", "muted": "#dafbe1", "border_muted": "#4ac26b66" }, "notes": "Primer's primary button green. Link/accent blue #0969da carries equal brand weight." }, "semantic": { "accent_fg": "#0969da", "accent_emphasis": "#0969da", "accent_muted": "#ddf4ff", "accent_border": "#54aeff66", "success_fg": "#1a7f37", "success_emphasis": "#1f883d", "success_muted": "#dafbe1", "success_border": "#4ac26b66", "danger_fg": "#d1242f", "danger_emphasis": "#cf222e", "danger_muted": "#ffebe9", "danger_border": "#ff818266", "attention_fg": "#9a6700", "attention_emphasis": "#9a6700", "attention_muted": "#fff8c5", "attention_border": "#d4a72c66", "severe_fg": "#bc4c00", "severe_muted": "#fff1e5", "done_fg": "#8250df", "done_muted": "#fbefff", "done_border": "#c297ff66", "sponsors_fg": "#bf3989", "sponsors_muted": "#ffeff7", "sponsors_border": "#ff80c866", "open_fg": "#1a7f37", "open_emphasis": "#1f883d", "closed_fg": "#d1242f", "closed_emphasis": "#cf222e" }, "neutrals_light": { "bg_default": "#ffffff", "bg_muted": "#f6f8fa", "bg_inset": "#f6f8fa", "bg_disabled": "#eff2f5", "bg_emphasis": "#25292e", "border_default": "#d1d9e0", "border_emphasis":"#818b98", "fg_default": "#1f2328", "fg_muted": "#59636e", "fg_disabled": "#818b98", "fg_on_emphasis": "#ffffff" }, "data_vis": { "blue": "#006edb", "coral": "#d43511", "lemon": "#b88700", "lime": "#527a29", "pine": "#167e53", "plum": "#a830e8", "teal": "#179b9b" }, "page_bg_token": "neutrals_light.bg_default", "card_bg_token": "neutrals_light.bg_default", "themes_count": 9, "modes": ["light", "dark"], "notes": "Dark mode values require Storybook viewer at primer.style/primitives/storybook." }, "typography": { "fonts": { "sans": { "family": "Mona Sans VF", "fallback": "-apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Noto Sans\", Helvetica, Arial, sans-serif", "license": "OFL (open-source)", "google": true, "weights": [300, 400, 500, 600], "variable": true }, "mono": { "family": "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace", "notes": "Pure system stack — no webfont fallback" }, "display_companion": { "family": "Hubot Sans", "context": "Brand toolkit only, not Product UI" } }, "scale": { "display": { "size_px": 40, "line": 1.375, "weight": 500 }, "title_lg": { "size_px": 32, "line": 1.50, "weight": 600 }, "title_md": { "size_px": 20, "line": 1.625, "weight": 600 }, "title_sm": { "size_px": 16, "line": 1.50, "weight": 600 }, "subtitle": { "size_px": 20, "line": 1.625, "weight": 400 }, "body_lg": { "size_px": 16, "line": 1.50, "weight": 400 }, "body": { "size_px": 14, "line": 1.50, "weight": 400 }, "body_sm": { "size_px": 12, "line": 1.625, "weight": 400 }, "caption": { "size_px": 12, "line": 1.25, "weight": 400 }, "code_block": { "size_px": 13, "line": 1.50, "weight": 400, "font": "mono" }, "code_inline": { "size_em": 0.9285, "font": "mono" } } }, "tokens": { "spacing_px": [2, 4, 6, 8, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48, 64, 80, 96, 112, 128], "stack_gaps_px": { "condensed": 8, "normal": 16, "spacious": 24 }, "radius_px": { "small": 3, "medium": 6, "large": 12, "full": 9999 }, "border_widths_px": { "thin": 1, "thick": 2, "thicker": 4 }, "shadow": { "resting_xsmall": "0 1px 1px 0 #1f23280d", "resting_small": "0 1px 1px 0 #1f23280a, 0 1px 2px 0 #1f232808", "resting_medium": "0 1px 1px 0 #25292e1a, 0 3px 6px 0 #25292e1f", "floating_small": "0 0 0 1px #d1d9e040, 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f" }, "breakpoints_px": { "xsmall": 320, "small": 544, "medium": 768, "large": 1012, "xlarge": 1280, "xxlarge": 1400 } }, "components": { "button": { "variants": { "primary": { "bg": "#1f883d", "fg": "#ffffff", "border": "#1f232826", "hover_bg": "#1c8139", "active_bg": "#197935", "disabled_bg": "#95d8a6" }, "default": { "bg": "#f6f8fa", "fg": "#25292e", "border": "#d1d9e0", "hover_bg": "#eff2f5", "active_bg": "#e6eaef", "shadow": "0 1px 0 0 #1f23280a" }, "danger": { "fg_rest": "#d1242f", "bg_rest": "#f6f8fa", "hover_bg": "#cf222e", "hover_fg": "#ffffff", "active_bg": "#a40e26" }, "invisible": { "bg": "transparent", "hover_bg": "#818b981a" } }, "star_icon_color": "#eac54f" }, "input": { "bg": "#f6f8fa", "border": "#d1d9e0", "border_emphasis": "#818b98", "danger_border": "#cf222e", "success_border": "#1a7f37", "checked_bg": "#0969da" }, "card": { "bg": "#ffffff", "radius_px": 6, "border": "#d1d9e080", "shadow": "floating_small" }, "label": { "shape": "rounded", "uses": "semantic muted bg + emphasis border + emphasis fg pairs" }, "flash": { "shape": "rounded", "uses": "muted bg + matching muted border + semantic fg" }, "focus_ring": { "outline": "#0969da", "width_px": 2, "offset_px": -2 } }, "do": [ "Reference functional tokens, never raw hex.", "Pair emphasis + muted for status — never use emphasis alone for backgrounds.", "Use Mona Sans (open-source); SFMono fallback for code (no webfont)." ], "dont": [ "Don't hard-code hex values — Primer ships 9 themes.", "Don't use color as primary emphasis; type and structure first.", "Don't mix Brand Toolkit (Hubot Sans display) with Product UI surfaces." ], "a11y": { "focus_ring": { "color": "#0969da", "width_px": 2 }, "notes": "Primer is accessibility-first. Functional tokens guarantee AA contrast across all 9 themes." }, "provenance": { "scanned_from": [ "https://primer.style/product/primitives/color/", "https://primer.style/product/getting-started/foundations/color-usage/", "https://primer.style/product/primitives/typography/", "https://primer.style/product/primitives/size/" ], "scanned_at": "2026-05-25", "confidence": "high", "notes": "All hex values quoted directly from published functional token tables. Light-mode only; dark-mode tokens require Storybook viewer. Spacing is 4px-based (not 8px)." } }