Tokens

calc(4 / var(--w-base-rem) * 1rem)

Use for elements that are smaller than 24px in size i.e. checkbox.

calc(8 / var(--w-base-rem) * 1rem)

Default border-radius. Use it for small individual elements such as buttons, form elements.

calc(16 / var(--w-base-rem) * 1rem)

Large border-radius. Use it for containers that hold other elements, i.e. modals, cards, popovers.

calc(24 / var(--w-base-rem) * 1rem)

999px

Border-radius for pill-shaped elements such as tags.

50%

Border-radius for circles.

inset 0px -1px 0px 0px rgba(0, 0, 0, 0.08), 0px 1px 1.5px -1px rgba(0, 0, 0, 0.04), 0px 1px 3px 0px rgba(0, 0, 0, 0.02);

Use for static elements on the page that need more emphasis.

0px 0px 1px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px 0px rgba(0, 0, 0, 0.08), 0px 2px 4px 0px rgba(0, 0, 0, 0.06), 0px 4px 8px 0px rgba(0, 0, 0, 0.04), 0px 6px 12px 0px rgba(0, 0, 0, 0.02);

Use for all pop out elements such as tooltips, popovers, toasts, dropdowns.

0px 1px 2px 0px rgba(0, 0, 0, 0.02), 0px 2px 4px 0px rgba(0, 0, 0, 0.02), 0px 4px 8px 0px rgba(0, 0, 0, 0.04) , 0px 8px 16px 0px rgba(0, 0, 0, 0.04), 0px 12px 24px 0px rgba(0, 0, 0, 0.06), 0px 16px 32px 0px rgba(0, 0, 0, 0.06);

Use for big elements that affect the whole view and need focus such as dialogs, modals.

320px

544px

768px

992px

1280px

1440px

#D8DADA

Use to frame your content. Default borders are critical to understanding a page layout.

#AFB4B4

Use it to highlight the hover state on the primary border color.

#E8EAEA

Use it for dividers to suggest a separation among components, like table rows.

#888F8F

Use it for small interactive elements that need to be highlighted on the interface, like checkboxes or radio buttons

#00a085

Use for interactive text or icons like links or buttons.

#38a203

Use for positive or successful messages. For example, task completion or changes saved.

#E3AA00

Use to highlight messages that require the user’s attention or pending statuses.

#f35a47

Use to emphasize a negative or dangerous situation where an action is required.

#4e8de9

Use for informative or neutral messages.

#F7F8F8

Primary background color for the entire user interface.

#fff

Use it to level up content across the page, like in a card.

#F3F5F5

Use it to create a higher contrast when you stack multiple surfaces, like forms inside cards for example.

hsla(180, 5%, 91%, .6)

Use it for a hover state on all neutral backgrounds.

hsla(180, 3%, 85%, .6)

Use it for an active state on all neutral backgrounds.

hsla(180, 4%, 15%, .5)

The default color for backdrops. Use it for modal windows to distinguish them from the layer underneath.

#D8DADA

Use it as the default background color to represent placeholders.

#E8EAEA

Use as the default background for components that need to be placed over all surfaces, like badges.

#888F8F

Use for elements that need to stand out against the interface, but don’t require immediate action i.e. control elements like checkboxes or radio buttons

#3D4343

Use when you need to highlight surfaces and bring the contrast up, like with tooltips.

#4A5151

Use it for a hover state on the inverted background.

#565F5F

Use it for an active state on the inverted background.

#DFF9F2

Use for interactive text or icons like links or buttons.

#C1F5E7

Use it for a hover state on the accent background.

#8febd5

Use it for an active state on the accent background.

#007C68

Pair with "foreground-accent-inverted" to highlight icons, buttons or interactive parts of the interface.

#006a59

Use it for a hover state on the "accent-inverted" background.

#025b4c

Use it for an active state on the "accent-inverted" background.

#DBF0CE

Use for positive or successful messages. For example, task completion or changes saved.

#bde5a7

Use it for a hover state on the success background.

#76c651

Use it for an active state on the success background.

#1C7F00

Pair with "foreground-success-inverted" to highlight a positive or successful message.

#FFF6BA

Pair with "foreground-warning" to highlight messages that require the user’s attention or pending statuses.

#FFEC73

Use it for a hover state on the warning background.

#FFD728

Use it for an active state on the warning background.

#FFD728

Pair with "foreground-warning" to highlight messages that require the user’s attention or pending statuses.

#FFE5DE

Pair with "foreground-danger" to highlight a negative or dangerous situation where an action is required.

#ffcfc3

