Brand

Guidelines

Our design system helps us work together to build a great experience for all of Standard Behavior's users and employees.

Typography

Headings

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Pack my box with five dozen liquor jugs.

h1-jumbo - 5EM  |  1EM

Pack my box with five dozen liquor jugs.

h1 Heading - 4EM  |  1.063EM

Pack my box with five dozen liquor jugs.

h2 Heading - 3.5EM  |  1.125EM

Pack my box with five dozen liquor jugs.

h2-title - 3EM  |  1.125EM

Pack my box with five dozen liquor jugs.

h3 Heading - 2.5EM  |  1.125EM

Pack my box with five dozen liquor jugs.

h4 Heading - 2EM  |  1.25EM
Pack my box with five dozen liquor jugs.
h5 Heading - 1.375EM  |  1.375EM
Pack my box with five dozen liquor jugs.
h6 Heading - 1.188EM  |  1.5EM

Text Styles

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Paragraph - 1EM  |  1.5Em

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Text--XL - 1.375EM  |  1.625Em

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Text--lg - 1.125EM  |  1.5Em
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
text--med - 1EM  |  1.5Em

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

text--sm - .875EM  |  1.625Em

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

text--xs - .75EM  |  1.625Em
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.
signature
Block Quote
"Lorem ipsum dolor sit amet, consectetur adipiscing elit."
Block Quote  |  bq--xl
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
  • Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.
  • Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
unordered-List
  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
  2. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.
  3. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
ordered-list
Lorem ipsum dolor sit amet
caption-title

Color Scheme

Primary Colors

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor.

midnight - #0c142e
orange - #fc5d11
salmon - #ffb793
sage - #b6d7be
yellow - #dfcd01
beige - #f5efd7
blue - #3366ff

Neutral Colors

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor.

smoke - #F8F8FA
white - #FFFFFF
Charcoal - #333333

Buttons

Button
Button
Button
Button--outline
Button
Button--orange
Button
Button--charcoal
Button
Button--navbar
Button
Button--sm
Text Link
text link
Dark Link
dark link