GitHub Primer vs Swiss
GitHub Primer / スイス・スタイル
GitHub Primer comes from Platform Screen Languages and Swiss from Functionalism. 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.
Swiss
.jpg)
Puts order front and center and makes the information itself the protagonist.
| GitHub Primer | Swiss | |
|---|---|---|
| Era | 2017– | 1950s– |
| Family | Platform Screen Languages | Functionalism |
| 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 | Strict grid / Sans-serif type / Asymmetry / Objective photography |
| 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 | Making complex information fast to read · Giving an organization rationality and transparency |
| Type | Use one plain sans for body and labels; build hierarchy through weight and color. | Neutral sans-serif; be bold with size contrast |
| Composition | Separate lists, tabs and sidebars with fine rules and hold spacing to a small token set. | 12-column grid, left-aligned, asymmetric |
| Material | Start from neutrals; reserve blue for links and semantic colors for success, warning and danger. | White space and objective photographs; almost no ornament |
| Caution | Adding borders and tiny controls to look like GitHub only creates a cramped admin screen when the work has no clear priority. | Too much tidiness turns anonymous. Keep one strong jump in scale. |