Colors

If you're using Tailwind CSS, you can install the @qualcomm-ui/tailwind-plugin package to make each of these variables available as Tailwind classes.

Text

Text colors are used for typography throughout your application. They automatically adapt when switching between light and dark modes to maintain proper contrast ratios.

CSS Variable

--color-text-brand-accent-01

Tailwind Class

text-brand-accent-01

Value

Color

CSS Variable

--color-text-brand-accent-02

Tailwind Class

text-brand-accent-02

Value

Color

CSS Variable

--color-text-brand-primary

Tailwind Class

text-brand-primary

Value

Color

CSS Variable

--color-text-neutral-inverse

Tailwind Class

text-neutral-inverse

Value

Color

CSS Variable

--color-text-neutral-primary

Tailwind Class

text-neutral-primary

Value

Color

CSS Variable

--color-text-neutral-secondary

Tailwind Class

text-neutral-secondary

Value

Color

CSS Variable

--color-text-support-danger

Tailwind Class

text-support-danger

Value

Color

CSS Variable	Tailwind Class	Value	Color
`--color-text-brand-accent-01`	`text-brand-accent-01`
`--color-text-brand-accent-02`	`text-brand-accent-02`
`--color-text-brand-primary`	`text-brand-primary`
`--color-text-neutral-inverse`	`text-neutral-inverse`
`--color-text-neutral-primary`	`text-neutral-primary`
`--color-text-neutral-secondary`	`text-neutral-secondary`
`--color-text-support-danger`	`text-support-danger`

Icon

Icon colors ensure proper visual hierarchy and accessibility for icons. Like text colors, they automatically adjust for light and dark modes.

CSS Variable

--color-icon-brand-accent-01

Tailwind Class

text-icon-brand-accent-01

Value

Color

CSS Variable

--color-icon-brand-accent-02

Tailwind Class

text-icon-brand-accent-02

Value

Color

CSS Variable

--color-icon-brand-primary

Tailwind Class

text-icon-brand-primary

Value

Color

CSS Variable

--color-icon-neutral-inverse

Tailwind Class

text-icon-neutral-inverse

Value

Color

CSS Variable

--color-icon-neutral-primary

Tailwind Class

text-icon-neutral-primary

Value

Color

CSS Variable

--color-icon-neutral-secondary

Tailwind Class

text-icon-neutral-secondary

Value

Color

CSS Variable

--color-icon-support-danger

Tailwind Class

text-icon-support-danger

Value

Color

CSS Variable

--color-icon-support-info

Tailwind Class

text-icon-support-info

Value

Color

CSS Variable

--color-icon-support-neutral

Tailwind Class

text-icon-support-neutral

Value

Color

CSS Variable

--color-icon-support-success

Tailwind Class

text-icon-support-success

Value

Color

CSS Variable

--color-icon-support-warning

Tailwind Class

text-icon-support-warning

Value

Color

CSS Variable	Tailwind Class	Value	Color
`--color-icon-brand-accent-01`	`text-icon-brand-accent-01`
`--color-icon-brand-accent-02`	`text-icon-brand-accent-02`
`--color-icon-brand-primary`	`text-icon-brand-primary`
`--color-icon-neutral-inverse`	`text-icon-neutral-inverse`
`--color-icon-neutral-primary`	`text-icon-neutral-primary`
`--color-icon-neutral-secondary`	`text-icon-neutral-secondary`
`--color-icon-support-danger`	`text-icon-support-danger`
`--color-icon-support-info`	`text-icon-support-info`
`--color-icon-support-neutral`	`text-icon-support-neutral`
`--color-icon-support-success`	`text-icon-support-success`
`--color-icon-support-warning`	`text-icon-support-warning`

Background

Background colors include brand, neutral, and support colors. They are commonly used as colors for your app's surfaces, cards, and UI elements.

CSS Variable

--color-background-brand-accent-01

Tailwind Class

bg-brand-accent-01

Value

Color

CSS Variable

--color-background-brand-accent-02

Tailwind Class

bg-brand-accent-02

Value

Color

CSS Variable

--color-background-brand-primary-strong

Tailwind Class

bg-brand-primary-strong

Value

Color

CSS Variable

--color-background-brand-primary-subtle

Tailwind Class

bg-brand-primary-subtle

Value

Color

CSS Variable

--color-background-brand-primary

Tailwind Class

bg-brand-primary

Value

Color

