Community / Stoaken Curated

Stoaken Curated

GitHub Primer

GitHub’s design system primitives: the light and dark themes’ functional colour tokens, spacing, sizes, radii and type, from @primer/primitives. Brought into Stoaken by the Stoaken team from GitHub’s published open-source packages, unchanged, under its licence. Stoaken isn’t affiliated with or endorsed by GitHub.

Developer toolsWebDark modeAccessibleOpen sourceReactSemantic tokensComprehensive
0 likes1 view1,013 tokens2 modes
color.ansi-redcolor.ansi-bluecolor.ansi-cyancolor.ansi-graycolor.ansi-blackcolor.ansi-greencolor.ansi-whitecolor.ansi-yellowcolor.ansi-magentacolor.card-bgColorcolor.fgColor-donecolor.fgColor-linkcolor.fgColor-opencolor.bgColor-blackcolor.bgColor-insetcolor.bgColor-muted
Mode

Colour

915 colours in 22 groups. Hover a swatch for its name.

color.ansi 17

  • red#cf222e
  • blue#0969da
  • cyan#1b7c83
  • gray#59636e
  • black#1f2328
  • green#116329
  • white#59636e
  • yellow#4d2d00
  • magenta#8250df
  • redBright#a40e26
  • blueBright#218bff
  • cyanBright#3192aa
  • blackBright#393f46
  • greenBright#1a7f37
  • whiteBright#818b98
  • yellowBright#633c01
  • magentaBright#a475f9

color.fg 20

  • done#8250df
  • link#0969da
  • open#1a7f37
  • black#1f2328
  • draft#59636e
  • muted#59636e
  • white#ffffff
  • accent#0969da
  • closed#d1242f
  • danger#d1242f
  • severe#bc4c00
  • upsell#8250df
  • default#1f2328
  • neutral#59636e
  • success#1a7f37
  • disabled#818b98
  • sponsors#bf3989
  • attention#9a6700
  • onInverse#ffffff
  • onEmphasis#ffffff

color.bg 33

  • black#1f2328
  • inset#f6f8fa
  • muted#f6f8fa
  • white#ffffff
  • default#ffffff
  • inverse#25292e
  • disabled#eff2f5
  • emphasis#25292e
  • done-muted#fbefff
  • open-muted#dafbe1
  • draft-muted#818b981f
  • transparent#ffffff00
  • accent-muted#ddf4ff
  • closed-muted#ffebe9
  • danger-muted#ffebe9
  • severe-muted#fff1e5
  • upsell-muted#fbefff
  • done-emphasis#8250df
  • neutral-muted#818b981f
  • open-emphasis#1f883d
  • success-muted#dafbe1
  • draft-emphasis#59636e
  • sponsors-muted#ffeff7
  • accent-emphasis#0969da
  • attention-muted#fff8c5
  • closed-emphasis#cf222e
  • danger-emphasis#cf222e
  • severe-emphasis#bc4c00
  • upsell-emphasis#8250df
  • neutral-emphasis#59636e

color.color 47

  • ansi-red#cf222e
  • ansi-blue#0969da
  • ansi-cyan#1b7c83
  • ansi-gray#59636e
  • ansi-black#1f2328
  • ansi-green#116329
  • ansi-white#59636e
  • ansi-yellow#4d2d00
  • ansi-magenta#8250df
  • ansi-red-bright#a40e26
  • ansi-blue-bright#218bff
  • ansi-cyan-bright#3192aa
  • ansi-black-bright#393f46
  • ansi-green-bright#1a7f37
  • ansi-white-bright#818b98
  • ansi-yellow-bright#633c01
  • ansi-magenta-bright#a475f9
  • prettylights-syntax-entity#6639ba
  • prettylights-syntax-string#0a3069
  • prettylights-syntax-comment#59636e
  • prettylights-syntax-keyword#cf222e
  • prettylights-syntax-constant#0550ae
  • prettylights-syntax-variable#953800
  • prettylights-syntax-entity-tag#0550ae
  • prettylights-syntax-markup-bold#1f2328
  • prettylights-syntax-markup-list#3b2300
  • prettylights-syntax-markup-italic#1f2328
  • prettylights-syntax-string-regexp#116329
  • prettylights-syntax-markup-heading#0550ae
  • prettylights-syntax-meta-diff-range#8250df

