Colors

Color names and tokens are inspired by Github Primer
We export all the colors as -lch raw token as well, so you can easily apply opacity to it

--color-brand-primary-base

Primary brand color. Used for accents and highlights.

--color-brand-primary-subtle

Subtle version of the primary brand color. Used for backgrounds and borders.

--color-brand-primary-hover

Used for slight hover highlights, like on outline buttons or checkbox inputs

--color-brand-primary-contrast

Used for text and icons on top of the primary brand color.

--color-brand-primary-emphasis

Background: Use to highlight the most important item of a view or an interface.

--color-brand-secondary-base

Secondary brand color. Used for accents and highlights.

--color-brand-secondary-subtle

Subtle version of the secondary brand color. Used for backgrounds and borders.

--color-brand-secondary-hover

Used for slight hover highlights, like on outline buttons or checkbox inputs

--color-brand-secondary-contrast

Used for text and icons on top of the secondary brand color.

--color-brand-secondary-emphasis

Background: Use to highlight the most important item of a view or an interface.

--color-text-default

Primary color for text and icons in any given interface. It should be used for body content, titles and labels.

--color-text-muted

Use for content that is secondary or that provides additional context but is not critical to understanding the flow of an interface.

--color-text-subtle

Use for placeholder text, icons or decorative foregrounds.

--color-text-on-emphasis

Use for text on top of emphasized backgrounds, such as banners, badges, and alerts.

--color-surface-default

Primary color for backgrounds in any given interface.

--color-surface-subtle

Provides visual rest and contrast against the default background.

--color-surface-inset

Can be used instead of the default background to create a focal point, such as in conversations or activity feeds.

--color-surface-emphasis

Use for backgrounds that need to stand out, such as banners, badges, and alerts.

--color-border-default

Primary color for borders in aUse to create bounds around content, for example elements inside a card. Default borders are critical to understanding a page layout.

--color-border-muted

Use for dividers to emphasize the separation between items, columns or sections.

--color-status-info-base