Design system

Primer

GitHub's design system — built with @primer/react, @primer/octicons-react, and @primer/primitives design tokens. This starter wires up the theme, tokens, and fonts so every screen inherits the Primer look.

Color

Semantic role tokens from @primer/primitives. Never hardcode hex values.
Accent
accent-emphasis
Success
success-emphasis
Attention
attention-emphasis
Severe
severe-emphasis
Danger
danger-emphasis
Done
done-emphasis
Sponsors
sponsors-emphasis
Neutral
neutral-emphasis
Default
Muted
Inset
Emphasis

Typography

Headings and body text scale via Primer's type tokens and the Heading / Text components.

Display heading

Heading · variant="large"

Section heading

Heading · variant="medium"

Subsection heading

Heading · variant="small"
Large body — used for emphasis and intros.Medium body — the default reading size for product UI content.Small body — captions and secondary metadata.

Components

Signature Primer controls in their real variants.
Buttons
Labels & counters
enhancementapprovedneeds reviewbugresolved
main
 (12) (3)

Composition

A realistic form built from Primer primitives.

Create a new repository

A repository contains all project files and revision history.
You are creating this repository in your personal account.
Great repository names are short and memorable.
This is where you can write a long description for your project.