color.border 30

  • muted#d1d9e0b3
  • default#d1d9e0
  • disabled#818b981a
  • emphasis#818b98
  • done-muted#c297ff66
  • open-muted#4ac26b66
  • draft-muted#d1d9e0b3
  • translucent#1f232826
  • transparent#ffffff00
  • accent-muted#54aeff66
  • closed-muted#ff818266
  • danger-muted#ff818266
  • severe-muted#fb8f4466
  • upsell-muted#c297ff66
  • done-emphasis#8250df
  • neutral-muted#d1d9e0b3
  • open-emphasis#1a7f37
  • success-muted#4ac26b66
  • draft-emphasis#59636e
  • sponsors-muted#ff80c866
  • accent-emphasis#0969da
  • attention-muted#d4a72c66
  • closed-emphasis#cf222e
  • danger-emphasis#cf222e
  • severe-emphasis#bc4c00
  • upsell-emphasis#8250df
  • neutral-emphasis#59636e
  • success-emphasis#1a7f37
  • sponsors-emphasis#bf3989
  • attention-emphasis#9a6700

color.code 19

  • bgColor#ffffff
  • fgColor#1f2328
  • lines-bgColor#ffffff
  • cursor-fgColor#1f2328
  • gutters-bgColor#ffffff
  • selection-bgColor#54aeff66
  • activeline-bgColor#818b981f
  • lineNumber-fgColor#59636e
  • syntax-fgColor-entity#8250df
  • syntax-fgColor-string#0a3069
  • syntax-fgColor-comment#1f2328
  • syntax-fgColor-keyword#cf222e
  • syntax-fgColor-storage#cf222e
  • syntax-fgColor-support#0550ae
  • matchingBracket-fgColor#1f2328
  • syntax-fgColor-constant#0550ae
  • syntax-fgColor-variable#953800
  • gutterMarker-fgColor-muted#59636e
  • gutterMarker-fgColor-default#ffffff

color.display 285

  • red-fgColor#c50d28
  • red-scale-0#ffe2e0
  • red-scale-1#fecdcd
  • red-scale-2#fda5a7
  • red-scale-3#fb8389
  • red-scale-4#f85461
  • red-scale-5#df0c24
  • red-scale-6#c50d28
  • red-scale-7#a60c29
  • red-scale-8#880c27
  • red-scale-9#610a20
  • blue-fgColor#005fcc
  • blue-scale-0#d1f0ff
  • blue-scale-1#ade1ff
  • blue-scale-2#75c8ff
  • blue-scale-3#47afff
  • blue-scale-4#0f8fff
  • blue-scale-5#006edb
  • blue-scale-6#005fcc
  • blue-scale-7#004db3
  • blue-scale-8#003d99
  • blue-scale-9#002b75
  • cyan-fgColor#006a80
  • cyan-scale-0#bdf4ff
  • cyan-scale-1#7ae9ff
  • cyan-scale-2#00d0fa
  • cyan-scale-3#00b7db
  • cyan-scale-4#0099b8
  • cyan-scale-5#007b94
  • cyan-scale-6#006a80

color.control 52

  • bgColor-rest#f6f8fa
  • fgColor-rest#25292e
  • bgColor-hover#eff2f5
  • bgColor-active#e6eaef
  • iconColor-rest#59636e
  • bgColor-disabled#eff2f5
  • bgColor-selected#f6f8fa
  • borderColor-rest#d1d9e0
  • fgColor-disabled#818b98
  • knob-bgColor-rest#ffffff
  • track-bgColor-rest#e6eaef
  • track-fgColor-rest#59636e
  • borderColor-danger#cf222e
  • track-bgColor-hover#e0e6eb
  • borderColor-success#1a7f37
  • borderColor-warning#9a6700
  • danger-fgColor-rest#d1242f
  • fgColor-placeholder#59636e
  • knob-bgColor-checked#ffffff
  • track-bgColor-active#dae0e7
  • borderColor-disabled#818b981a
  • borderColor-emphasis#818b98
  • borderColor-selected#f6f8fa
  • checked-bgColor-rest#0969da
  • checked-fgColor-rest#ffffff
  • danger-bgColor-hover#ffebe9
  • danger-fgColor-hover#d1242f
  • knob-bgColor-disabled#eff2f5
  • knob-borderColor-rest#d1d9e0
  • checked-bgColor-hover#0860ca

