Tokens

text-primary

--lunia-text-primary

Primary text such as page headings.

text-primary_on-brand

--lunia-text-primary_on-brand

Primary text on solid brand backgrounds, such as CTA sections.

text-secondary

--lunia-text-secondary

Secondary text such as labels and section headings.

text-secondary_hover

--lunia-text-secondary_hover

Secondary text in the hover state.

text-secondary_on-brand

--lunia-text-secondary_on-brand

Secondary text on solid brand backgrounds, such as CTA sections.

text-tertiary

--lunia-text-tertiary

Tertiary text such as supporting text and paragraphs.

text-tertiary_hover

--lunia-text-tertiary_hover

Tertiary text in the hover state.

text-tertiary_on-brand

--lunia-text-tertiary_on-brand

Tertiary text on solid brand backgrounds, such as CTA sections.

text-quaternary

--lunia-text-quaternary

Subtle, lower-contrast text such as footer column headings.

text-quaternary_on-brand

--lunia-text-quaternary_on-brand

Quaternary text on solid brand backgrounds, such as footers.

text-white

--lunia-text-white

Text that stays white in both light and dark mode.

text-placeholder

--lunia-text-placeholder

Placeholder text in input fields.

text-brand-primary

--lunia-text-brand-primary

Primary brand text for headings, such as pricing card titles.

text-brand-secondary

--lunia-text-brand-secondary

Brand text for brand buttons, highlights and subheadings.

text-brand-secondary_hover

--lunia-text-brand-secondary_hover

Secondary brand text in the hover state, such as brand buttons.

text-brand-tertiary

--lunia-text-brand-tertiary

Lighter brand text, such as numbers in metric cards.

text-brand-tertiary_alt

--lunia-text-brand-tertiary_alt

Tertiary brand text that turns near-white in dark mode.

text-error-primary

--lunia-text-error-primary

Error text, such as input field error messages.

text-warning-primary

--lunia-text-warning-primary

Warning text and warning messages.

text-success-primary

--lunia-text-success-primary

Success text and success messages.

text-error-primary_hover

--lunia-text-error-primary_hover

Error text in the hover state, such as destructive link buttons.

border-primary

--lunia-border-primary

Default borders for cards, menus, tables, dividers and button groups. For the edge of an input or other control, use border-control.

border-secondary

--lunia-border-secondary

Default border for most components, such as cards and dividers.

border-secondary_alt

--lunia-border-secondary_alt

Translucent border for menus and popovers that sit over content.

border-tertiary

--lunia-border-tertiary

Low-contrast border for subtle dividers.

border-brand

--lunia-border-brand

Brand border for focused and selected states.

border-brand_alt

--lunia-border-brand_alt

Brand border that turns gray in dark mode.

border-error

--lunia-border-error

Error border, such as on invalid input fields.

border-error_subtle

--lunia-border-error_subtle

Softer error border, such as on error alerts.

border-control

--lunia-border-control

Border of interactive controls when it is their only edge: inputs, text areas, code digits, selects, unchecked checkboxes and radios, secondary and utility buttons. Meets 3:1 on bg-primary and bg-secondary in both modes.

border-elevated

--lunia-border-elevated

Edge of floating surfaces such as tooltips and value labels. Near invisible in light mode, where the shadow does the work; a visible edge in dark mode, where shadows do not read.

border-control_hover

--lunia-border-control_hover

Border of inputs and text areas on pointer hover. One step stronger than border-control (neutral-500 light, neutral-400 dark).

fg-primary

--lunia-fg-primary

Highest-contrast icons and graphics.

fg-secondary

--lunia-fg-secondary

High-contrast icons, such as in buttons and menus.

fg-secondary_hover

--lunia-fg-secondary_hover

Secondary icons in the hover state.

fg-tertiary

--lunia-fg-tertiary

Medium-contrast icons, such as close buttons.

fg-tertiary_hover

--lunia-fg-tertiary_hover

Tertiary icons in the hover state.

fg-quaternary

--lunia-fg-quaternary

Low-contrast icons, such as in input fields and help icons.

fg-quaternary_hover

--lunia-fg-quaternary_hover

Quaternary icons in the hover state.

fg-white

--lunia-fg-white

Icons that stay white in both light and dark mode.

fg-brand-primary

--lunia-fg-brand-primary

Brand icons and graphics, such as progress bars and slider fills.

fg-brand-primary_alt

