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 | .5em | The roundedness of corners on items that have rounded corners | Mood |
box-shadow
| Name | Value | Description | Category |
|---|---|---|---|
| box-shadow--default | 0 .3em .4em rgba(0,0,0,.75) | 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 | One of the four font groups | Typography |
| font-family--monospace | 'courier new', courier, monospace | One of the four font groups | Typography |
| font-family--primary | 'Public Sans', Arial, Helvetica, sans-serif | One of the four font groups | Typography |
| font-family--secondary | 'Engagement', 'Comic Sans MS', cursive | One of the four font groups | Typography |
layout
| Name | Value | Description | Category |
|---|---|---|---|
| layout--content-area | 1080px | 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 |