Primer Design System

GitHub's open-source design system for consistent, accessible web interfaces.

Product Overview

Primer is GitHub's official open-source design system, providing reusable UI components, patterns, and guidelines to build consistent, accessible, and performant web experiences across GitHub products and third-party integrations. It includes Primer React (components), Primer Primitives (low-level tokens), and Primer CSS for flexible implementation, with a focus on developer productivity, modularity, and GitHub's brand language. Component Library: Reusable elements like buttons, forms, navigation, avatars, and markdown with variants for themes and states. Design Tokens: Semantic colors, typography, spacing, motion, and icons for unified styling. Accessibility: WCAG compliance with ARIA support and inclusive patterns. Tools: Figma kit for prototyping; React and CSS libraries for implementation; Storybook for exploration.

Best For

Teams building scalable, consistent digital products.

Key Features

Component Library: Reusable elements like buttons, forms, navigation, avatars, and markdown with variants for themes and states.
Design Tokens: Semantic colors, typography, spacing, motion, and icons for unified styling.
Accessibility: WCAG compliance with ARIA support and inclusive patterns.
Tools: Figma kit for prototyping; React and CSS libraries for implementation; Storybook for exploration.

Pros

+Open source
+Extensive icon library
+Color palette generation
+Export to CSS/design tools

Cons

-Adoption requires team alignment
-Customization can be complex

/// SPECS

Pricing:
Free
Platform:
Browser

ASSETS_DIRECTORY

figma

/// Similar Tools

Palmetto Design System

open-source design system for consistent, accessible solar energy product interfaces.

Paste

Twilio's open-source design system for consistent, accessible communication product interfaces.

Pando Design System

Pluralsight's open-source design system for consistent, accessible web interfaces.

Porsche Design System

open-source framework for consistent, premium automotive digital interfaces.

Radius Design System

Rangle's meta-framework accelerating custom design system creation with tools and kits.

Salt Design System

J.P. Morgan's open-source framework for accessible, customizable financial interfaces.

Slack Block Kit

modular UI framework for building rich, interactive messages and apps in Slack.

SmartHR UI

open-source React component library for consistent, accessible HR platform interfaces.

U.S. Web Design System

Web Design System: official U.S. government framework for consistent, accessible public digital services.

Paradigm Design System

Mail.ru/VK's open-source framework for consistent web interfaces.