Use it for a hover state on the danger background.

#ff9681

Use it for an active state on the danger background.

#C9392D

Pair with "foreground-danger-inverted" to highlight a negative or dangerous situation where an action is required.

#ae2f25

Use it for a hover state on the "danger-inverted" background.

#96281f

Use it for an active state on the "danger-inverted" background.

#E2E9FF

Use for informative or neutral messages.

#cbd9ff

Use it for a hover state on the info background.

#8eb2fd

Use it for an active state on the info background.

#256EC3

Pair with "foreground-info-inverted" to highlight an informative message.

#242727

The main color for content throughout the interface. Can be used on body or titles.

#565F5F

Use for secondary content that is not critical to understanding the flow of the interface.

#888F8F

Use it for placeholder text or as the default color for icons.

#F7F8F8

Use it on elements with "background-inverted", like toasts or tooltips.

#006a59

Use for interactive text or icons like links or buttons.

#F2FCF8

Pair with "background-accent-inverted" to highlight icons, buttons or interactive parts of the interface.

#176d00

Use for positive or successful messages. For example, task completion.

#F8FBF5

Pair with "background-success-inverted" to highlight a positive or successful message.

#865200

Use for messages that require the user’s attention or pending statuses.

#ae2f25

Use for a negative or dangerous situation where an action is required.

#FEFAF8

Pair with "background-danger-inverted" to highlight a negative or dangerous situation.

#1b5ea9

Use it for an informative state on the info background.

#F8FAFE

Pair with "background-info-inverted" to highlight an informative situation.

#c6c6c6

Use to create a subtle representation of the color. Pair with tag-foreground-gray

#898989

Use when color is purely decorative and doesn’t contain any text.

#6f6f6f

Use to create a highly visible representation of a color and when element using it includes text. Pair with tag-foreground-gray-inverted

#c6c6cd

Use to create a subtle representation of the color. Pair with tag-foreground-slategray

#878895

Use when color is purely decorative and doesn’t contain any text.

#6e6e7f

Use to create a highly visible representation of a color and when element using it includes text. Pair with tag-foreground-slategray-inverted

#e5bbca

Use to create a subtle representation of the color. Pair with tag-foreground-pink

#c76c8f

Use when color is purely decorative and doesn’t contain any text.

#b84772

Use to create a highly visible representation of a color and when element using it includes text. Pair with tag-foreground-pink-inverted

#feb3b3

Use to create a subtle representation of the color. Pair with tag-foreground-red

#f54b4b

Use when color is purely decorative and doesn’t contain any text.

#c83e3e

Use to create a highly visible representation of a color and when element using it includes text. Pair with tag-foreground-red-inverted

#e6bfa5

Use to create a subtle representation of the color. Pair with tag-foreground-orange

#c9733a

Use when color is purely decorative and doesn’t contain any text.

#ba4e06

Use to create a highly visible representation of a color and when element using it includes text. Pair with tag-foreground-orange-inverted

#feecd3

Use to create a subtle representation of the color. Pair with tag-foreground-yellow

#fdb95b

Use when color is purely decorative and doesn’t contain any text.

#e2a24a

Use to create a highly visible representation of a color and when element using it includes text. Pair with tag-foreground-yellow-inverted

#c6cb90

Use to create a subtle representation of the color. Pair with tag-foreground-olive

#859019

Use when color is purely decorative and doesn’t contain any text.

#6c7515

Use to create a highly visible representation of a color and when element using it includes text. Pair with tag-foreground-olive-inverted

#2edebe

Use to create a subtle representation of the color. Pair with tag-foreground-teal

#1b9a83

Use when color is purely decorative and doesn’t contain any text.

#167d6b

Use to create a highly visible representation of a color and when element using it includes text. Pair with tag-foreground-teal-inverted

#8fd1dd

Use to create a subtle representation of the color. Pair with tag-foreground-tealblue

#1a95ad

Use when color is purely decorative and doesn’t contain any text.

#157a8d

Use to create a highly visible representation of a color and when element using it includes text. Pair with tag-foreground-tealblue-inverted

#83cffb

Use to create a subtle representation of the color. Pair with tag-foreground-skyblue

#2591ce

Use when color is purely decorative and doesn’t contain any text.

#1e75a7

Use to create a highly visible representation of a color and when element using it includes text. Pair with tag-foreground-skyblue-inverted

#bac4f7

Use to create a subtle representation of the color. Pair with tag-foreground-blue

#6b81ee

Use when color is purely decorative and doesn’t contain any text.

#5668c5

