Shipium Style Guide

Typography

HTML Headings Tags

HTML tags define default Heading styles.

All H1 Headings

Heading 1

All H2 Headings

Heading 2

All H3 Headings

Heading 3

All H4 Headings

Heading 4

All H5 Headings

Heading 5

All H6 Headings

Heading 6

Heading Classes

Heading classes when typography style doesn't match the default HTML tag.

heading-style-h1

Heading-style-h1

heading-style-h2

Heading-style-h2

heading-style-h3

Heading-style-h3

heading-style-h4

Heading-style-h4

heading-style-h5

Heading-style-h5

heading-style-h6

Heading-style-h6

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

Block Quote

All Unordered Lists

• No bullet list
• No bullet list

All Ordered Lists

1. No bullet list
2. No bullet list
3. No bullet list

Text Sizes

Text sizes classes when typography size doesn't match the default HTML tag.

text-size-large

text-size-medium

text-size-regular

text-size-small

text-size-tiny

Text Weights

Text weight classes when typography weight doesn't match the default HTML tag.

• text-weight-xbold (800)
• text-weight-bold (700)
• text-weight-semibold (600)
• text-weight-medium (500)
• text-weight-normal (400)
• text-weight-light (300)

Text Styles

Text style classes when typography style doesn't match the default HTML tag.

• text-style-italic
• text-style-strikethrough
• text-style-allcaps
• text-style-nowrap
• text-style-quote
• text-style-link

Text Alignment

Text alignment classes when typography alignment doesn't match the default HTML tag.

• text-align-left
• text-align-center
• text-align-right

Text Wrap

• text-wrap-normal
• text-wrap-balance
• text-wrap-pretty

Rich Text

Rich Text Example

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

This is a block quote

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

This is a link inside of a rich text

• List item
• List item
• List item

1. List item
2. List item
3. List item

Caption goes here

Colors

Color Schemes

Manage your colors easily with global color schemes simply adding the color scheme class to the section you want it applied to.

Scheme 1

• Text color

Scheme 2

• Text color

Color Modes

• Base: Text color
• White: Text color
• Dark: Text color

Background Color

• White
• Petrol 50
• Petrol 200
• Petrol 500
• Petrol 800
• Petrol 950
• Mint 900

Text Color

• White
• Petrol 100
• Petrol 50
• Petrol 200
• Petrol 950
• Mint 500
• Mint 700
• Mint 900
• Accent Mint
• Accent Pink
• Accent Yellow

Gradients

• Petrol 950 to Petrol 50
• Petrol 800 to Petrol 50

UI Elements

Buttons

Button (primary)

Button (small)

Button (secondary)

Buttons With Icons

Button (with icon)

Other UI Elements

• Monthly
• Yearly

Tags

Linkable labels that categorize or highlight information on cards, products and posts.

Form Elements

• Checkbox
• Radio

Icons (Image)

icon-height-xxsmall

Radius

• Large: 1 or 2 columns in width.
• Medium: Between 2 and 3 columns in width.
• Small: Smaller than 4 columns in width.

Effects

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

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

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

Paddings

Direction Classes:

• padding-bottom
• padding-top
• padding-vertical
• padding-horizontal

Size Classes:

• padding-0
• padding-tiny
• padding-xxsmall
• padding-xsmall
• padding-small
• padding-medium
• padding-large
• padding-xlarge
• padding-xxlarge

Margins

Direction Classes:

• margin-bottom
• margin-top
• margin-vertical
• margin-horizontal

Size Classes:

• margin-0
• margin-tiny
• margin-xxsmall
• margin-xsmall
• margin-small
• margin-medium
• margin-large
• margin-xlarge
• margin-xxlarge

Spacers

Unified spacer system for the project:

• spacer-tiny
• spacer-xxsmall
• spacer-xsmall
• spacer-small
• spacer-medium
• spacer-large
• spacer-xlarge
• spacer-xxlarge
• spacer-huge
• spacer-xhuge
• spacer-xxhuge

Utility Classes

Useful utility classes we like to use in most of our projects to build faster:

• hide
• overflow-visible
• overflow-hidden
• pointer-events-auto
• pointer-events-none
• display-block
• display-flex
• justify-center
• items-center