CSS Variable

--color-background-neutral-00

Tailwind Class

bg-neutral-00

Value

Color

CSS Variable

--color-background-neutral-01

Tailwind Class

bg-neutral-01

Value

Color

CSS Variable

--color-background-neutral-02

Tailwind Class

bg-neutral-02

Value

Color

CSS Variable

--color-background-neutral-03

Tailwind Class

bg-neutral-03

Value

Color

CSS Variable

--color-background-neutral-04

Tailwind Class

bg-neutral-04

Value

Color

CSS Variable

--color-background-neutral-05

Tailwind Class

bg-neutral-05

Value

Color

CSS Variable

--color-background-neutral-06

Tailwind Class

bg-neutral-06

Value

Color

CSS Variable

--color-background-neutral-07

Tailwind Class

bg-neutral-07

Value

Color

CSS Variable

--color-background-neutral-08

Tailwind Class

bg-neutral-08

Value

Color

CSS Variable

--color-background-neutral-09

Tailwind Class

bg-neutral-09

Value

Color

CSS Variable

--color-background-neutral-10

Tailwind Class

bg-neutral-10

Value

Color

CSS Variable

--color-background-support-danger-medium

Tailwind Class

bg-support-danger-medium

Value

Color

CSS Variable

--color-background-support-danger-subtle

Tailwind Class

bg-support-danger-subtle

Value

Color

CSS Variable

--color-background-support-danger

Tailwind Class

bg-support-danger

Value

Color

CSS Variable

--color-background-support-info-medium

Tailwind Class

bg-support-info-medium

Value

Color

CSS Variable

--color-background-support-info-subtle

Tailwind Class

bg-support-info-subtle

Value

Color

CSS Variable

--color-background-support-info

Tailwind Class

bg-support-info

Value

Color

CSS Variable

--color-background-support-neutral-medium

Tailwind Class

bg-support-neutral-medium

Value

Color

CSS Variable

--color-background-support-neutral-subtle

Tailwind Class

bg-support-neutral-subtle

Value

Color

CSS Variable

--color-background-support-neutral

Tailwind Class

bg-support-neutral

Value

Color

CSS Variable

--color-background-support-success-medium

Tailwind Class

bg-support-success-medium

Value

Color

CSS Variable

--color-background-support-success-subtle

Tailwind Class

bg-support-success-subtle

Value

Color

CSS Variable

--color-background-support-success

Tailwind Class

bg-support-success

Value

Color

CSS Variable

--color-background-support-warning-medium

Tailwind Class

bg-support-warning-medium

Value

Color

CSS Variable

--color-background-support-warning-subtle

Tailwind Class

bg-support-warning-subtle

Value

Color

CSS Variable

--color-background-support-warning

Tailwind Class

bg-support-warning

Value

Color

CSS Variable	Tailwind Class	Value	Color
`--color-background-brand-accent-01`	`bg-brand-accent-01`
`--color-background-brand-accent-02`	`bg-brand-accent-02`
`--color-background-brand-primary-strong`	`bg-brand-primary-strong`
`--color-background-brand-primary-subtle`	`bg-brand-primary-subtle`
`--color-background-brand-primary`	`bg-brand-primary`
`--color-background-neutral-00`	`bg-neutral-00`
`--color-background-neutral-01`	`bg-neutral-01`
`--color-background-neutral-02`	`bg-neutral-02`
`--color-background-neutral-03`	`bg-neutral-03`
`--color-background-neutral-04`	`bg-neutral-04`
`--color-background-neutral-05`	`bg-neutral-05`
`--color-background-neutral-06`	`bg-neutral-06`
`--color-background-neutral-07`	`bg-neutral-07`
`--color-background-neutral-08`	`bg-neutral-08`
`--color-background-neutral-09`	`bg-neutral-09`
`--color-background-neutral-10`	`bg-neutral-10`
`--color-background-support-danger-medium`	`bg-support-danger-medium`
`--color-background-support-danger-subtle`	`bg-support-danger-subtle`
`--color-background-support-danger`	`bg-support-danger`
`--color-background-support-info-medium`	`bg-support-info-medium`
`--color-background-support-info-subtle`	`bg-support-info-subtle`
`--color-background-support-info`	`bg-support-info`
`--color-background-support-neutral-medium`	`bg-support-neutral-medium`
`--color-background-support-neutral-subtle`	`bg-support-neutral-subtle`
`--color-background-support-neutral`	`bg-support-neutral`
`--color-background-support-success-medium`	`bg-support-success-medium`
`--color-background-support-success-subtle`	`bg-support-success-subtle`
`--color-background-support-success`	`bg-support-success`
`--color-background-support-warning-medium`	`bg-support-warning-medium`
`--color-background-support-warning-subtle`	`bg-support-warning-subtle`
`--color-background-support-warning`	`bg-support-warning`

