Style guide

Client-first docs
Typography
HTML headings
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 XX Large

Heading XX Large

Heading X Large

Heading X Large

Heading Large

Heading Large

Heading Medium

Heading Medium

Heading Small

Heading Small

Heading X Small

Heading X Small

Other HTML tags
All Paragraphs

All Paragraph (HTML Tag) In a world older and more complete than ours, they move finished and complete, gifted with the extension of the senses we have lost or never attained, living by voices we shall never hear. They are not brethren, they are not underlings: they are other nations, caught with ourselves in the net of life and time, fellow prisoners of the splendour and travail of the earth.

All Links
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

  1. No bullet list

  2. No bullet list

  3. No bullet list

Text sizes
Text Size Large

In a world older and more complete than ours, they move finished and complete, gifted with the extension of the senses we have lost or never attained, living by voices we shall never hear. They are not brethren, they are not underlings: they are other nations, caught with ourselves in the net of life and time, fellow prisoners of the splendour and travail of the earth.

Text Size Medium

In a world older and more complete than ours, they move finished and complete, gifted with the extension of the senses we have lost or never attained, living by voices we shall never hear. They are not brethren, they are not underlings: they are other nations, caught with ourselves in the net of life and time, fellow prisoners of the splendour and travail of the earth.

Text Size Regular

In a world older and more complete than ours, they move finished and complete, gifted with the extension of the senses we have lost or never attained, living by voices we shall never hear. They are not brethren, they are not underlings: they are other nations, caught with ourselves in the net of life and time, fellow prisoners of the splendour and travail of the earth.

Text Size Small

In a world older and more complete than ours, they move finished and complete, gifted with the extension of the senses we have lost or never attained, living by voices we shall never hear. They are not brethren, they are not underlings: they are other nations, caught with ourselves in the net of life and time, fellow prisoners of the splendour and travail of the earth.

Text Size Tiny

In a world older and more complete than ours, they move finished and complete, gifted with the extension of the senses we have lost or never attained, living by voices we shall never hear. They are not brethren, they are not underlings: they are other nations, caught with ourselves in the net of life and time, fellow prisoners of the splendour and travail of the earth.

Text weights
Text Weight Bold
Text Weight Bold
Text Weight Semi Bold
Text Weight Semi Bold
Text Weight Medium
Text Weight Medium
Text Weight Normal
Text Weight Normal
Text letter spacings
Text Letterspacing X Wide
A Lorem ipsum dolor sit amet
Text Letterspacing Wide
A Lorem ipsum dolor sit amet
Text Letterspacing Normal
A Lorem ipsum dolor sit amet
Text Letterspacing Tight
A Lorem ipsum dolor sit amet
Text Letterspacing X Tight
A Lorem ipsum dolor sit amet
Text line heights
Text Line Height X Tall
In a world older and more complete than ours, they move finished and complete, gifted with the extension of the senses we have lost or never attained, living by voices we shall never hear. They are not brethren, they are not underlings: they are other nations, caught with ourselves in the net of life and time, fellow prisoners of the splendour and travail of the earth.
Text Line Height Tall
In a world older and more complete than ours, they move finished and complete, gifted with the extension of the senses we have lost or never attained, living by voices we shall never hear. They are not brethren, they are not underlings: they are other nations, caught with ourselves in the net of life and time, fellow prisoners of the splendour and travail of the earth.
Text Line Height Normal
In a world older and more complete than ours, they move finished and complete, gifted with the extension of the senses we have lost or never attained, living by voices we shall never hear. They are not brethren, they are not underlings: they are other nations, caught with ourselves in the net of life and time, fellow prisoners of the splendour and travail of the earth.
Text Line Height Short
In a world older and more complete than ours, they move finished and complete, gifted with the extension of the senses we have lost or never attained, living by voices we shall never hear. They are not brethren, they are not underlings: they are other nations, caught with ourselves in the net of life and time, fellow prisoners of the splendour and travail of the earth.
Text Line Height X Short
In a world older and more complete than ours, they move finished and complete, gifted with the extension of the senses we have lost or never attained, living by voices we shall never hear. They are not brethren, they are not underlings: they are other nations, caught with ourselves in the net of life and time, fellow prisoners of the splendour and travail of the earth.
Text Line Height None
In a world older and more complete than ours, they move finished and complete, gifted with the extension of the senses we have lost or never attained, living by voices we shall never hear. They are not brethren, they are not underlings: they are other nations, caught with ourselves in the net of life and time, fellow prisoners of the splendour and travail of the earth.
Text styles
Text Style Italic
Text Style Italic
Text Style Strikethrough
Text Style Strikethrough
Text Style All Caps
text style all caps
Text Style No Wrap
Text Style No Wrap
Text Style Quote
Text Style Quote
Text Style Link
Text Style Link
Text Style 2 Lines
Text Style 2 Lines
Text Style 3 Lines
Text Style 3 Lines
Text Style Muted
Text Style Muted
Text alignment
Text Align Left
Text Align Left
Text Align Center
Text Align Center
Text Align Right
Text Align Right
Rich text
Text Rich Text

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
  1. List item
  2. List item
  3. List item
