Irodori彩り

Primer

20 official semantic tokens

20 colors

About Primer

Primer, GitHub’s design system, structures color as functional primitives: canvas, foreground, border, and accent. Each splits into default, muted, and emphasis roles.

How to use

Reference CSS variables like --fgColor-default or --bgColor-accent-emphasis. Primer’s primitives keep meaning stable across light and dark themes.

Official documentation

Canvas

--color-bgColor-default

Page background

Canvas inset

--color-bgColor-inset

Recessed wells and code blocks

Neutral muted

--color-bgColor-neutral-muted

Muted section background

Foreground

--color-fgColor-default

Default text

Foreground muted

--color-fgColor-muted

Secondary text

Foreground disabled

--color-fgColor-disabled

Placeholder text

Foreground on emphasis

--color-fgColor-onEmphasis

Text on emphasis backgrounds

Accent

--color-bgColor-accent-emphasis

Links, selected nav items

Accent foreground

--color-fgColor-accent

Link text color

Accent muted

--color-bgColor-accent-muted

Hover states and inline backgrounds

Success

--color-bgColor-success-emphasis

Open states and confirm buttons

Attention

--color-bgColor-attention-emphasis

Caution highlights

Severe

--color-bgColor-severe-emphasis

Urgent warnings

Danger

--color-bgColor-danger-emphasis

Closed states and destructive actions

Done

--color-bgColor-done-emphasis

Merged / complete states

Sponsors

--color-bgColor-sponsors-emphasis

Sponsor hearts and buttons

Neutral emphasis

--color-bgColor-neutral-emphasis

Gray buttons and counters

Border default

--color-border-default

Primary borders

Border muted

--color-border-muted

Secondary borders

Border emphasis

--color-border-emphasis

Strong contrast borders

Source: Primer · @primer/primitives 11.10.0 light