Skip to content

DOBT

DOBT Style Guide

We use these guidelines and shared components for everything we build, including commercial and internal apps.

Base Styles

Sizes and Spacing

Our typographical vertical rhythm is 8px. We use a multiple of that number (24px) to set the line height of our text.

The Department of Better Technology

We help governments deliver great digital services to the people who depend on them.

Always use the $rhythm or $lineHeight variables to set dimensions and spacing for UI elements.


Do use multiples of $rhythm and $lineHeight to specify the dimensions and padding of an item.

Avoid using px, em or rem units to specify spacing or sizes.

Unless you're centering elements within a container, avoid dividing $rhythm or $lineHeight into fractions, or multiplying them by non-whole numbers.

Do use multiples of $rhythm or $lineHeight when styling.

Headings

Heading 1 56/80px

Heading 2 36/56px

Heading 3 23/36px

Heading 4 16/24px

Heading 5 13/24px
Toggle source

Paragraph-Level Text

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> tag.

## Code which wraps to multiple lines should be
## placed in a <pre> tag.

Use the <sub> and <sup> tags to style superscript and subscript text. For example: “The 8th molecule of H2O.”

Redacted text should be styled with <del> tags.

Toggle source

Small Text Sizes

$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.

Lists

By default, lists are unstyled. Use the .formatted_list class to create bulleted and numbered lists.

  • Item 1
  • Item 2
  • Item 3 is an example of a longer item that may occasionally wrap to multiple lines.
  • Item 4
  • Item 5
  • Item 6
  • Item 7
  1. Item 1
  2. Item 2
  3. Item 3 is an example of a longer item that may occasionally wrap to multiple lines.
  4. Item 4
  5. Item 5
  6. Item 6
  7. Item 7
Toggle source

Definition Lists

Use definition lists to format labeled lists and metadata, like the contents of a form submissions or the sender information in an email.

Name
Barack Obama
Email Address
barack.obama@whitehouse.gov
Toggle source

Images and Captions

Mount Rushmore
Mount Rushmore, Keystone, South Dakota
Toggle source

Links

Default

DOBT believes in the power of open data. It encourages transparency in government, and sometimes, it even saves lives.

Toggle source

Add the .button_link class to any <button> tag to make it look like a link.

Toggle source