Launchpads Style Guide

Typography

HTML Headings Tags

HTML tags define default Heading styles.
All Display Headings

Display

All H1 Headings

H1 Heading

All H2 Headings

H2 Heading

All H3 Headings

H3 Heading

All H4 Headings

H4 Heading

All H5 Headings

H5 Heading

All H6 Headings

H6 Heading

Other HTML Tags

HTML tags define default text styles.
All Paragraphs

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.

All Links

All Links

All Block Quotes

H2 Heading

All Ordered Lists-Disc
All Ordered Lists-Circle
All Ordered Lists-Square
All Ordered Lists-Decimals

Text Sizes

Text sizes classes when typography size doesn't match the default HTML tag
text-size-large

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-size-medium

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-size-regular

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-size-small

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-size-tiny

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 weights

Text weight classes when typography weight doesn't match the default HTML tag
text-weight-xbold

text-weight-xbold 800

text-weight-bold

text-weight-bold 700

text-weight-semibold

text-weight-semibold 600

text-weight-medium

text-weight-medium 500

text-weight-normal

text-weight-normal 400

text-style-strikethrough

text-style-strikethrough

text-weight-light

text-weight-light 400

Text styles

Text style classes when typography style doesn't match the default HTML tag
text-style-italic

text-style-italic

text-style-strikethrough

text-style-strikethrough

text-style-all caps

text-style-all caps

text-style-link

text-style-link

text-style-centered

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-style-muted

text-style-muted

Text Alignment

Text alignment classes when typography alignment doesn't match the default HTML tag
text-align-left

text-align-left

text-align-center

text-align-center

text-align-right

text-align-right

text-align-justify

text-align-justify

Colors

Primary Colors

Manage recurring primary colors
Light-
Primary Color 1
Light-Primary Color 2
Light-Primary Color 3
Light-Primary Color 4
Light-Primary Color 5
Light-Primary Color 6
Dark-
Primary Color 1
Dark-Primary Color 2
Dark-Primary Color 3
Dark-Primary Color 4
Dark-Primary Color 5
Dark-Primary Color 6

Text Colors

Manage recurring text colors
text-color-on-white
text-color-on-black
text-color-on-primary
text-color-on-secondary
text-color-on-alternate

Effects

Box Shadows

‍Shadows allow you to add depth and realism to designs by positioning elements on a z-axis.
shadow-xxsmall
shadow-xsmall
shadow-small
shadow-medium
shadow-large
shadow-xlarge
shadow-xxlarge

UI Elements

Buttons

Use is-alternate for when designing on a dark background.
button
is-small
is-secondary
is-link
is-alternate

Buttons with icons

To use the button with icon, just copy and paste into your project and replace the HTML embed code for the icon.
button + Icon - 1
button + Icon - 2
button + Icon - 3

Form Elements

Form

For 'Select-element' use 'is-select-input-trigger' for the 'trigger-element' and use 'is-select-input-Content' for the 'content-element'
form_field-label
form_input
is-text-area
is-select-input
form_checkbox
form_radio
submit_button
Submit

Icons Image

To use the icon, just copy and paste into your project and replace the image with your icon.
icon-height-xxsmall
icon-height-xsmall
icon-height-small
icon-height-medium
icon-height-large
icon-height-xlarge
icon-1x1-xxsmall
icon-1x1-xsmall
icon-1x1-small
icon-1x1-medium
icon-1x1-large
icon-1x1-xlarge

Icons Embed

To use the icon, just copy and paste into your project and replace the HTML embed code for the icon.

HTML embed icons enable you to control icon color on hover.
icon-embed-xxsmall
icon-embed-xsmall
icon-embed-small
icon-embed-medium
icon-embed-large
icon-embed-xlarge

Structure Classes

Defined and flexible core structure we can use on all or most pages.
page-wrapper
main-wrapper
container-small
container-medium
container-large
padding-global
padding-section-small
padding-section-medium
padding-section-large
main-wrapper

Max Widths

Use the max-width CSS property to contain inner content to a maximum width.
max-width-full
max-width-full-tablet
max-width-full-mobile-landscape
max-width-full-mobile-portrait
max-width-xxlarge
max-width-xlarge
max-width-large
max-width-medium
max-width-small
max-width-xsmall
max-width-xxsmall
max-width-full-tablet

Paddings

Direction Classes
padding-top
padding-bottom
padding-vertical
padding-horizontal
padding-right
padding-left
max-width-full-tablet

Size Classes

Size Classes
padding-0
padding-tiny
padding-xxsmall
padding-xsmall
padding-small
padding-medium
padding-large
padding-xlarge
padding-xxlarge
padding-huge
padding-xhuge
padding-xxhuge

Margin Classes

Direction Classes
margin-top
margin-bottom
margin-vertical
margin-horizontal
margin-left
margin-right

Size Classes

Size Classes
margin-0
margin-tiny
margin-xxsmall
margin-xsmall
margin-small
margin-medium
margin-large
margin-xlarge
margin-xxlarge
margin-huge
margin-xhuge
margin-xxhuge