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

Colors

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

Branding

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.
Acronym
Full-resolution pin logo with acronym.
Pin Only
Pin logo only without name.
Avatar
Pin logo & Acronym with padding for website profile avatars.
Horizontal
Pin logo and single-line full name.

Typography

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.
Font
Size
Line
Height
Letter
Spacing
Font
Weight
Class
or Tag
Houston, we have a problem.
<h1>.text-xl
Houston, we have a problem.
<h2>.text-lg
Houston, we have a problem.
<h3>.text-md
Houston, we have a problem.
<h4>.text-sm
Houston, we have a problem.
<h5>.heading
Houston, we have a problem.
<h6>.subheading
Houston, we have a problem.
<p>.text-body
Houston, we have a problem.
.caption
Serif Font Add the class .serif to an element to switch to .

Responsive

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.
Button
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.
Label
Labels have font and letter spacing.

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].
Variable
Explanation
[size]
The responsive size abbreviation for the screen size you want it applied at.
[m/p]
Use m for margin, or p for padding.
[side]
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.
[value]
The margin or padding amount in pixels.
Values - 0, 5, 10, 15, 20, 25, 30, 40, 50, 75, 100, 125, 150, 175, 200
Examples
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.

Layout

Responsive Flex Classes
Follow the class formulas to add flex properties to elements at different responsive sizes.
Class
Properties & Example
.[size]-flex
.[size]-f-start;
justify-content: flex-start;
.[size]-f-btw
justify-content: space-between;
.[size]-f-around
justify-content: space-around;
.[size]-f-center
justify-content: center;
.[size]-f-end
justify-content: flex-end;
.[size]-f-wrap
flex-wrap: wrap;
.[size]-f-col
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.
<b><strong>
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
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.
<code>
Text signifying <code> will have a () background with () font.

Text Helpers

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

Display Helpers

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