Get Started

A library of UI components and visual styles to help create consistent experiences across our products.

Atoms

Buttons

Use buttons to signal actions.

Buttons

Colors

Use color to contrast and compliment.

Colors

Fonts

Lato and Museo for consistency.

Fonts

Forms

For users to add, edit, and delete information.

Forms

Images

Font Awesome icons, logos and pics.

Images

Tables

Display information or instructions.

Tables

Typography

Communicate purpose and hierarchy.

Typography

Molecules

Alerts

Let users know if something has gone wrong.

Alerts

Badges

Onscreen notifications which can be a number or icon.

Badges

Breadcrumbs

Secondary navigation system that shows a user’s location.

Breadcrumbs

Cards

Communicate a story quickly and/or serve as an entry point.

Cards

Carousel

Organize and cycle through like images and/or copy.

Carousel

Pagination

A UI pattern that divides content into separate pages.

Pagination

Panels

Eases visual organization by giving the screen sections.

Panels

Progress Bars

Indicate goals and measure the progress of tasks.

Progress Bars

Search

Allow the user to enter queries and find what they need.

Tabs

Alternate between views within the same context.

Tabs

Tooltips

An intuative way of hiding additional contextual information.

Tooltips

Organisms

Footer

Bottom section that includes a logo and copyright.

Footer

Header

Text, or other visual information, positioned at the top of the page.

Header