color.data 34

  • red-color-muted#ffe2e0
  • blue-color-muted#d1f0ff
  • gray-color-muted#e8ecf2
  • lime-color-muted#e3f2b5
  • pine-color-muted#bff8db
  • pink-color-muted#ffe5f1
  • plum-color-muted#f8e5ff
  • teal-color-muted#c7f5ef
  • brown-color-muted#eeeae2
  • coral-color-muted#ffe5db
  • green-color-muted#caf7ca
  • lemon-color-muted#f7eea1
  • olive-color-muted#f0f0ad
  • auburn-color-muted#f2e9e9
  • orange-color-muted#ffe7d1
  • purple-color-muted#f1e5ff
  • red-color-emphasis#df0c24
  • yellow-color-muted#ffec9e
  • blue-color-emphasis#006edb
  • gray-color-emphasis#808fa3
  • lime-color-emphasis#527a29
  • pine-color-emphasis#167e53
  • pink-color-emphasis#ce2c85
  • plum-color-emphasis#a830e8
  • teal-color-emphasis#179b9b
  • brown-color-emphasis#856d4c
  • coral-color-emphasis#d43511
  • green-color-emphasis#30a147
  • lemon-color-emphasis#866e04
  • olive-color-emphasis#64762d

color.button 114

  • star-iconColor#eac54f
  • inactive-bgColor#e6eaef
  • inactive-fgColor#59636e
  • danger-bgColor-rest#f6f8fa
  • danger-fgColor-rest#d1242f
  • danger-bgColor-hover#cf222e
  • danger-fgColor-hover#ffffff
  • default-bgColor-rest#f6f8fa
  • default-fgColor-rest#25292e
  • outline-bgColor-rest#f6f8fa
  • outline-fgColor-rest#0969da
  • primary-bgColor-rest#1f883d
  • primary-fgColor-rest#ffffff
  • danger-bgColor-active#a40e26
  • danger-fgColor-active#ffffff
  • danger-iconColor-rest#d1242f
  • default-bgColor-hover#eff2f5
  • outline-bgColor-hover#0969da
  • outline-fgColor-hover#ffffff
  • primary-bgColor-hover#1c8139
  • danger-iconColor-hover#ffffff
  • default-bgColor-active#e6eaef
  • invisible-bgColor-rest#ffffff00
  • invisible-fgColor-rest#25292e
  • outline-bgColor-active#0757ba
  • outline-fgColor-active#ffffff
  • primary-bgColor-active#197935
  • primary-iconColor-rest#ffffffcc
  • danger-bgColor-disabled#eff2f5
  • danger-borderColor-rest#d1d9e0

color.label 133

  • red-borderColor#ffffff00
  • blue-borderColor#ffffff00
  • cyan-borderColor#ffffff00
  • gray-borderColor#ffffff00
  • lime-borderColor#ffffff00
  • pine-borderColor#ffffff00
  • pink-borderColor#ffffff00
  • plum-borderColor#ffffff00
  • red-bgColor-rest#ffe2e0
  • red-fgColor-rest#c50d28
  • teal-borderColor#ffffff00
  • blue-bgColor-rest#d1f0ff
  • blue-fgColor-rest#005fcc
  • brown-borderColor#ffffff00
  • coral-borderColor#ffffff00
  • cyan-bgColor-rest#bdf4ff
  • cyan-fgColor-rest#006a80
  • gray-bgColor-rest#e8ecf2
  • gray-fgColor-rest#5c6570
  • green-borderColor#ffffff00
  • lemon-borderColor#ffffff00
  • lime-bgColor-rest#e3f2b5
  • lime-fgColor-rest#476c28
  • olive-borderColor#ffffff00
  • pine-bgColor-rest#bff8db
  • pine-fgColor-rest#156f4b
  • pink-bgColor-rest#ffe5f1
  • pink-fgColor-rest#b12f79
  • plum-bgColor-rest#f8e5ff
  • plum-fgColor-rest#961edc

