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 #ccc | The thickness, style, and perhaps color of the default border | Mood |
border-radius
| Name | Value | Description | Category |
|---|---|---|---|
| border-radius--default | 2px | The roundedness of corners on items that have rounded corners | Mood |
box-shadow
| Name | Value | Description | Category |
|---|---|---|---|
| box-shadow--default | 0 2px 6px rgb(128 128 128 / 90%) | 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 | background-color .3s ease-in | The properties, timing, and easing of most site elements when they change between property values | Mood |