Terraformation 2.0
Style Guide

Based off of Finsweet's Client-First style system.

Structure Classes

page-wrapper

MAIN-WRAPPER

CONTAINER-XSMALL

CONTAINER-SMALL

CONTAINER-MEDIUM

CONTAINER-LARGE

PADDING-GLOBAL

Heading Styles

Heading_2XL

This is a sample of heading text.

Heading_XL

This is a sample of heading text.

Heading_L

This is a sample of heading text.

Heading_M

This is a sample of heading text.

Heading_S

This is a sample of heading text.

Heading_xS

This is a sample of heading text.
Display Styles

Display_XXL

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque molestie mi in nunc ornare lacinia.

Display_XL

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque molestie mi in nunc ornare lacinia. Donec malesuada metus auctor tincidunt feugiat. Sed ut volutpat lorem donec lobortis at.

Display_L

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque molestie mi in nunc ornare lacinia. Donec malesuada metus auctor tincidunt feugiat. Sed ut volutpat lorem. Donec lobortis at ipsum quis consequat fusce quis libero id lectus.

Display_M

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque molestie mi in nunc ornare lacinia. Donec malesuada metus auctor tincidunt feugiat. Sed ut volutpat lorem. Donec lobortis at ipsum quis consequat. Fusce quis libero id lectus aliquet ullamcorper non a metus. In condimentum vehicula metus eget rhoncus.

Display_S

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque molestie mi in nunc ornare lacinia. Donec malesuada metus auctor tincidunt feugiat. Sed ut volutpat lorem. Donec lobortis at ipsum quis consequat. Fusce quis libero id lectus aliquet ullamcorper non a metus. In condimentum vehicula metus eget rhoncus. Sed a ex odio. Phasellus porttitor fringilla lobortis.

Display_xS

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque molestie mi in nunc ornare lacinia. Donec malesuada metus auctor tincidunt feugiat. Sed ut volutpat lorem. Donec lobortis at ipsum quis consequat. Fusce quis libero id lectus aliquet ullamcorper non a metus. In condimentum vehicula metus eget rhoncus. Sed a ex odio. Phasellus porttitor fringilla lobortis. Proin congue efficitur lectus, vel viverra ipsum.Etiam lorem leo, faucibus sed urna ut, commodo faucibus leo. Pellentesque et neque id ligula tristique dignissim.
Margins

Utility spacing system - padding classes. [margin-direction] + [margin-size].

Direction Classes

MARGIN-BOTTOM

MARGIN-TOP

MARGIN-VERTICAL

MARGIN-HORIZONTAL

MARGIN-LEFT

MARGIN-RIGHT

Size Classes

MARGIN-0

MARGIN-XS

MARGIN-S

MARGIN-M

MARGIN-L

MARGIN-XL

MARGIN-XXL

Padding

Utility spacing system - padding classes. [margin-direction] + [margin-size].

Direction Classes

Padding-BOTTOM

Padding-TOP

Padding-VERTICAL

Padding-HORIZONTAL

Padding-LEFT

Padding-RIGHT

Size Classes

Padding-0

padding-XS

padding-s

PADDING-M

Padding-L

padding-XL

padding-XXL

Buttons

Nested button components for flexibility and efficiency.

Basic Buttons

Button Text
Button Text
Button Text
Button Text