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-xlarge

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-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-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-semibold
text-weight-semibold
text-weight-normal
text-weight-normal
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.
lightest-grey
light-grey
light-middle-grey
middle-grey
dark-grey
black
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-lightest-grey
background-color-light-grey
.background-color-primary50
.background-color-primary100
.background-color-primary200
.background-color-primary300
Text colors
text-color-white
text-color-white
text-color-lightest-grey
text-color-lightest-grey
text-color-light-grey
text-color-light-grey
text-color-light-middle-grey
text-color-light-middle-grey
text-color-middle-grey
text-color-middle-grey
text-color-dark-grey
text-color-dark-grey
text-color-black
text-color-black
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
Click and paste Text Colors (optional)
Effects
Box shadows
Shadows allow you to add depth and realism to designs by positioning elements on a z-axis.
easy-dropshadow
Shadow xs in Figma.
big-dropshadow
Shadow sm 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-v2
is-button-large
button-secondary-v2
button-secondary-v2
is-button-small
button-secondary-v2
is-button-xsmall
button-tertiary-v2
is-button-large
button-tertiary-v2
button-tertiary-v2
is-button-small
button-tertiary-v2
is-button-xsmall
Form elements
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Common SVG icons
Need more? Download 1,100+ free icons at untitledui.com/icons
Button icons
Fixed height and fixed width so icons are constrained 1:1.
Image icons (no fixed width)
Fixed height with no fixed width so images remain constrained proportionally.
Image icons (fixed height and width)
Fixed height and fixed width so images are constrained 1:1.
Featured icons
Featured icons outline
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.
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.