Skip to main content

Style Guide

Colors

Default Color
Primary Color
Secondary Color
Muted Color

Card Default

Card Primary

Card Secondary

Tile Default

Tile Primary

Tile Secondary

Tile Muted

Button Default
Button Primary
Button Secondary
Button Danger

Overlay Default

Overlay Primary

Text

Default body copy
Text color: Primary
Text color: Secondary
Text color: Muted
Text color: Emphasis
Text color: Success
Text color: Warning
Text color: Danger
Large text
Small text
Text style: Lead
Text style: Meta

Headings

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading
H6 Heading
Heading Small
Heading Medium
Heading Large
Heading X-Large
Heading 2X-Large

Image Styles

Default Decoration

Primary Decoration

Secondary Decoration

Section: Default

Default title

Meta text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod aliquet nulla, a suscipit lectus tempus sed. Pellentesque nec ornare velit, in commodo nibh. Curabitur mattis, mauris ac luctus luctus, ex erat lobortis purus, eget aliquet lectus mauris et mauris. Nullam consequat est ut risus blandit consequat. Suspendisse potenti. Duis a eros ante. Aenean aliquet mauris nec ligula hendrerit, eu vulputate ipsum feugiat.
Button Default
Button Primary
Button Secondary
Button Danger

Section: Muted

Default title

Meta text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod aliquet nulla, a suscipit lectus tempus sed. Pellentesque nec ornare velit, in commodo nibh. Curabitur mattis, mauris ac luctus luctus, ex erat lobortis purus, eget aliquet lectus mauris et mauris. Nullam consequat est ut risus blandit consequat. Suspendisse potenti. Duis a eros ante. Aenean aliquet mauris nec ligula hendrerit, eu vulputate ipsum feugiat.
Button Default
Button Primary
Button Secondary
Button Danger

Section: Primary

Default title

Meta text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod aliquet nulla, a suscipit lectus tempus sed. Pellentesque nec ornare velit, in commodo nibh. Curabitur mattis, mauris ac luctus luctus, ex erat lobortis purus, eget aliquet lectus mauris et mauris. Nullam consequat est ut risus blandit consequat. Suspendisse potenti. Duis a eros ante. Aenean aliquet mauris nec ligula hendrerit, eu vulputate ipsum feugiat.
Button Default
Button Primary
Button Secondary
Button Danger

Section: Secondary

Default title

Meta text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod aliquet nulla, a suscipit lectus tempus sed. Pellentesque nec ornare velit, in commodo nibh. Curabitur mattis, mauris ac luctus luctus, ex erat lobortis purus, eget aliquet lectus mauris et mauris. Nullam consequat est ut risus blandit consequat. Suspendisse potenti. Duis a eros ante. Aenean aliquet mauris nec ligula hendrerit, eu vulputate ipsum feugiat.
Button Default
Button Primary
Button Secondary
Button Danger