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 reasons
Right-click to save any of the images to your computer to use elsewhere.
Logo
Full-resolution logo for use on web & print.
Avatar
Logo + name with padding around the logo to use as an avatar.

Typography

The main font face used for interfaces is .
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
Thank you Kanye, very cool!
<h1>.text-xl
Thank you Kanye, very cool!
<h2>.text-lg
Thank you Kanye, very cool!
<h3>.text-md
Thank you Kanye, very cool!
<h4>.text-sm
Thank you Kanye, very cool!
<h5>.heading
Thank you Kanye, very cool!
<h6>.subheading
Thank you Kanye, very cool!
<p>.text-body
Thank you Kanye, very cool!
.caption

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)