Style Guide

Colors

Color Palettes

B/W

Grey

Green

Yellow

Red

Custom

Text Colors

text-inherit

The quick brown fox jumps over the lazy dog.

text-black

The quick brown fox jumps over the lazy dog.

text-white

The quick brown fox jumps over the lazy dog.

text-customize

The quick brown fox jumps over the lazy dog.

Background Colors

bg-black
bg-white
bg-customize

Typography

Font Families

Aa
Inter

Text Sizes

text-xxs

The quick brown fox jumps over the lazy dog.

text-xs

The quick brown fox jumps over the lazy dog.

text-sm

The quick brown fox jumps over the lazy dog.

text-base
body

The quick brown fox jumps over the lazy dog.

text-lg

The quick brown fox jumps over the lazy dog.

text-xl

The quick brown fox jumps over the lazy dog.

text-2xl

The quick brown fox jumps over the lazy dog.

text-3xl

The quick brown fox jumps over the lazy dog.

text-4xl

The quick brown fox jumps over the lazy dog.

text-5xl

The quick brown fox jumps over the lazy dog.

text-6xl

The quick brown fox jumps over the lazy dog.

text-7xl

The quick brown fox jumps over the lazy dog.

text-8xl

The quick brown fox jumps over the lazy dog.

text-9xl

The quick brown fox jumps over the lazy dog.

Heading Sizes

H1

Heading

text-style-h1
Heading
H2

Heading

text-style-h2
Heading
H3

Heading

text-style-h3
Heading
H4

Heading

text-style-h4
Heading
H5
Heading
text-style-h5
Heading
H6
Heading
text-style-h6
Heading

Text Weights

font-thin

The quick brown fox jumps over the lazy dog.

font-extralight

The quick brown fox jumps over the lazy dog.

font-light

The quick brown fox jumps over the lazy dog.

font-normal

The quick brown fox jumps over the lazy dog.

font-medium

The quick brown fox jumps over the lazy dog.

font-semibold

The quick brown fox jumps over the lazy dog.

font-bold

The quick brown fox jumps over the lazy dog.

font-extrabold

The quick brown fox jumps over the lazy dog.

font-black

The quick brown fox jumps over the lazy dog.

Truncate & Line Clamp

line-clamp-1

Nulla dolor velit adipisicing duis excepteur esse in duis nostrud occaecat mollit incididunt deserunt sunt. Ut ut sunt laborum ex occaecat eu tempor labore enim adipisicing minim ad. Est in quis eu dolore occaecat excepteur fugiat dolore nisi aliqua fugiat enim ut cillum. Labore enim duis nostrud eu. Est ut eiusmod consequat irure quis deserunt ex. Enim laboris dolor magna pariatur. Dolor et ad sint voluptate sunt elit mollit officia ad enim sit consectetur enim.

line-clamp-2

Nulla dolor velit adipisicing duis excepteur esse in duis nostrud occaecat mollit incididunt deserunt sunt. Ut ut sunt laborum ex occaecat eu tempor labore enim adipisicing minim ad. Est in quis eu dolore occaecat excepteur fugiat dolore nisi aliqua fugiat enim ut cillum. Labore enim duis nostrud eu. Est ut eiusmod consequat irure quis deserunt ex. Enim laboris dolor magna pariatur. Dolor et ad sint voluptate sunt elit mollit officia ad enim sit consectetur enim.

line-clamp-3

Nulla dolor velit adipisicing duis excepteur esse in duis nostrud occaecat mollit incididunt deserunt sunt. Ut ut sunt laborum ex occaecat eu tempor labore enim adipisicing minim ad. Est in quis eu dolore occaecat excepteur fugiat dolore nisi aliqua fugiat enim ut cillum. Labore enim duis nostrud eu. Est ut eiusmod consequat irure quis deserunt ex. Enim laboris dolor magna pariatur. Dolor et ad sint voluptate sunt elit mollit officia ad enim sit consectetur enim.

line-clamp-4

Nulla dolor velit adipisicing duis excepteur esse in duis nostrud occaecat mollit incididunt deserunt sunt. Ut ut sunt laborum ex occaecat eu tempor labore enim adipisicing minim ad. Est in quis eu dolore occaecat excepteur fugiat dolore nisi aliqua fugiat enim ut cillum. Labore enim duis nostrud eu. Est ut eiusmod consequat irure quis deserunt ex. Enim laboris dolor magna pariatur. Dolor et ad sint voluptate sunt elit mollit officia ad enim sit consectetur enim.

line-clamp-5

Nulla dolor velit adipisicing duis excepteur esse in duis nostrud occaecat mollit incididunt deserunt sunt. Ut ut sunt laborum ex occaecat eu tempor labore enim adipisicing minim ad. Est in quis eu dolore occaecat excepteur fugiat dolore nisi aliqua fugiat enim ut cillum. Labore enim duis nostrud eu. Est ut eiusmod consequat irure quis deserunt ex. Enim laboris dolor magna pariatur. Dolor et ad sint voluptate sunt elit mollit officia ad enim sit consectetur enim.

