{"id":"github-primer","name":"GitHub Primer","status":"scanned","medium":"web","mode":"both","one_liner":"Developer-clear with status colors — the open-source product UI lingua franca.","vibe_tags":["clear","accessible","technical"],"domains":["developer-tool","docs"],"urls":{"detail":"https://brandbook.binary.tools/brandbook/github-primer","preview":"https://brandbook.binary.tools/brandbook/github-primer/preview","meta_json":"https://brandbook.binary.tools/brandbook/github-primer/meta.json","brandbook_json":"https://brandbook.binary.tools/brandbook/github-primer/brandbook.json","theme_css":"https://brandbook.binary.tools/brandbook/github-primer/theme.css","tailwind_config":"https://brandbook.binary.tools/brandbook/github-primer/tailwind.config.js","download_zip":"https://brandbook.binary.tools/brandbook/github-primer/download.zip","api":"https://brandbook.binary.tools/api/brandbooks/github-primer"},"has_preview":true,"has_brandbook_json":true,"meta":{"id":"github-primer","name":"GitHub Primer","inspired_by":{"name":"GitHub Primer","url":"https://primer.style"},"domains":["developer-tool","docs"],"vibe_tags":["clear","accessible","technical"],"status":"scanned","version":"1.0","notes":"Inspired-by interpretation, not affiliated with or endorsed by the original brand.","style_profile":{"one_liner":"Developer-clear with status colors — the open-source product UI lingua franca.","vibe_paragraph":"Reads like documentation that respects you. Mona Sans (open-source) on white, with the famous fg/muted pattern for statuses: every alert is a soft tinted background with matching dark text. Calm utilitarian — color supports meaning, never primary emphasis. The kind of system you can ship to thousands of contributors without anyone arguing about it.","mood_adjectives":["clear","utilitarian","calm","accessible","open","functional","neutral"],"axes":{"energy":"medium","formality":"balanced","warmth":"neutral","density":"balanced","sharpness":"balanced","mode":"both"},"best_for":["Code collaboration tools, repos, CI/CD dashboards","Documentation-heavy products","Anything with strong status semantics (open/closed/done/danger)","Open-source products where contributor accessibility matters"],"avoid_for":["Lifestyle/consumer brands — too utilitarian","Children's or playful products","Anywhere you want strong visual personality"],"industries_fit":["developer-tools","code-collaboration","CI/CD","open-source","docs","DevOps"],"audience":"Open-source maintainers, dev tooling teams, technical writers","comparable_to":["GitHub","GitLab","Sourcehut","earlier versions of Gitea"],"search_keywords":["github","primer","open-source","developer","code","status","pull-request","issue","labels","accessible","functional","calm","clean"],"confidence":"scanned"}},"brandbook":{"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.5,"weight":600},"title_md":{"size_px":20,"line":1.625,"weight":600},"title_sm":{"size_px":16,"line":1.5,"weight":600},"subtitle":{"size_px":20,"line":1.625,"weight":400},"body_lg":{"size_px":16,"line":1.5,"weight":400},"body":{"size_px":14,"line":1.5,"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.5,"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)."}}}