Skip to content
Theme UI Gallery
View Source
ButtonsCardsNavigationNotices
View Theme
Made by @gill_kyle

Style Guide

Typography

Font Families

Aa
body
Aa
heading

Font Sizes

36px
24px
20px
16px
14px
12px

Font Weights

400
regular
600
bold
700
heading

Line Heights

1.5
body
1.25
heading

Colors

primary
secondary
text
background
soft
border
grayPrimary
graySecondary
translucent
modes.dark.text
modes.dark.background
modes.dark.primary
modes.dark.secondary
modes.dark.soft
modes.dark.border
modes.dark.grayPrimary
modes.dark.graySecondary
modes.dark.translucent
modes.swiss.text
modes.swiss.background
modes.swiss.primary
modes.swiss.secondary
modes.swiss.soft
modes.swiss.border
modes.swiss.grayPrimary
modes.swiss.graySecondary
modes.swiss.translucent
modes.deep.text
modes.deep.background
modes.deep.primary
modes.deep.secondary
modes.deep.soft
modes.deep.border
modes.deep.grayPrimary
modes.deep.graySecondary
modes.deep.translucent

Theme Editor

Editing your theme will update all elements styled on the page by Theme UI.
Fonts
Font Sizes
Font Weights
Line Heights
Color Mode
Space
Space is used by margin, padding, and CSS grid gaps.
Edit the Theme to see changes!