U.S. flag
An official website of the United States government.
Here's how you know.
The .gov means it’s official.

Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.

The site is secure.

The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Colors Branding Typography Responsive Forms Spacing Layout Helpers


Use color to communicate how different elements in the interface function.
Prioritize communication and accessibility over decoration. Colors should make it easier for users to navigate & interact with the site.
LESS Variables All shades and colors have a LESS variable available using @[color]_[shade]. Some examples would be @primary or @ink_darker or @red_lighter


Different logos for different uses
Right-click to save any of the images to your computer to use elsewhere.
Logo & Full Name
Full-resolution pin logo + full name.
Full-resolution pin logo with acronym.
Pin Only
Pin logo only without name.
Pin logo & Acronym with padding for website profile avatars.
Pin logo and single-line full name.


The main font face used for interfaces is . serif font is also included.
Try not to deviate from the scale below. Only use other unlisted sizes, and styles if absolutely necessary.
or Tag
Houston, we have a problem.
Houston, we have a problem.
Houston, we have a problem.
Houston, we have a problem.
Houston, we have a problem.
Houston, we have a problem.
Houston, we have a problem.
Houston, we have a problem.
Serif Font Add the class .serif to an element to switch to .


Screen Sizes
The display below shows the CSS breakpoints used to resize elements on different screen sizes.
xl @ +
lg @ +
md @ +
sm @ +
xs (Global)
Global styles Responsive styles are applied mobile-first, and since xs is the smallest size, its styles are global if no other styles are applied for larger sizes.

Form Elements

Inputs & Buttons
Form elements and buttons should be accessible and easy to understand, with feedback where necessary to help guide users.
Default buttons are tall with font with hover, focus, & active states.
Colored Button
Apply button styles by choosing a color and using the class .btn-[color].
Outline Button
Change any button to an outline button by adding the class .btn-outline.
Small Button
Shrink a button to height by adding the class .btn-sm
Disabled Button
Disabled buttons are faded, and are not hoverable or focusable.
Icon Button
Add the class .btn-icon and an <i> element.
Text Input
Standard text inputs with focus and hover states.
Labels have font and letter spacing.


Responsive Margin & Padding
The margin and/or padding can be set on any element by using a class with the formula .[size]-[m/p][side]-[value].
The responsive size abbreviation for the screen size you want it applied at.
Use m for margin, or p for padding.
Whichever side you want the margin or padding applied to. Leave it off for all sides.
t for top, r for right, b for bottom, l for left.
The margin or padding amount in pixels.
Values - 0, 5, 10, 15, 20, 25, 30, 40, 50, 75, 100, 125, 150, 175, 200
10px margin on the top: .xs-mt-10
25px padding on all sides: .xs-p-25
150px bottom padding only on large screens: .lg-pb-150
Auto margin
margin: auto; can be applied to the left and right sides with the class .[size]-m-auto.
Remember: Responsive styles are applied mobile first, so xs is global class. For example, adding .xs-m-15 will apply a 15px margin on all screen sizes, but .lg-m-15 will only affect screens lg or larger.


Responsive Flex Classes
Follow the class formulas to add flex properties to elements at different responsive sizes.
Properties & Example
justify-content: flex-start;
justify-content: space-between;
justify-content: space-around;
justify-content: center;
justify-content: flex-end;
flex-wrap: wrap;
flex-direction: column;

Examples & Helpers

The tables below show examples of other styled elements as well as helper classes to apply specific styles.

Text Styles

<a> Links
Regular <a> links like this one within text have distingushible hover, focus, and active states.
Do not over use bold/strong text. Only use it when an emphasis is needed within a block of text. Only use it on interfaces to show user input.
Subdued text is at 65% opacity when working with black rgba(0,0,0,0.65) or white rgba(255,255,255,0.65). Use it to de-emphasize text that is less significant.
Text signifying <code> will have a () background with () font.

Text Helpers

Center-aligns text within.
Left-aligns text within.
Right-aligns text within.
Capitalizes the first letter of every word within the element.
Changes all text within the element to uppercase.
Changes all text within the element to lowercase.

Display Helpers

Display property inline-block.
(Use when you need to add margin or padding to inline elements)
Display property block.
Display property none.
(Use when you want something hidden initially)