# 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](https://www.shipium.com/style-guide#)
#### 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](https://relume.io/)
- 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](https://www.shipium.com/style-guide#) (primary)
[Button](https://www.shipium.com/style-guide#) (small)
[Button](https://www.shipium.com/style-guide#) (secondary)
#### Buttons With Icons
[Button](https://www.shipium.com/style-guide#) (with icon)
### Other UI Elements
- [Monthly](https://www.shipium.com/style-guide)
- [Yearly](https://www.shipium.com/style-guide#)
### 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