Rezi Style guide

Updated Wed. Mar 29th - CTAs
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-xxlarge

Heading-xxlarge

heading-xlarge

Heading-xlarge

heading-large

Heading-large

heading-medium

Heading-medium

heading-small

Heading-small

heading-xsmall

Heading-xsmall

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-semibold
text-weight-semibold
text-weight-medium
text-weight-medium
text-weight-normal
text-weight-normal
Text letter spacings
text-letterspacing-xwide
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-xtight
A Lorem ipsum dolor sit amet
Text line heights
text-lineheight-xtall
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-lineheight-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-lineheight-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-lineheight-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-lineheight-xshort
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-lineheight-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-allcaps
text-style-allcaps
text-style-nowrap
text-style-nowrap
text-style-quote
text-style-quote
text-style-link
text-style-2lines
text-style-2lines
text-style-3lines
text-style-3lines
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
These are the main colors that make up the majority of the colors used in the design system.
Gray (neutral)
Gray is a neutral color and is the foundation of the color system. Almost everything in UI design — text, form fields, backgrounds, dividers — are usually gray.
gray25
gray50
gray100
gray200
gray300
gray400
gray500
gray600
gray700
gray800
gray900
Primary
The primary color is your "brand" color, and is used across all interactive elements such as buttons, links, inputs, etc. This color can define the overall feel and can elicit emotion.
primary25
primary50
primary100
primary200
primary300
primary400
primary500
primary600
primary700
primary800
primary900
Background colors
.background-color-white
.background-color-gray800
.background-color-gray50
.background-color-gray100
.background-color-primary50
.background-color-primary100
.background-color-primary200
.background-color-primary300
.background-color-color
Text colors
text-color-gray25
text-color-gray25
text-color-gray50
text-color-gray50
text-color-gray100
text-color-gray100
text-color-gray200
text-color-gray200
text-color-gray300
text-color-gray300
text-color-gray400
text-color-gray400
text-color-gray500
text-color-gray500
text-color-gray600
text-color-gray600
text-color-gray700
text-color-gray700
text-color-gray800
text-color-gray800
text-color-gray900
text-color-gray900
text-color-primary25
text-color-primary25
text-color-primary50
text-color-primary50
text-color-primary100
text-color-primary100
text-color-primary200
text-color-primary200
text-color-primary300
text-color-primary300
text-color-primary400
text-color-primary400
text-color-primary500
text-color-primary500
text-color-primary600
text-color-primary600
text-color-primary700
text-color-primary700
text-color-primary800
text-color-primary800
text-color-primary900
text-color-primary900
Effects
Box shadows
Shadows allow you to add depth and realism to designs by positioning elements on a z-axis.
shadow-xxsmall
Shadow xs in Figma.
shadow-xsmall
Shadow sm in Figma.
shadow-small
Shadow md in Figma.
shadow-small
Shadow lg in Figma.
shadow-large
Shadow xl in Figma.
shadow-xlarge
Shadow 2xl in Figma.
shadow-xxlarge
Shadow 3xl in Figma.
UI elements
Buttons
button
is-button-large
Button
Button 2xl in Figma.
button
Button
Button lg in Figma.
button
is-button-small
Button
Button md in Figma.
button
is-button-xsmall
Button
Button sm in Figma.
button-secondary-gray
is-button-large
button-secondary-gray
button-secondary-gray
is-button-small
button-secondary-gray
is-button-xsmall
button-secondary
is-button-large
button-secondary
button-secondary
is-button-small
button-secondary
is-button-xsmall
button-tertiary
is-button-large
button-tertiary
button-tertiary
is-button-small
button-tertiary
is-button-xsmall
button-tertiary-gray
is-button-large
button-tertiary-gray
button-tertiary-gray
is-button-small
button-tertiary-gray
is-button-xsmall
button-link
is-button-large
button-link
button-link
is-button-xsmall
button-link-gray
is-button-large
button-link-gray
button-link-gray
is-button-xsmall
button
is-button-large
icon-only
Button 2xl in Figma.
button
icon-only
Button lg in Figma.
button
is-button-small
icon-only
Button md in Figma.
button
is-button-xsmall
icon-only
Button sm in Figma.
button-secondary-gray
is-button-large
icon-only
button-secondary-gray
icon-only
button-secondary-gray
is-button-small
icon-only
button-secondary-gray
is-button-xsmall
icon-only
button-secondary
is-button-large
icon-only
button-secondary
icon-only
button-secondary
is-button-small
icon-only
button-secondary
is-button-xsmall
icon-only
button-tertiary
is-button-large
icon-only
button-tertiary
icon-only
button-tertiary
is-button-small
icon-only
button-tertiary
is-button-xsmall
icon-only
button-tertiary-gray
is-button-large
icon-only
button-tertiary-gray
icon-only
button-tertiary-gray
is-button-small
icon-only
button-tertiary-gray
is-button-xsmall
icon-only
Badges
badge
is-badge-large
Label
badge
Label
badge
is-badge-small
Label
badge
is-badge-large
is-primary
Label
badge
is-primary
Label
badge
is-badge-small
is-primary
Label
badge
is-badge-large
is-error
Label
badge
is-error
Label
badge
is-badge-small
is-error
Label
badge
is-badge-large
is-warning
Label
badge
is-warning
Label
badge
is-badge-small
is-warning
Label
badge
is-badge-large
is-success
Label
badge
is-success
Label
badge
is-badge-small
is-success
Label
Form elements
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
CTAs

Are you struggling to write a cover that gets responses?

Your cover letter is your chance to make a great first impression, but it can be difficult to know where to start. Follow our best practices and learn to create a professional letter that will impress any employer.

Discover how to craft a perfect cover letter

Write a cover letter that gets you noticed

Are you struggling to write a cover letter that stands out from the crowd? Use our cover letter generator to create a professional, attention-grabbing cover letter in minutes.

Discover our cover letter builder

Take control of your job search with our user-friendly platform

Our powerful cover letter templates will help you showcase your best skills and qualities, making you a top candidate for any job you apply to.

Explore our free & customizable templates

Get more interviews with our cover letter generator

A powerful cover letter with correct formatting can make all the difference in your job search. Use our cover letter generator to create a professional letter that will catch employers' attention.

Start building your compelling cover letter

Create a professional resume that gets results

Increase response rates with Rezi's perfectly formatted resumes that includes tailor-made copy for each job descriptions.

Build your free resume

Say goodbye to resume rejections

Our easy-to-use platform helps you write, edit, format, and optimize your resume to perfection.

Create a powerful resume for free
Inline Sample CTAs
Used in the blog
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.
Global embed
Client-first comes with a 'global' symbol embed block. This embed block goes on every page and holds CSS styles that are used everywhere in the project.