Skip to main content

Values (design tokens)

The following is a listing of design tokens for the design system of the site. Colors are displayed on their own page. As the design system matures, some values may also be broken out and given examples.


Name Value Description Category
border--default 1px solid #ccc The thickness, style, and perhaps color of the default border Mood


Name Value Description Category
border-radius--default .25em The roundedness of corners on items that have rounded corners Mood


Name Value Description Category
box-shadow--default 0 .1em .75em rgba(99,99,99,.625) The default shadow cast by an element when an element is supposed to cast a shadow Mood


Name Value Description Category
content--error 'Error: ' String that can be translated. i18n/l10n
content--footnotes 'Footnotes' String denoting footnotes that can be translated i18n/l10n


Name Value Description Category
font-family--input 'Public Sans', Arial, Helvetica, sans-serif Font used for form fields, primarily Typography
font-family--monospace 'courier new', courier, monospace Code font. Usually defaults to a web-safe font Typography
font-family--primary 'Public Sans', Arial, Helvetica, sans-serif Main body copy and erstwhile main font Typography
font-family--secondary 'Emberly', Georgia, Times New Roman, serif Font for headings and other visual emphasis Typography


Name Value Description Category
layout--content-area 1200px The maximum width that content inside sections can get Maximum


Name Value Description Category
line-height--default 1.425 The leading, or vertical space between lines, of body text, expressed as a unitless number Typography
line-height--heading 1 The leading, or vertical space between lines, of headings, expressed as a unitless number Typography


Name Value Description Category
spacing--single 0.625rem The base unit for styling of space: with, between, around things. Big values make the design airy, small tight Mood


Name Value Description Category
text-shadow--default 0 0 2px rgba(0,0,0,.325) The default shadow cast by text when given a shadow Mood


Name Value Description Category
transition--default background-color .3s ease-in The properties, timing, and easing of most site elements when they change between property values Mood