Colors Typography Buttons Shadows UI Elements Radius Spaces Classes

Tahi Style Guide

A simple style guide to help you get the most out of this starter project.

Color Scemes

Scheme Light

Text color

Scheme Dark

Text color

Neatral Colors

Black

Darkest

Darker

Dark

Neutral

Light

Lighter

Lightest

White

Brand Colors

Primary Color

Lightest

Lighter

Light

Dark

Darker

Darkest

Secondary Color

Lightest

Lighter

Light

Dark

Darker

Darkest

CTA Color

Background Color

Foreground Color

Text Color

Border Color

Accent Color

Heading HTML Tags

Heading H1

Donec et odio pellentesqu diam.

Heading H2

Donec et odio pellentesqu diam.

Heading H3

Donec et odio pellentesqu diam.

Heading H4

Donec et odio pellentesqu diam.

Heading H5

Donec et odio pellentesqu diam.

Heading H6

Donec et odio pellentesqu diam.

Heading Classes

Heading Style H1

Donec et odio pellentesqu diam.

Heading Style H2

Donec et odio pellentesqu diam.

Heading Style H3

Donec et odio pellentesqu diam.

Heading Style H4

Donec et odio pellentesqu diam.

Heading Style H5

Donec et odio pellentesqu diam.

Heading Style H6

Donec et odio pellentesqu diam.

Other HTML Tags

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 Block Quotes

Block Quote

All Unordered Lists

No bullet list
No bullet list

All Unordered Lists

No bullet list
No bullet list

All Ordered Lists

No bullet list
No bullet list
No bullet list

Text Sizes

Text Size Large

Text Size Regular

Text Size Small

Text Colors

Text Color Primary

Text Color Brand

Text Color Black

Text Color White

Text Weights

Text Weight XBold

text-weight-xbold (800)

Text Weight Bold

text-weight-bold (700)

Text Weight Semi Bold

text-weight-semibold (600)

Text Weight Medium

text-weight-medium (500)

Text Weight Normal

text-weight-normal (400)

Text Weight Light

text-weight-light (300)

Text Styles

Text Style Italic

text-style-italic

Text Style Strikethrough

text-style-strikethrough

Text Style Allcaps

text-style-allcaps

Text Style Nowrap

text-style-nowrap

Text Style Quote

text-style-quote

Text Style Link

text-style-link

Text Style Muted

text-style-muted

Text Style Tagline

text-style-tagline

Text Alignment

Text Align Left

text-align-left

Text Align Center

text-align-center

Text Align Right

text-align-right

Rich Text

Rich Text Style

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

List item
List item
List item

Buttons

Button

Buttons With Icons

Button With Icon

Button

Button Secondary With Icon

Button

Button Link With Icon

Button

Button Alternate With Icon

Button

Button Secondary Alternate With Icon

Button

Button Link Alternate With Icon

Button

Shadows

shadow-xsmall

shadow-small

shadow-medium

shadow-large

shadow-xlarge

Other UI Elements

Tab Link

Category Filter Link

Slider Arrow

Tag

Tag Text

Tag

Tag Alternate

Tag

Tag Text Alternate

Tag

Form Elements

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Icons (Image)

Icon XXSmall

Icon XSmall

Icon Small

Icon Medium

Icon Large

Icon XLarge

Icon 1x1 XXSmall

Icon 1x1 XSmall

Icon 1x1 Small

Icon 1x1 Medium

Icon 1x1 Large

Icon 1x1 XLarge

Icons (Embed)

Icon Embed XXSmall

Icon Embed XSmall

Icon Embed Small

Icon Embed Medium

Icon Embed Large

Icon Embed XLarge

Radiuses

Radius Small

Radius Medium

Radius Large

Radius Round

Paddings

Padding Bottom

Padding Top

Padding Vertical

Padding Horizontal

Padding Left

Padding Right

Padding 0

Padding XXSmall

Padding XSmall

Padding Small

Padding Medium

Padding Large

Padding XLarge

Padding XXLarge

Margins

Margin Bottom

Margin Top

Margin Vertical

Margin Horizontal

Margin Left

Margin Right

Margin 0

Margin XXSmall

Margin XSmall

Margin Small

Margin Medium

Margin Large

Margin XLarge

Margin XXLarge

Spacers

Spacer XXSmall

Spacer XSmall

Spacer Small

Spacer Medium

Spacer Large

Spacer XLarge

Spacer XXLarge

Structure Classes

Page Wrapper

Main Wrapper

Container Small

Container Medium

Container Large

Padding Global

Padding Section Small

Padding Section Medium

Padding Section Large

Button Group

Max Widths

Max Width Full

Max Width Full Tablet

Max Width Full Mobile Landscape

Max Width Full Portrait

Max Width XXLarge

Max Width XLarge

Max Width Large

Max Width Medium

Max Width Small

Max Width XSmall

Max Width XXSmall

Utility Classes

Hide

This element is hidden