We use these guidelines and shared components for everything we build, including commercial and internal apps.
Our typographical vertical rhythm is 8px. We use a multiple of that number (24px) to set the line height of our text.
We help governments deliver great digital services to the people who depend on them.
Always use the
$lineHeight variables to set dimensions and spacing for UI elements.
Do use multiples of
$lineHeight to specify the dimensions and padding of an item.
rem units to specify spacing or sizes.
Unless you're centering elements within a container, avoid dividing
$lineHeight into fractions, or multiplying them by non-whole numbers.
Do use multiples of
$lineHeight when styling.
Our default text styles are 16/24px. You should be styling most text with this default.
Use blockquotes in blog posts, support documentation, and other prose writing when quoting another source. They are usually unnecessary in interface design.
Text with inline code, or developer-oriented data like API keys, should be wrapped in a
## Code which wraps to multiple lines should be ## placed in a <pre> tag.
<sup> tags to style superscript and subscript text. For example: “The 8th molecule of H2O.”
Redacted text should be styled with
$fontSmall: Small text should be used for displaying tertiary information.
$fontSmaller: Smaller text is great for explaining primary and secondary actions.
$fontSmallest: Use the smallest text size sparingly.
Don't use multiple lines of larger text. Either use the default font size, or truncate a single line of larger text with ellipses.
Do use multiple lines of smaller text to provide UI microcopy or tertiary information.
Do use header styles, smaller text sizes, and alerts to establish hierarchy and call out bits of text.
Don't use boldface text for long sentences, or color the text to emphasize an action. This negatively impacts legibility.
Do apply small caps to make actions or important data more visible at smaller font sizes.
Never apply small caps to our display typeface.
By default, lists are unstyled. Use the
.formatted_list class to create bulleted and numbered lists.
Use definition lists to format labeled lists and metadata, like the contents of a form submissions or the sender information in an email.
DOBT believes in the power of open data. It encourages transparency in government, and sometimes, it even saves lives.Toggle source
.button_link class to any
<button> tag to make it look like a link.