Caption goes here
Colors
Primary colors
Gray (neutral)
Gray 25
Gray 50
Gray 100
Gray 200
Gray 300
Gray 400
Gray 500
Gray 600
Gray 700
Gray 800
Gray 900
Primary
Primary 25
Primary 50
Primary 100
Primary 200
Primary 300
Primary 400
Primary 500
Primary 600
Primary 700
Primary 800
Primary 900
Background colors
Background Color White
Background Color Gray 800
Background Color Gray 50
Background Color Gray 100
Background Color Primary 50
Background Color Primary 100
Background Color Primary 200
Background Color Primary 300
Text colors
Text Color White
Text Color White
Text Color Gray 900
Text Color Gray 900
Text Color Primary 800
Text Color Primary 800
Text Color Primary 900
Text Color Primary 900
Effects
Box shadows
Shadows allow you to add depth and realism to designs by positioning elements on a z-axis.
Shadow XX Small
Shadow X Small
Shadow Small
Shadow Medium
Shadow Large
Shadow X Large
Shadow XX Large
UI elements
Buttons
Button
Is Button Large
Button
Button Secondary
Is Button Large
Button Secondary
Button
Button Tertiary
Is Button Large
Button
Button Tertiart
Button
Button Link
Is Button Large
Button
Button Link
Badges
Badge
Is Badge Large
Label
Badge
Label
Badge
Is Badge Large
Is Primary
Label
Badge
Is Primary
Label
Form elements
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Image icons (fixed height and width)
Icon 1x1 XX Small
Icon 1x1 X Small
Icon 1x1 Small
Icon 1x1 Medium
Icon 1x1 Large
Icon 1x1 X Large
Icon 1x1 Custom
Featured icons
Icon Featured Medium
Icon Featured Large
Featured icons outline
Icon Featured Outline Medium
Icon Featured Outline Large
Featured icons square
Icon Featured Square Medium
Fire Icon
Icon Featured Square Large
Fire Icon
Images
Image aspect ratio 1:1
Image aspect ratio 4:3
Image aspect ratio 3:2
Image aspect ratio 16:9
Global utility classes
Core structures
Client-first defines a flexible core structure you can use on most pages. It's recommended that you don't delete these.
Containers
Client-first comes with 3 defined container sizes - small, medium, and large. It's recommended that you don't delete these.
Spacing
Spacing system (margin and padding) that keeps vertical and horizontal spacing global on your website. It's recommended that you don't delete these.
Responsive visibility
Show and hide elements by screen size. It's recommended that you don't delete these.
Advanced classes
More advanced but useful classes as you're building. Not required to use.