{"id":"github-primer","no":543,"name":"GitHub Primer","ja":"GitHub Primer","era":"2017–","family":"プラットフォームの画面言語","kind":"スタイル","collection":"Dictionary expansion 27","addedAt":"2026-08-22","source":{"title":"GitHub Primer — Product","url":"https://primer.style/product/getting-started/"},"reference":{"status":"verified","pageUrl":"https://primer.style/product/getting-started/","credit":"GitHub Primer — Product"},"essence":"GitHubの高密度な開発画面を、色・文字・アイコン・間隔・部品の規則として共有するデザインシステム。装飾より作業の流れを優先し、小さな面に状態と操作を多く載せながら、アクセシビリティとレスポンシブ対応を崩さない。","cues":["無彩色の面に青いリンクと状態色を絞って置く","Octiconsと短いラベルで操作を詰める","細い境界線でリスト、タブ、サイドバーを分ける","密度が高くても見出しと間隔の段階が一定"],"intents":["技術","信頼","静けさ"],"works":["開発者向けSaaSや管理画面で、多数の状態と操作を一画面に収めるとき","複数チームが同じ部品を使いながら、情報密度とアクセシビリティを揃えるとき"],"recipe":{"type":"本文とラベルは平明なサンセリフに統一し、太さと色で階層を作る。","layout":"リスト、タブ、サイドバーを細い罫線で区切り、余白の単位を少数に固定する。","material":"無彩色を地にして、リンクの青と成功・警告・危険の意味色だけを強く使う。"},"avoid":"GitHubらしさを出そうと罫線と小部品を増やすだけでは、操作の優先順位が消えて窮屈な管理画面になる。","colors":["#F6F8FA","#0969DA","#24292F"],"motif":"ui","pair":["swiss","govuk-design-system"],"study":["PrimerのProduct principles","Octiconsと意味の対応","密度を保ったレスポンシブ設計"],"en":{"essence":"GitHub's design system for turning dense development workflows into shared rules for color, type, icons, spacing and components. It favors flow over decoration, keeping many states and actions in a small area without giving up accessibility or responsive behavior.","cues":["Neutral surfaces with blue links and restrained status colors","Octicons paired with short action labels","Thin borders separating lists, tabs and sidebars","Consistent steps of type and spacing even at high density"],"works":["Developer SaaS and admin tools that must hold many states and actions on one screen","Keeping information density and accessibility consistent across product teams"],"recipe":{"type":"Use one plain sans for body and labels; build hierarchy through weight and color.","layout":"Separate lists, tabs and sidebars with fine rules and hold spacing to a small token set.","material":"Start from neutrals; reserve blue for links and semantic colors for success, warning and danger."},"avoid":"Adding borders and tiny controls to look like GitHub only creates a cramped admin screen when the work has no clear priority.","study":["Primer product principles","Octicons and semantic meaning","Responsive design at high density"]},"usage":{"license":"CC-BY-4.0","licenseName":"Creative Commons Attribution 4.0 International","licenseUrl":"https://creativecommons.org/licenses/by/4.0/","attribution":"IndexStyle — https://indexstyle.org","attributionUrl":"https://indexstyle.org","scope":"Original IndexStyle text and structured data. Reference images, quoted works, and third-party material are excluded and retain their own rights."}}