Skip to main content

Utility (external) navigation

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.

border

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

border-radius

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

box-shadow

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

content

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

font-family

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

layout

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

line-height

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

spacing

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

text-shadow

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

transition

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