Documentation

Design tokens

The tokens come from the SF.gov design system and live in css/src/tokens/. Each one is a Tailwind class: text-primary500, bg-accent50, border-neutral200.

Colors

Token		Hex
`white`		`#FCFCFC`
`black`		`#0B0C0C`

Primary

Token		Hex
`primary10`		`#F3F8FE`
`primary50`		`#E9F1FE`
`primary100`		`#DFEBFD`
`primary200`		`#AFCCF7`
`primary300`		`#83ACEB`
`primary400`		`#5A8DD9`
`primary500`		`#2A60AF`
`primary600`		`#1B519E`
`primary700`		`#043578`
`primary800`		`#001D4E`
`primary900`		`#000925`
`primarySource`		`#1B52A1`

Secondary

Token		Hex
`secondary10`		`#F2F9FA`
`secondary50`		`#E6F4F5`
`secondary100`		`#DAEFF0`
`secondary200`		`#A2D5D8`
`secondary300`		`#6ABABF`
`secondary400`		`#2B9EA5`
`secondary500`		`#008189`
`secondary600`		`#00646C`
`secondary700`		`#00464E`
`secondary800`		`#002A30`
`secondary900`		`#001013`
`secondarySource`		`#15A5AD`

Accent

Token		Hex
`accent10`		`#FFF5F0`
`accent50`		`#FEEDE3`
`accent100`		`#FDE4D7`
`accent200`		`#F6BC9B`
`accent300`		`#E79362`
`accent400`		`#D26D28`
`accent500`		`#B64A00`
`accent600`		`#942A00`
`accent700`		`#6F0F00`
`accent800`		`#470000`
`accent900`		`#200000`
`accentSource`		`#E97727`

Neutral

Token		Hex
`neutral10`		`#F7F8F8`
`neutral50`		`#EFF0F0`
`neutral100`		`#E9EAEA`
`neutral200`		`#C9CACA`
`neutral300`		`#AAABAB`
`neutral400`		`#8B8D8D`
`neutral500`		`#6E7070`
`neutral600`		`#535454`
`neutral700`		`#383939`
`neutral800`		`#202121`
`neutral900`		`#0B0B0B`
`neutralSource`		`#0B0C0C`

Information

Token		Hex
`information10`		`#F2F8FF`
`information50`		`#E5F1FF`
`information100`		`#DAEBFF`
`information200`		`#A3CCFF`
`information300`		`#6FAAFF`
`information400`		`#4088FD`
`information500`		`#1066E5`
`information600`		`#0046C2`
`information700`		`#002996`
`information800`		`#001264`
`information900`		`#000331`
`informationSource`		`#1168E8`

Success

Token		Hex
`success10`		`#F3FAF0`
`success50`		`#E8F5E2`
`success100`		`#DEF1D6`
`success200`		`#AED998`
`success300`		`#80BF5B`
`success400`		`#55A30F`
`success500`		`#2D8600`
`success600`		`#026800`
`success700`		`#004A00`
`success800`		`#002C00`
`success900`		`#001100`
`successSource`		`#6CC627`

Warning

Token		Hex
`warning50`		`#FAEFE1`
`warning100`		`#F7E7D3`
`warning200`		`#E8C492`
`warning300`		`#D69F50`
`warning400`		`#BF7D00`
`warning500`		`#A35D00`
`warning600`		`#843F00`
`warning700`		`#612600`
`warning800`		`#3E1200`
`warning900`		`#1B0400`
`warningSource`		`#EFA315`

Danger

Token		Hex
`danger10`		`#FFF4F1`
`danger50`		`#FFEAE5`
`danger100`		`#FFE0D9`
`danger200`		`#FFB0A2`
`danger300`		`#FF7F6E`
`danger400`		`#EC4E3E`
`danger500`		`#D0110B`
`danger600`		`#AC0000`
`danger700`		`#810000`
`danger800`		`#550000`
`danger900`		`#280000`
`dangerSource`		`#D81C14`

Type scale

Use the mobile size and its desktop size together: text-heading-xl lg:text-desktop-heading-xl.

Token	Size / line height	Weight
`text-small`	14px / 24px
`text-display-xxxl`	32px / 40px	600
`text-display-lg`	20px / 24px	400
`text-heading-xxl`	28px / 36px	500
`text-heading-xl`	24px / 32px	600
`text-heading-lg`	20px / 28px	500
`text-heading-lg-li`	20px / 28px	600
`text-heading-md`	16px / 24px	700
`text-heading-sm`	16px / 24px	800
`text-heading-xs`	14px / 20px	300
`text-body`	16px / 24px	400
`text-label-md`	20px / 28px	400
`text-label-sm`	16px / 24px	400
`text-label-xs`	14px / 20px	400
`text-desktop-display-xxxl`	46px / 56px	600
`text-desktop-display-lg`	24px / 32px	400
`text-desktop-heading-xxl`	40px / 52px	500
`text-desktop-heading-xl`	32px / 44px	600
`text-desktop-heading-lg`	24px / 32px	500
`text-desktop-heading-lg-li`	24px / 32px	600
`text-desktop-heading-md`	20px / 28px	700
`text-desktop-heading-sm`	16px / 24px	800
`text-desktop-heading-xs`	14px / 20px	300

Fonts

Token	Family
`font-body`, `font-sans`	Roboto Flex
`font-slab`	Roboto Slab
`font-mono`	Roboto Mono

Breakpoints

Prefix	Min width
`xs:`	375px
`sm:`	640px
`md:`	768px
`lg:`	1024px
`xl:`	1280px

Spacing

Spacing classes are in pixels: p-20 is 20px, gap-28 is 28px. Steps: 0, 2, 4, 8, 12, 16, 20, 28, 40, 60, 80 and 96, plus 1, 6, 15, 24, 32, 36, 44, 48, 52, 56 and 64 used by SF.gov markup.

Edit this page