Text Alignment

text-left

Nulla dolor velit adipisicing duis excepteur esse in duis nostrud occaecat mollit incididunt deserunt sunt. Ut ut sunt laborum ex occaecat eu tempor labore enim adipisicing minim ad.

text-center

Nulla dolor velit adipisicing duis excepteur esse in duis nostrud occaecat mollit incididunt deserunt sunt. Ut ut sunt laborum ex occaecat eu tempor labore enim adipisicing minim ad.

text-right

Nulla dolor velit adipisicing duis excepteur esse in duis nostrud occaecat mollit incididunt deserunt sunt. Ut ut sunt laborum ex occaecat eu tempor labore enim adipisicing minim ad.

text-justify

Nulla dolor velit adipisicing duis excepteur esse in duis nostrud occaecat mollit incididunt deserunt sunt. Ut ut sunt laborum ex occaecat eu tempor labore enim adipisicing minim ad.

Text Transforms

uppercase

The quick brown fox jumps over the lazy dog.

lowercase

The quick brown fox jumps over the lazy dog.

capitalize

The quick brown fox jumps over the lazy dog.

normal-case

The quick brown fox jumps over the lazy dog.

Sizing

Containers

container-xs
container-sm
container-md
container-lg
container-xl
More:
container-3xs
container-2xs
container-2xl
container-3xl
container-4xl
container-5xl
container-6xl
container-7xl

Max Widths

max-w-xs
max-w-sm
max-w-md
max-w-lg
max-w-xl
max-w-full
max-w-screen
More:
max-w-3xs
max-w-2xs
max-w-2xl
max-w-3xl
max-w-4xl
max-w-5xl
max-w-6xl
max-w-7xl

Max Heights

max-h-screen

Layout

Flexbox

flex-col-left-top
flex-col-center-top
flex-col-left-center
flex-col-center-center
flex-row-left-top
flex-row-center-top
flex-row-left-center
flex-row-center-center

Spacing

Paddings

p-2xs
p-xs
p-sm
p-md
p-lg
p-xl
p-2xl
p-3xl
p-0.125

Padding Directions

pt
pr
pb
pl
py
px

Margins

m-xxs
m-xs
m-sm
m-md
m-lg
m-xl
m-2xl
m-3xl
m-0.125

Margin Directions

mt
mr
mb
ml
my
mx

Section Paddings

sp-sm
sp-base
sp-lg

Buttons

<button> as Buttons

Button Types
Button Disabled

Form Elements

Submit Button

input[type="checkbox"]

Text Input

Subheader Subline

Please enter a valid information

Please enter a valid information

Please enter a valid information

input[type="text"]

Textarea Input

Subheader Subline

Please enter a valid information

Please enter a valid information

Please enter a valid information

input[type="text"]

Number Input

Please enter a valid information

Please enter a valid information

Please enter a valid information

input[type="number"]

Email Input

Please enter a valid information

Please enter a valid information

Please enter a valid information

input[type="email"]

Phone Input

Please enter a valid information

Please enter a valid information

Please enter a valid information

input[type="tel"]

Date Input

Please enter a valid information

Please enter a valid information

Please enter a valid information

input[type="date"]

Combobox (Select)

Option 1
Option 1
Option 1

Please choose an option

Option 1
Option 2
Option 3

Please choose an option

Option 1
Option 2
Option 3

Please choose an option

Option 1
Option 2
Option 3

Please choose an option

button[type="combobox"] + div[role="listbox"]

Checkbox Standalone Input

Please fill out the checkbox

Please fill out the checkbox

Please fill out the checkbox

Please fill out the checkbox

input[type="checkbox"]

Checkbox Group Input

Checkbox Group Label

Please choose at least one option

Checkbox Group Label

Please choose at least one option

Checkbox Group Label

Please choose at least one option

Checkbox Group Label

Please choose at least one option

[role="group"] > input[type="checkbox"]
Checkbox Group Label

Please choose at least one option

Checkbox Group Label

Please choose at least one option

Checkbox Group Label

Please choose at least one option

Checkbox Group Label

Please choose at least one option

[role="group"] > input[type="checkbox"]

Radio Group Input

Radio Group Label

Please choose an option

Radio Group Label

Please choose an option

Radio Group Label

Please choose an option

Radio Group Label

Please choose an option

[role="radiogroup"] > input[type="radio"]
Radio Group Label

Please choose an option

Radio Group Label

Please choose an option

Radio Group Label

Please choose an option

Radio Group Label

Please choose an option

[role="radiogroup"] > input[type="radio"]

Hidden Input

input[type="hidden"]

Utility

Icons

<svg> -> <use>

Utility Classes

page-padding
cover
relative