--lunia-fg-brand-primary_alt

Brand icons that turn gray in dark mode, such as active nav icons.

fg-brand-secondary

--lunia-fg-brand-secondary

Lighter brand graphics, such as status dots and accents.

fg-brand-secondary_alt

--lunia-fg-brand-secondary_alt

Lighter brand graphics that turn light gray in dark mode, such as link button icons.

fg-error-primary

--lunia-fg-error-primary

Error icons, such as in featured icons and alerts.

fg-error-secondary

--lunia-fg-error-secondary

Lighter error icons, such as in input fields.

fg-warning-primary

--lunia-fg-warning-primary

Warning icons, such as in featured icons and alerts.

fg-warning-secondary

--lunia-fg-warning-secondary

Lighter warning icons and graphics.

fg-success-primary

--lunia-fg-success-primary

Success icons, such as in featured icons and alerts.

fg-success-secondary

--lunia-fg-success-secondary

Lighter success icons and status dots.

fg-brand-secondary_hover

--lunia-fg-brand-secondary_hover

Secondary brand graphics in the hover state, such as link button icons.

bg-primary

--lunia-bg-primary

Primary background, such as the page and most components.

bg-primary_alt

--lunia-bg-primary_alt

Primary background that turns neutral-900 in dark mode, for raised surfaces.

bg-primary_hover

--lunia-bg-primary_hover

Hover background for items on bg-primary, such as menu items.

bg-primary-solid

--lunia-bg-primary-solid

Dark solid background, such as tooltips.

bg-secondary

--lunia-bg-secondary

Secondary background for contrast with bg-primary, such as sections.

bg-secondary_alt

--lunia-bg-secondary_alt

Secondary background that matches bg-primary in dark mode.

bg-secondary_hover

--lunia-bg-secondary_hover

Hover background for items on bg-secondary.

bg-secondary-solid

--lunia-bg-secondary-solid

Medium gray solid background, such as gray dots and badges.

bg-tertiary

--lunia-bg-tertiary

Tertiary background, such as disabled checkboxes and disabled toggle tracks.

bg-quaternary

--lunia-bg-quaternary

Quaternary background, such as progress tracks.

bg-overlay

--lunia-bg-overlay

Overlay behind modals and slideouts.

bg-brand-primary

--lunia-bg-brand-primary

Light brand background, such as brand featured icons.

bg-brand-primary_alt

--lunia-bg-brand-primary_alt

Light brand background that turns gray in dark mode.

bg-brand-secondary

--lunia-bg-brand-secondary

Brand background with more contrast, such as text selection.

bg-brand-solid

--lunia-bg-brand-solid

Solid brand background, such as primary buttons and toggles.

bg-brand-solid_hover

--lunia-bg-brand-solid_hover

Solid brand background in the hover state.

bg-brand-section

--lunia-bg-brand-section

Dark brand background for website sections, such as CTA sections.

bg-brand-section_subtle

--lunia-bg-brand-section_subtle

Softer brand section background, for use next to bg-brand-section.

bg-error-primary

--lunia-bg-error-primary

Light error background, such as error alerts.

bg-error-secondary

--lunia-bg-error-secondary

Error background with more contrast, such as error featured icons.

bg-error-solid

--lunia-bg-error-solid

Solid error background, such as destructive buttons.

bg-error-solid_hover

--lunia-bg-error-solid_hover

Solid error background in the hover state.

bg-warning-primary

--lunia-bg-warning-primary

Light warning background, such as warning alerts.

bg-warning-secondary

--lunia-bg-warning-secondary

Warning background with more contrast, such as warning featured icons.

bg-warning-solid

--lunia-bg-warning-solid

Solid warning background, such as warning badges and dots.

bg-success-primary

--lunia-bg-success-primary

Light success background, such as success alerts.

bg-success-secondary

--lunia-bg-success-secondary

Success background with more contrast, such as success featured icons.

bg-success-solid

--lunia-bg-success-solid

Solid success background, such as online status dots.

bg-control-track

--lunia-bg-control-track

Track of a toggle in the off state and of a slider. Meets 3:1 against the page and against the white toggle knob in both modes.

bg-control-track_hover

--lunia-bg-control-track_hover

Toggle track in the off state on hover.

focus-ring-error

--lunia-focus-ring-error

Focus ring color for fields in the error state.

focus-ring

--lunia-focus-ring

Brand focus ring color for keyboard focus.