BASE SYSTEM ✦ VERSION 1.0

Style Guide

Use this style guide to manage your website typography, spacing, containers, buttons and more.

Typography

HTML Elements
Body
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales laoreet gravida. In eu faucibus felis. Cras aliquet urna dui, vitae vestibulum felis commodo in.
Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales laoreet gravida. In eu faucibus felis. Cras aliquet urna dui, vitae vestibulum felis commodo in.

Block Quote
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales laoreet gravida. In eu faucibus felis. Cras aliquet urna dui, vitae vestibulum felis commodo in.
Link
Link
Unordered List
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
Ordered List
  1. Sample text is being used as a placeholder for real text that is normally present.
  2. Sample text is being used as a placeholder for real text that is normally present.
  3. Sample text is being used as a placeholder for real text that is normally present.
HTML Headings
H1 Heading

The quick brown fox jumps over the lazy dog

H2 Heading

The quick brown fox jumps over the lazy dog

H3 Heading

The quick brown fox jumps over the lazy dog

H4 Heading

The quick brown fox jumps over the lazy dog

H5 Heading
The quick brown fox jumps over the lazy dog
H6 Heading
The quick brown fox jumps over the lazy dog
Headings
H1 Heading

The quick brown fox jumps over the lazy dog

H2 Heading

The quick brown fox jumps over the lazy dog

H3 Heading

The quick brown fox jumps over the lazy dog

H4 Heading

The quick brown fox jumps over the lazy dog

H5 Heading
The quick brown fox jumps over the lazy dog
H6 Heading
The quick brown fox jumps over the lazy dog
Paragraphs
Paragraph X Large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales laoreet gravida. In eu faucibus felis. Cras aliquet urna dui, vitae vestibulum felis commodo in.

Paragraph Large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales laoreet gravida. In eu faucibus felis. Cras aliquet urna dui, vitae vestibulum felis commodo in.

Paragraph Regular

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales laoreet gravida. In eu faucibus felis. Cras aliquet urna dui, vitae vestibulum felis commodo in.

Paragraph Small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales laoreet gravida. In eu faucibus felis. Cras aliquet urna dui, vitae vestibulum felis commodo in.

Paragraph X Small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales laoreet gravida. In eu faucibus felis. Cras aliquet urna dui, vitae vestibulum felis commodo in.

Subheadings
Subheading X Large
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales laoreet gravida. In eu faucibus felis. Cras aliquet urna dui, vitae vestibulum felis commodo in.
Subheading Large
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales laoreet gravida. In eu faucibus felis. Cras aliquet urna dui, vitae vestibulum felis commodo in.
Subheading Regular
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales laoreet gravida. In eu faucibus felis. Cras aliquet urna dui, vitae vestibulum felis commodo in.
Subheading Small
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales laoreet gravida. In eu faucibus felis. Cras aliquet urna dui, vitae vestibulum felis commodo in.
Subheading X Small
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales laoreet gravida. In eu faucibus felis. Cras aliquet urna dui, vitae vestibulum felis commodo in.
Overline
Overline Large
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales laoreet gravida. In eu faucibus felis. Cras aliquet urna dui, vitae vestibulum felis
Overline Regular
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales laoreet gravida. In eu faucibus felis. Cras aliquet urna dui, vitae vestibulum felis commodo in.
Overline Small
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales laoreet gravida. In eu faucibus felis. Cras aliquet urna dui, vitae vestibulum felis commodo in.
Text Colors
Text Color Primary
Text Color Primary
Text Color Secondary
Text Color Secondary
Text Color Tertiary
Text Color Tertiary
Text Color Brand
Text Color Brand
Text Color Inverse
Text Color Inverse
Text Color Inherit
Text Color Inherit
Text Weights
Text Weight X Bold
Text Weight X Bold
Text Weight Bold
Text Weight Bold
Text Weight Semibold
Text Weight Semibold
Text Weight Medium
Text Weight Medium
Text Weight Light
Text Weight Light
Text Weight X Light
Text Weight X Light
Text Alignments
Text Align Left
Text Align Left
Text Align Center
Text Align Center
Text Align Right
Text Align Right
Text Styles
Text Underline
Text Underline
Text Italics
Text Italics
Text Strikethrough
Text Strikethrough
Text Balance
Text Balance
Rich Text
Rich Text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

Structure

Sections
Section X Large
Section Large
Section Regular
Section Small
Section X Small
Containers
Container X Large
Container Large
Container Regular
Container Small
Container X Small
Columns
Column 3X Large
Column 2X Large
Column X Large
Column Large
Column Regular
Column Small
Column X Small
Column 2X Small
Column
Column Left
Column Center
Column Right
Column Space Between
Rows
Row 2X Large
Row X Large
Row Large
Row  Regular
Row Small
Row X Small
Row 2X Small
Row
Row Left
Row Center
Row Right
Row Top
Row Bottom
Row Space Between
Row Wrap
Max Widths
Max Width X Large
Max Width Large
Max Width Regular
Max Width Small
Max Width X Small
Utility Classes
Overflow Hide
Relative
Button Group
Image Cover
Hide Tablet
Hide Mobile
Hide

Elements

Buttons
Button Primary Large
Button
Button Primary
Button
Button Primary Small
Button
Button Secondary Large
Button
Button Secondary
Button
Button Secondary Small
Button
Button Outline Large
Button
Button Outline
Button
Button Outline Small
Button
Button Ghost  Large
Button
Button Ghost
Button
Button Ghost Small
Button
Button Link Large
Link
Button Link
Link
Button Link  Small
Link
Icon Buttons
Icon Button Primary Large
Icon Button Primary
Icon Button Primary Small
Icon Button Secondary Large
Icon Button Secondary
Icon Button Secondary Small
Icon Button Outline Large
Icon Button Outline
Icon Button Outline Small
Icon Button Ghost Large
Icon Button Ghost
Icon Button Ghost Small
Form Elements
Form Field Label
Form Input
Form Input Large
Form Text Area
Form Text Area Large
Form Select
Form Select Large
Form Checkbox
Form Radio
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Icons
Icon X Large
Icon Large
Icon Regular
Icon Small
Icon X Small
Icon
Dividers
Divider Primary
Divider Secondary
Divider Tertiary

Colors

Background Colors
Background Primary
Background Secondary
Background Tertiary
Background Brand
Background Inverse