Use to create a highly visible representation of a color and when element using it includes text. Pair with tag-foreground-blue-inverted

#d3bbfc

Use to create a subtle representation of the color. Pair with tag-foreground-lavender

#9979cf

Use when color is purely decorative and doesn’t contain any text.

#7c62a8

Use to create a highly visible representation of a color and when element using it includes text. Pair with tag-foreground-lavender-inverted

#debce0

Use to create a subtle representation of the color. Pair with tag-foreground-purple

#b76ebc

Use when color is purely decorative and doesn’t contain any text.

#a54bab

Use to create a highly visible representation of a color and when element using it includes text. Pair with tag-foreground-purple-inverted

#424242

Use for texts and icons. Pair with tag-background-gray

#f7f7f7

Use for texts and icons. Pair with tag-background-gray-inverted

#404154

Use for texts and icons. Pair with tag-background-slategray

#f8f8f8

Use for texts and icons. Pair with tag-background-slategray-inverted

#6f2a44

Use for texts and icons. Pair with tag-background-pink

#fbf6f8

Use for texts and icons. Pair with tag-background-pink-inverted

#782525

Use for texts and icons. Pair with tag-background-red

#fff6f6

Use for texts and icons. Pair with tag-background-red-inverted

#722e01

Use for texts and icons. Pair with tag-background-orange

#fbf6f2

Use for texts and icons. Pair with tag-background-orange-inverted

#563e1c

Use for texts and icons. Pair with tag-background-yellow

#fff6ea

Use for texts and icons. Pair with tag-background-yellow-inverted

#40460d

Use for texts and icons. Pair with tag-background-olive

#f8f9f1

Use for texts and icons. Pair with tag-background-olive-inverted

#40460d

Use for texts and icons. Pair with tag-background-teal

#f8f9f1

Use for texts and icons. Pair with tag-background-teal-inverted

#0d4954

Use for texts and icons. Pair with tag-background-tealblue

#f1f9fb

Use for texts and icons. Pair with tag-background-tealblue-inverted

#124664

Use for texts and icons. Pair with tag-background-skyblue

#f0f9fe

Use for texts and icons. Pair with tag-background-skyblue-inverted

#343f76

Use for texts and icons. Pair with tag-background-blue

#f6f8fe

Use for texts and icons. Pair with tag-background-blue-inverted

#4a3b64

Use for texts and icons. Pair with tag-background-lavender

#faf7ff

Use for texts and icons. Pair with tag-background-lavender-inverted

#652b68

Use for texts and icons. Pair with tag-background-purple

#faf6fb

Use for texts and icons. Pair with tag-background-purple-inverted

InterVariable, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif

Inter is the default UI font family utilized by all our applications.

calc(12 / var(--w-base-rem) * 1rem)

Caption

calc(14 / var(--w-base-rem) * 1rem)

Body

calc(14 / var(--w-base-rem) * 1rem)

Sub-Section Heading

calc(16 / var(--w-base-rem) * 1rem)

Section Heading

calc(24 / var(--w-base-rem) * 1rem)

Display Heading

calc(14 / var(--w-base-rem) * 1rem)

Caption

calc(16 / var(--w-base-rem) * 1rem)

Body

calc(16 / var(--w-base-rem) * 1rem)

Sub-Section Heading

calc(18 / var(--w-base-rem) * 1rem)

Section Heading

calc(28 / var(--w-base-rem) * 1rem)

Display Heading

450

Body

Default font weight for body and captions

600

Heading

Default font weight for headings

550

Emphasis

It will serve as an emphasis style that can be used to drive attention or priority to certain text elements. Perfect use for button states and active tabs.

1.5

Body

Default line height for body and captions

1.25

Heading

Default line height for headings

1.15

Condensed

Use this line height if you need text to take less space. Avoid using with multi-line paragraphs

calc(8 / var(--w-base-rem) * 1rem)

Space S

Use it to space out small components in the UI

calc(16 / var(--w-base-rem) * 1rem)

Space M

Use it to space out small components in the UI

calc(32 / var(--w-base-rem) * 1rem)

Space L

Use it to separate articles and sections in every view.

calc(64 / var(--w-base-rem) * 1rem)

Space XL

Use it to separate articles and sections in every view.

300

It is meant for elements that should stick to the page's viewport.

600

Use it for elements that pop out on the screen and cover other elements, e.g. dropdown menu, popover, tooltip.

900

Use it for elements that open a new modality for the user and completely cover the initial window, e.g. modal dialog.

1000

It is meant for system notifications that should provide feedback to users, e.g toast messages.