Skip to content

Styleguide

Typography

d1

In the name of the Moon, I'll punish you! I am the Pretty Guardian who fights for love and Justice! I am Sailor Moon!

d2

In the name of the Moon, I'll punish you! I am the Pretty Guardian who fights for love and Justice! I am Sailor Moon!

d3

In the name of the Moon, I'll punish you! I am the Pretty Guardian who fights for love and Justice! I am Sailor Moon!

h1

In the name of the Moon, I'll punish you! I am the Pretty Guardian who fights for love and Justice! I am Sailor Moon!

h2

In the name of the Moon, I'll punish you! I am the Pretty Guardian who fights for love and Justice! I am Sailor Moon!

h3

In the name of the Moon, I'll punish you! I am the Pretty Guardian who fights for love and Justice! I am Sailor Moon!

h4

In the name of the Moon, I'll punish you! I am the Pretty Guardian who fights for love and Justice! I am Sailor Moon!

h5
In the name of the Moon, I'll punish you! I am the Pretty Guardian who fights for love and Justice! I am Sailor Moon!
h6
In the name of the Moon, I'll punish you! I am the Pretty Guardian who fights for love and Justice! I am Sailor Moon!
p

In the name of the Moon, I'll punish you! I am the Pretty Guardian who fights for love and Justice! I am Sailor Moon!

small
In the name of the Moon, I'll punish you! I am the Pretty Guardian who fights for love and Justice! I am Sailor Moon!

Buttons

Standard button

Left icon

Right icon

Both sides

Icons

Archive
ArcXp
ArrowBack
ArrowTopRight
Cat
Evergreen
Files
Globe
Lock
Logo
Paste
Person
Pizza
Smartsheet
SparkPost
Tag
WaPo
Wave

Primitive colors

This is a set of primitive colors that are used throughout modes.

neutralBody
neutral0
neutral1
neutral2
neutral3
neutral4
neutral5
neutral6
neutral7
neutral8
neutral9

Semantic colors

This is a set of semantic colors that are used between modes.

Backgrounds

theme.colors.background.weak
theme.colors.background.default
theme.colors.background.strong
theme.colors.background.stronger
theme.colors.background.strongest
theme.colors.background.body

Text

Aa
theme.colors.text.weak
Aa
theme.colors.text.default

Borders

theme.colors.border.weak
theme.colors.border.default
theme.colors.border.strong
theme.colors.border.stronger
theme.colors.border.strongest

Border radius

Border radius tokens for consistent rounded corners.

theme.borderRadius[1]
theme.borderRadius[2]
theme.borderRadius[3]
theme.borderRadius[4]

Elevation

Box shadow tokens for elevation and depth.

theme.shadows.drop

Blog elements

Blockquote

This is a blockquote

Unordered List

  • List Item
  • List Item
  • List Item

Ordered List

  1. List Item
  2. List Item
  3. List Item

Codeblock

I am code (˵ ͡° ͜ʖ ͡°˵)

Pre

I am code (˵ ͡° ͜ʖ ͡°˵)