color.diff 21

  • emptyNum-bgColor#f6f8fa
  • hunkLine-bgColor#ddf4ff
  • hunkLine-fgColor#59636e
  • emptyLine-bgColor#f6f8fa
  • expander-iconColor#59636e
  • additionNum-bgColor#aceebb
  • additionNum-fgColor#1f2328
  • deletionNum-bgColor#ffcecb
  • deletionNum-fgColor#1f2328
  • additionLine-bgColor#dafbe1
  • additionLine-fgColor#1f2328
  • additionWord-bgColor#aceebb
  • additionWord-fgColor#1f2328
  • deletionLine-bgColor#ffebe9
  • deletionLine-fgColor#1f2328
  • deletionWord-bgColor#ffcecb
  • deletionWord-fgColor#1f2328
  • hunkNum-bgColor-rest#b6e3ff
  • hunkNum-fgColor-rest#1f2328
  • hunkNum-bgColor-hover#0969da
  • hunkNum-fgColor-hover#ffffff

color.prettylights 42

  • entity#6639ba
  • string#0a3069
  • comment#59636e
  • keyword#cf222e
  • constant#0550ae
  • variable#953800
  • entityTag#0550ae
  • entity-tag#0550ae
  • markup-bold#1f2328
  • markup-list#3b2300
  • stringRegexp#116329
  • markup-italic#1f2328
  • metaDiffRange#8250df
  • string-regexp#116329
  • markup-heading#0550ae
  • meta-diff-range#8250df
  • carriageReturn-bg#cf222e
  • invalidIllegal-bg#ffebe9
  • markup-changed-bg#ffd8b5
  • markup-deleted-bg#ffebe9
  • markup-ignored-bg#0550ae
  • carriage-return-bg#cf222e
  • invalid-illegal-bg#ffebe9
  • markup-inserted-bg#dafbe1
  • carriageReturn-text#f6f8fa
  • invalidIllegal-text#d1242f
  • markup-changed-text#953800
  • markup-deleted-text#82071e
  • markup-ignored-text#d1d9e0
  • carriage-return-text#f6f8fa

color.contribution 18

  • winter-bgColor-1#b6e3ff
  • winter-bgColor-2#54aeff
  • winter-bgColor-3#0969da
  • winter-bgColor-4#0a3069
  • default-bgColor-0#eff2f5
  • default-bgColor-1#aceebb
  • default-bgColor-2#4ac26b
  • default-bgColor-3#2da44e
  • default-bgColor-4#116329
  • halloween-bgColor-1#f0db3d
  • halloween-bgColor-2#ffd642
  • halloween-bgColor-3#f68c41
  • halloween-bgColor-4#1f2328
  • default-borderColor-0#1f23280d
  • default-borderColor-1#1f23280d
  • default-borderColor-2#1f23280d
  • default-borderColor-3#1f23280d
  • default-borderColor-4#1f23280d

More colours 17

  • card-bgColor#ffffff
  • tooltip-bgColor#25292e
  • tooltip-fgColor#ffffff
  • dashboard-bgColor#ffffff
  • selection-bgColor#0969da33
  • focus-outlineColor#0969da
  • focus-outline-color#0969da
  • menu-bgColor-active#ffffff00
  • page-header-bgColor#f6f8fa
  • topicTag-borderColor#ffffff00
  • timelineBadge-bgColor#f6f8fa
  • selectMenu-borderColor#ffffff00
  • selectMenu-bgColor-active#b6e3ff
  • skeletonLoader-bgColor#818b981a
  • sideNav-bgColor-selected#ffffff
  • highlight-neutral-bgColor#fff8c5
  • treeViewItem-leadingVisual-iconColor-rest#54aeff

