Moon liveview storybook Moon Liveview Storybook

Tokens

If you are already using Moon DS v2, please follow the migration guide, to kickstart the migration process.

Tokens are named variables that store specific design decisions, making it easy to apply them throughout a project.

Space

space-XX is a spacing token, which may be applied to margin , padding , width , height , gap and other properties. To make it work with TailwindCSS, you need to add an appropriate utility prefix (for example: py-space-4 , gap-space-4 , h-space-4 , etc.).

Visual Class name Value
*-space-0
*-space-1
*-space-2
*-space-4
*-space-6
*-space-8
*-space-10
*-space-12
*-space-14
*-space-16
*-space-18
*-space-20
*-space-24
*-space-28
*-space-32
*-space-36
*-space-40
*-space-48
*-space-56
*-space-64
*-space-72
*-space-80
*-space-88
*-space-96
*-space-104
*-space-112
*-space-120
*-space-128
*-space-136
*-space-144
*-space-152
*-space-160

Radius

rounded-XX is a border radius token. You may also target different corners separately by using TailwindCSS utilities (for example: rounded-t-4 , rounded-bs-4 , etc.).

Visual Class name Value
rounded-0
rounded-2
rounded-4
rounded-6
rounded-8
rounded-12
rounded-16
rounded-20
rounded-24
rounded-32
rounded-full

Border width

border-XXX is a border width token. You may also target different borders separately by using TailwindCSS utilities (for example: border-t-400 , border-y-400 , etc.). Additionally, may be applied to outline-XXX , ring-XXX , and divide-XXX utility classes.

Visual Class name Value
border-0
border-1
border-2
border-4

Shadow

shadow-XXX is a box shadow token. It helps to create visual elevation of UI elements.

Visual Class name Value
shadow-100
shadow-200
shadow-300
shadow-400
shadow-500
shadow-600

Opacity

opacity-XX is an opacity token. It adds transparency to a UI element.

Visual Class name Value
opacity-0
opacity-20
opacity-40
opacity-60
opacity-80
opacity-100

Paragraph

text-body-XXX is a paragraph text token. It is a shorthand CSS property for setting the font-weight font-size/line-height font-family of text in a single declaration.

Visual Class name Value
Moon Design System
text-body-100
Moon Design System
text-body-200
Moon Design System
text-body-300
Moon Design System
text-body-400
Moon Design System
text-body-500

Heading

text-heading-XXX is a heading text token.

Visual Class name Value
Moon Design System
text-heading-100
Moon Design System
text-heading-200
Moon Design System
text-heading-300
Moon Design System
text-heading-400
Moon Design System
text-heading-500

Background color

bg-xxxx is a background color token. It may be applied to background-color CSS property only.

Visual Class name Value
bg-primary
bg-secondary
bg-tertiary
bg-brand
bg-brand-subtle
bg-inverse
bg-positive
bg-caution
bg-negative
bg-info
bg-discovery
bg-active
bg-hover
bg-backdrop
bg-force-light
bg-force-dark
bg-transparent

Text color

text-xxxx is a text color token. It should be applied to text-related colors only.

Visual Class name Value
Moon Design System text-primary
Moon Design System text-secondary
Moon Design System text-brand
Moon Design System text-inverse
Moon Design System text-positive
Moon Design System text-caution
Moon Design System text-negative
Moon Design System text-info
Moon Design System text-discovery
Moon Design System text-active
Moon Design System text-link
Moon Design System text-force-light
Moon Design System text-force-dark

Icon color

icon-xxxx is an icon color token. It should be applied to icon-related colors only. Works in combination with Moon icons.

Visual Class name Value
icon-primary
icon-secondary
icon-brand
icon-inverse
icon-positive
icon-caution
icon-negative
icon-info
icon-discovery
icon-active
icon-force-light
icon-force-dark

Border color

border-xxxx is a border color token. You may also target different borders separately by using TailwindCSS utilities (for example: border-t-primary , border-y-primary , etc.). Additionally, may be applied to outline-xxxx , ring-xxxx , and divide-xxxx utility classes.

Visual Class name Value
border-primary
border-secondary
border-brand
border-brand-subtle
border-positive
border-caution
border-negative
border-info
border-discovery
border-active
border-force-light
border-force-dark