Style guide
Version 1.6
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 LinksAll 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
No bullet list
No bullet list
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-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
- List item
- List item
- List item
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
Add pre-made color samples
Get access to pre-made color samples and paste them below.
Get access to pre-made color samples and paste them below.
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
Add pre-made background colors
Get access to pre-made background colors and paste them below.
Get access to pre-made background colors and paste them below.
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
Add pre-made text colors
Get access to pre-made text colors and paste them below.
Get access to pre-made text colors and paste them below.
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
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
Badge groups
badge-group
is-badge-group-small
badge-group
is-primary
badge-group
is-badge-group-small
is-primary
badge-group
is-error
badge-group
is-badge-group-small
is-error
badge-group
is-warning
badge-group
is-badge-group-small
is-warning
badge-group
is-success
badge-group
is-badge-group-small
is-success
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.
icon-xxsmall
icon-xsmall
icon-small
icon-medium
icon-large
icon-xlarge
icon-custom
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.