color.avatar 4

  • bgColor#ffffff
  • borderColor#1f232826
  • stack-fade-bgColor-muted#dae0e7
  • stack-fade-bgColor-default#c8d1da

color.progress 10

  • bgColor-done#8250df
  • track-bgColor#d1d9e0
  • bgColor-accent#0969da
  • bgColor-danger#cf222e
  • bgColor-severe#bc4c00
  • bgColor-neutral#59636e
  • bgColor-success#1f883d
  • bgColor-sponsors#bf3989
  • bgColor-attention#9a6700
  • track-borderColor#ffffff00

color.header 6

  • bgColor#25292e
  • fgColor-logo#ffffff
  • search-bgColor#25292e
  • fgColor-default#ffffffb3
  • search-borderColor#818b98
  • borderColor-divider#818b98

color.underline 3

  • iconColor-rest#59636e
  • borderColor-hover#d1d9e0b3
  • borderColor-active#fd8c73

color.overlay 3

  • bgColor#ffffff
  • borderColor#d1d9e080
  • backdrop-bgColor#c8d1da66

color.counter 3

  • borderColor#ffffff00
  • bgColor-muted#818b981f
  • bgColor-emphasis#59636e

color.reaction 4

  • bgColor-rest#ddf4ff
  • fgColor-rest#0969da
  • bgColor-hover#caecff
  • fgColor-hover#0550ae

Spacing, type and more

98 tokens in color-scheme: light, drawn as what they are.

size 64

Spacing

  • offset0.25rem
  • large-gap0.5rem
  • small-gap0.25rem
  • gap-normal1rem
  • large-size2.5rem
  • medium-gap0.5rem
  • size-large4rem
  • size-small1rem
  • small-size1.75rem
  • xlarge-gap0.5rem
  • xsmall-gap0.25rem
  • medium-size2rem
  • size-medium2rem
  • width-large40rem
  • width-small20rem
  • xlarge-size3rem
  • xsmall-size1.5rem
  • gap-spacious1.5rem
  • height-large27rem
  • height-small16rem
  • width-medium30rem
  • width-xlarge60rem
  • width-xsmall12rem
  • gap-condensed0.5rem
  • height-medium20rem
  • height-xlarge37.5rem
  • large-gap-auto0.5rem
  • minTarget-fine1rem
  • padding-normal1rem

Corners

  • borderRadius0.375rem

radius 5

  • full624.9375rem
  • large0.75rem
  • small0.1875rem
  • medium0.375rem
  • default0.375rem

typography 23

Sizes

  • Aacaption-size0.75rem
  • Aadisplay-size2.5rem
  • Aasubtitle-size1.25rem
  • AacodeBlock-size0.8125rem
  • Aabody-size-large1rem
  • Aabody-size-small0.75rem
  • Aabody-size-medium0.875rem
  • Aatitle-size-large2rem
  • Aatitle-size-small1rem
  • Aatitle-size-medium1.25rem

Typefaces

  • The quick brown foxsystem · Mona Sans VF
  • The quick brown foxmonospace · ui-monospace
  • The quick brown foxsansSerif · Mona Sans VF
  • The quick brown foxsansSerifDisplay · Mona Sans VF

Weights

  • Aabody-weight400
  • Aacaption-weight400
  • Aadisplay-weight500
  • Aasubtitle-weight400
  • AacodeBlock-weight400
  • AacodeInline-weight400
  • Aatitle-weight-large600
  • Aatitle-weight-small600
  • Aatitle-weight-medium600

spacing 6

  • lg1rem
  • md0.75rem
  • sm0.5rem
  • xl1.5rem
  • xs0.25rem
  • xxs0.125rem

GitHub Primer is shared by Stoaken Curated under the MIT licence. Stoaken hosts it; Stoaken Curated is responsible for what it contains. See something wrong? Use Report.