Surface

Surface colors are used for primary application surfaces like pages, modals, and overlays.

CSS Variable

--color-surface-overlay

Tailwind Class

bg-overlay

Value

Color

CSS Variable

--color-surface-primary

Tailwind Class

bg-primary

Value

Color

CSS Variable

--color-surface-raised

Tailwind Class

bg-raised

Value

Color

CSS Variable

--color-surface-secondary

Tailwind Class

bg-secondary

Value

Color

CSS Variable	Tailwind Class	Value	Color
`--color-surface-overlay`	`bg-overlay`
`--color-surface-primary`	`bg-primary`
`--color-surface-raised`	`bg-raised`
`--color-surface-secondary`	`bg-secondary`

Border

Border colors bring clarity to layouts by grouping and dividing content. They are used to divide text or components such as table rows, action button groups, and components within a panel.

CSS Variable

--color-border-brand-accent-01

Tailwind Class

border-brand-accent-01

Value

Color

CSS Variable

--color-border-brand-accent-02

Tailwind Class

border-brand-accent-02

Value

Color

CSS Variable

--color-border-brand-primary-subtle

Tailwind Class

border-brand-primary-subtle

Value

Color

CSS Variable

--color-border-brand-primary

Tailwind Class

border-brand-primary

Value

Color

CSS Variable

--color-border-neutral-00

Tailwind Class

border-neutral-00

Value

Color

CSS Variable

--color-border-neutral-01

Tailwind Class

border-neutral-01

Value

Color

CSS Variable

--color-border-neutral-02

Tailwind Class

border-neutral-02

Value

Color

CSS Variable

--color-border-neutral-03

Tailwind Class

border-neutral-03

Value

Color

CSS Variable

--color-border-neutral-10

Tailwind Class

border-neutral-10

Value

Color

CSS Variable

--color-border-support-danger

Tailwind Class

border-support-danger

Value

Color

CSS Variable

--color-border-support-info

Tailwind Class

border-support-info

Value

Color

CSS Variable

--color-border-support-neutral

Tailwind Class

border-support-neutral

Value

Color

CSS Variable

--color-border-support-success

Tailwind Class

border-support-success

Value

Color

CSS Variable

--color-border-support-warning

Tailwind Class

border-support-warning

Value

Color

CSS Variable

--color-utility-focus-border

Tailwind Class

border-focus-border

Value

Color

CSS Variable	Tailwind Class	Value	Color
`--color-border-brand-accent-01`	`border-brand-accent-01`
`--color-border-brand-accent-02`	`border-brand-accent-02`
`--color-border-brand-primary-subtle`	`border-brand-primary-subtle`
`--color-border-brand-primary`	`border-brand-primary`
`--color-border-neutral-00`	`border-neutral-00`
`--color-border-neutral-01`	`border-neutral-01`
`--color-border-neutral-02`	`border-neutral-02`
`--color-border-neutral-03`	`border-neutral-03`
`--color-border-neutral-10`	`border-neutral-10`
`--color-border-support-danger`	`border-support-danger`
`--color-border-support-info`	`border-support-info`
`--color-border-support-neutral`	`border-support-neutral`
`--color-border-support-success`	`border-support-success`
`--color-border-support-warning`	`border-support-warning`
`--color-utility-focus-border`	`border-focus-border`

Category

Category colors provide a palette for data visualization and content categorization. Each category has three variants: subtle, medium, and strong.

CSS Variable

--color-category-1-medium

Tailwind Class

*-category-1-medium

Value

Color

CSS Variable

--color-category-1-strong

Tailwind Class

*-category-1-strong

Value

Color

CSS Variable

--color-category-1-subtle

Tailwind Class

*-category-1-subtle

Value

Color

CSS Variable

--color-category-2-medium

Tailwind Class

*-category-2-medium

Value

Color

CSS Variable

--color-category-2-strong

Tailwind Class

*-category-2-strong

Value

Color

CSS Variable

--color-category-2-subtle

