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

heading-xxsmall

Heading-xxsmall

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

Rich Text

What’s a Rich Text element?

What’s a Rich Text element?

What’s a Rich Text element?

What’s a Rich Text element?
What’s a Rich Text element?

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.

  1. zejfzzezef
  2. zefzefzef
  3. ezf

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

  • zfegfhuezf
  • ezfuhieffehuziazd
  • zedohzuef
  1. huerzfufz
  2. ezfhurgifhezzoa
  3. frgherguho
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. A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

What’s a Rich Text element?

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.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

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
Error
Error colors are used across error states and in "destructive" actions. They communicate a destructive/negative action, such as removing a user from your team.
error25
error50
error100
error200
error300
error400
error500
error600
error700
error800
error900
Warning
Warning colors can communicate that an action is potentially destructive or "on-hold". These colors are commonly used in confirmations to grab the users' attention.
warning25
warning50
warning100
warning200
warning300
warning400
warning500
warning600
warning700
warning800
warning900
Success
Success colors communicate a positive action, positive trend, or a successful confirmation. If you're using green as your primary color, it can be helpful to introduce a different hue for your success green.
success25
success50
success100
success200
success300
success400
success500
success600
success700
success800
success900
Secondary colors
Along with primary colors, it's helpful to have a selection of secondary colors to use in components such as pills, alerts and labels. These secondary colors should be used sparingly or as accents, while the primary color(s) should take precedence.
indigo25
indigo50
indigo100
indigo200
indigo300
indigo400
indigo500
indigo600
indigo700
indigo800
indigo900
blue25
blue50
blue100
blue200
blue300
blue400
blue500
blue600
blue700
blue800
blue900
pink25
pink50
pink100
pink200
pink300
pink400
pink500
pink600
pink700
pink800
pink900
orange25
orange50
orange100
orange200
orange300
orange400
orange500
orange600
orange700
orange800
orange900
Click and paste color samples (optional)
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
Click and paste background colors (optional)
Text colors
text-color-white
text-color-white
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
text-color-green25
text-color-green25
text-color-green50
text-color-green50
text-color-green100
text-color-green100
text-color-green200
text-color-green200
text-color-green300
text-color-green300
text-color-green400
text-color-green400
text-color-green500
text-color-green500
text-color-green600
text-color-green600
text-color-green700
text-color-green700
text-color-green800
text-color-green800
text-color-green900
text-color-green900
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.
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.
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
Featured icons square
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.