GitHub Primer vs Mozilla Protocol
GitHub Primer / Mozilla Protocol
Both sit in Platform Screen Languages, so the question is not what they belong to but how they behave. They are reached for with some of the same intent, which is where they get confused.
GitHub Primer
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.
Mozilla Protocol
Mozilla's flexible web system puts content and global accessibility ahead of decoration while retaining a vivid open-web personality.
| GitHub Primer | Mozilla Protocol | |
|---|---|---|
| Era | 2017– | 2017– |
| Family | Platform Screen Languages | Platform Screen Languages |
| Kind | Style | Style |
| 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 | Bold black headings and broad white space / Large fields of vivid color / Flexible billboards and cards / Short copy and explicit calls to action |
| Best used for | Developer SaaS and admin tools that must hold many states and actions on one screen · Keeping information density and accessibility consistent across product teams | Open-web product marketing across languages · Balancing bright brand expression with accessible content |
| Type | Use one plain sans for body and labels; build hierarchy through weight and color. | Use short heavy headings, readable body text and room for translation expansion. |
| Composition | Separate lists, tabs and sidebars with fine rules and hold spacing to a small token set. | Separate one-message billboards from reusable card groups. |
| Material | Start from neutrals; reserve blue for links and semantic colors for success, warning and danger. | Ground the page in black and white, reserving gradients for a single focal area. |
| Caution | Adding borders and tiny controls to look like GitHub only creates a cramped admin screen when the work has no clear priority. | Spreading the Firefox gradient everywhere buries the content. Color should reinforce meaning and focus. |