Atlassian Design System vs GitHub Primer
Atlassian Design System / GitHub Primer
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.
Atlassian Design System
A system that translates the complexity of Jira and Confluence into shared tokens, content rules, spacing, grids and components. Consistency builds trust while keeping large sets of issues, documents and states navigable.
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.
| Atlassian Design System | GitHub Primer | |
|---|---|---|
| Era | 2012– | 2017– |
| Family | Platform Screen Languages | Platform Screen Languages |
| Kind | Style | Style |
| Cues | White and pale gray layers with blue primary actions / Rounded cards and lozenge-shaped status labels / Clear divisions among sidebar, table and detail pane / Color, spacing, radius and elevation controlled by tokens | 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 |
| Best used for | Work-management products where people move repeatedly between lists and details · Keeping a trusted family resemblance across products without hiding their complexity | Developer SaaS and admin tools that must hold many states and actions on one screen · Keeping information density and accessibility consistent across product teams |
| Type | Fix the steps for headings, body and labels; keep status names short inside lozenges. | Use one plain sans for body and labels; build hierarchy through weight and color. |
| Composition | Keep navigation, list and detail roles stable; use token multiples for spacing. | Separate lists, tabs and sidebars with fine rules and hold spacing to a small token set. |
| Material | Use white and pale gray as the base, blue for primary actions and one semantic meaning per status color. | Start from neutrals; reserve blue for links and semantic colors for success, warning and danger. |
| Caution | Too many cards and status labels give every component equal force and hide the work that matters next. | Adding borders and tiny controls to look like GitHub only creates a cramped admin screen when the work has no clear priority. |