Tailwind Class

*-category-2-subtle

Value

Color

CSS Variable

--color-category-3-medium

Tailwind Class

*-category-3-medium

Value

Color

CSS Variable

--color-category-3-strong

Tailwind Class

*-category-3-strong

Value

Color

CSS Variable

--color-category-3-subtle

Tailwind Class

*-category-3-subtle

Value

Color

CSS Variable

--color-category-4-medium

Tailwind Class

*-category-4-medium

Value

Color

CSS Variable

--color-category-4-strong

Tailwind Class

*-category-4-strong

Value

Color

CSS Variable

--color-category-4-subtle

Tailwind Class

*-category-4-subtle

Value

Color

CSS Variable

--color-category-5-medium

Tailwind Class

*-category-5-medium

Value

Color

CSS Variable

--color-category-5-strong

Tailwind Class

*-category-5-strong

Value

Color

CSS Variable

--color-category-5-subtle

Tailwind Class

*-category-5-subtle

Value

Color

CSS Variable

--color-category-6-medium

Tailwind Class

*-category-6-medium

Value

Color

CSS Variable

--color-category-6-strong

Tailwind Class

*-category-6-strong

Value

Color

CSS Variable

--color-category-6-subtle

Tailwind Class

*-category-6-subtle

Value

Color

CSS Variable

--color-category-7-medium

Tailwind Class

*-category-7-medium

Value

Color

CSS Variable

--color-category-7-strong

Tailwind Class

*-category-7-strong

Value

Color

CSS Variable

--color-category-7-subtle

Tailwind Class

*-category-7-subtle

Value

Color

CSS Variable

--color-category-8-medium

Tailwind Class

*-category-8-medium

Value

Color

CSS Variable

--color-category-8-strong

Tailwind Class

*-category-8-strong

Value

Color

CSS Variable

--color-category-8-subtle

Tailwind Class

*-category-8-subtle

Value

Color

CSS Variable

--color-category-9-medium

Tailwind Class

*-category-9-medium

Value

Color

CSS Variable

--color-category-9-strong

Tailwind Class

*-category-9-strong

Value

Color

CSS Variable

--color-category-9-subtle

Tailwind Class

*-category-9-subtle

Value

Color

CSS Variable

--color-category-10-medium

Tailwind Class

*-category-10-medium

Value

Color

CSS Variable

--color-category-10-strong

Tailwind Class

*-category-10-strong

Value

Color

CSS Variable

--color-category-10-subtle

Tailwind Class

*-category-10-subtle

Value

Color

CSS Variable	Tailwind Class	Value	Color
`--color-category-1-medium`	`*-category-1-medium`
`--color-category-1-strong`	`*-category-1-strong`
`--color-category-1-subtle`	`*-category-1-subtle`
`--color-category-2-medium`	`*-category-2-medium`
`--color-category-2-strong`	`*-category-2-strong`
`--color-category-2-subtle`	`*-category-2-subtle`
`--color-category-3-medium`	`*-category-3-medium`
`--color-category-3-strong`	`*-category-3-strong`
`--color-category-3-subtle`	`*-category-3-subtle`
`--color-category-4-medium`	`*-category-4-medium`
`--color-category-4-strong`	`*-category-4-strong`
`--color-category-4-subtle`	`*-category-4-subtle`
`--color-category-5-medium`	`*-category-5-medium`
`--color-category-5-strong`	`*-category-5-strong`
`--color-category-5-subtle`	`*-category-5-subtle`
`--color-category-6-medium`	`*-category-6-medium`
`--color-category-6-strong`	`*-category-6-strong`
`--color-category-6-subtle`	`*-category-6-subtle`
`--color-category-7-medium`	`*-category-7-medium`
`--color-category-7-strong`	`*-category-7-strong`
`--color-category-7-subtle`	`*-category-7-subtle`
`--color-category-8-medium`	`*-category-8-medium`
`--color-category-8-strong`	`*-category-8-strong`
`--color-category-8-subtle`	`*-category-8-subtle`
`--color-category-9-medium`	`*-category-9-medium`
`--color-category-9-strong`	`*-category-9-strong`
`--color-category-9-subtle`	`*-category-9-subtle`
`--color-category-10-medium`	`*-category-10-medium`
`--color-category-10-strong`	`*-category-10-strong`
`--color-category-10-subtle`	`*-category-10-subtle`

Tailwind CSS

Typography