Color is a fundamental aspect of Lighthouse and plays a key role in defining the QubicaAMF brand identity across our digital products. Our color palette provides a range of options to create clear, engaging, and accessible user experiences.
The color system in Lighthouse is built on two layers: primitive tokens (raw fixed values, defined in Figma's primitives collection) and theme tokens (semantic aliases that reference primitives and can change across themes). Components always reference theme tokens, never primitives directly.
Theme colors
The theme colors section includes the subset of colors used to define color schemes and style. Primary and secondary can change per theme; the others are reserved for specific states and actions.
Gradients
Purely aesthetic — use for buttons or hero elements when you need to catch the user's attention. Use sparingly.
Qubica color variables
Color variations used across interactive components — buttons, labels, inputs, badges, and charts. These are primitive tokens: fixed values that do not change across themes.
Primary shades
The main brand color palette for QubicaAMF. Used for primary actions, key interface elements, and brand identity.
Secondary shades
The secondary palette is a neutral scale. Used for secondary actions, UI chrome, and supporting interface elements.
Gray shades
Used for text, backgrounds, borders, and visual hierarchy.
Red shades
Used for error messages, critical alerts, or destructive actions.
Green shades
Used for success messages, positive actions, or valid states.
Yellow shades
Used for warnings and attention-grabbing (non-critical) information.
Cyan shades
Blue-leaning cool tone. Useful for informational states, data visualization, and cool-toned accents.
Orange shades
Warm accent. Used for highlights, promotional elements, and the primary accent token.
Lime shades
Yellow-green tone. Used for the secondary accent token and data visualizations.
Turquoise shades
Teal-green tone. Base of the Laneoptions theme primary color.
Purple shades
Used for charts, tags, and status indicators with a distinct cool-violet identity.
Indigo shades
Blue-violet tone. Used for charts and multi-series data visualizations.
Ginger shades
Warm brownish-orange tone. Used in charts and visualizations as a distinct warm accent.
Pink shades
Vivid pink tone. Used in charts and data visualizations for high contrast on dark backgrounds.
Acid shades
Bright electric green. Used in charts for maximum contrast, especially on dark themes.
Color token reference
All L2 theme color tokens. Apply them via var(--token-name) in CSS — values update automatically when the active theme changes.
Brand
| Figma variable | Token | Usage |
|---|---|---|
theme/primary | --primary | Main brand color — buttons, links, active states |
theme/secondary | --secondary | Secondary actions, UI chrome |
theme/q-primary-accent | --q-primary-accent | Accent highlights — always orange across themes |
theme/q-secondary-accent | --q-secondary-accent | Secondary accent — always lime across themes |
theme/success | --success | Positive states, confirmations |
theme/danger | --danger | Errors, destructive actions |
theme/warning | --warning | Warnings, attention (non-critical) |
theme/info | --info | Informational states |
theme/light | --light | Light backgrounds, subtle fills |
theme/dark | --dark | Dark backgrounds, high contrast elements |
theme/white | --white | Pure white — fixed across all themes |
theme/black | --black | Pure black — fixed across all themes |
Body & Text
| Figma variable | Token | Usage |
|---|---|---|
theme/body-color | --body-color | Primary text color |
theme/body-secondary-color | --body-secondary-color | Secondary / subdued text |
theme/body-tertiary-color | --body-tertiary-color | Tertiary text, placeholders |
theme/q-body-quaternary-color | --q-body-quaternary-color | Quaternary text, very subtle labels |
theme/body-bg | --body-bg | Page background |
theme/q-body-container-bg | --q-body-container-bg | Card / panel surface |
theme/body-emphasis-color | --body-emphasis-color | High-contrast emphasis text |
theme/q-body-wrapper | --q-body-wrapper | Wrapper / section background |
theme/q-body-divider | --q-body-divider | Divider lines, rule separators |
theme/q-input-placeholder-color | --q-input-placeholder-color | Input placeholder text |
theme/q-body-tertiary-color-opacity-25 | --q-body-tertiary-color-opacity-25 | Subtle overlay / scrim |
Primary variants
| Figma variable | Token | Usage |
|---|---|---|
theme/q-primary-lighter | --q-primary-lighter | Hover backgrounds, tinted fills |
theme/q-primary-darker | --q-primary-darker | Active / pressed state |
theme/q-primary-opacity-50 | --q-primary-opacity-50 | Semi-transparent primary — overlays |
theme/q-primary-opacity-25 | --q-primary-opacity-25 | Subtle tinted backgrounds |
theme/q-filter-focus-border-color | --q-filter-focus-border-color | Focus ring on filters and inputs |
theme/q-form-select-option-hover-bg | --q-form-select-option-hover-bg | Dropdown option hover background |
theme/q-form-select-option-hover-color | --q-form-select-option-hover-color | Dropdown option hover text |
theme/q-primary-accent-lighter | --q-primary-accent-lighter | Light tint of the primary accent |
Secondary variants
| Figma variable | Token | Usage |
|---|---|---|
theme/q-secondary-lighter | --q-secondary-lighter | Hover backgrounds for secondary elements |
theme/q-secondary-darker | --q-secondary-darker | Active / pressed state for secondary |
theme/q-secondary-opacity-50 | --q-secondary-opacity-50 | Semi-transparent secondary |
theme/q-secondary-opacity-25 | --q-secondary-opacity-25 | Subtle secondary tinted backgrounds |
theme/q-secondary-accent-lighter | --q-secondary-accent-lighter | Light tint of the secondary accent |
Status variants
| Figma variable | Token | Usage |
|---|---|---|
theme/q-success-opacity-50 | --q-success-opacity-50 | Semi-transparent success — badges, toasts |
theme/q-success-opacity-25 | --q-success-opacity-25 | Subtle success background |
theme/q-danger-opacity-50 | --q-danger-opacity-50 | Semi-transparent danger |
theme/q-danger-opacity-25 | --q-danger-opacity-25 | Subtle danger background |
Header / Nav / Footer
| Figma variable | Token | Usage |
|---|---|---|
theme/q-navbar-bg | --q-navbar-bg | Navbar background |
theme/q-footer-bg | --q-footer-bg | Footer background |
theme/navbar-light-color | --navbar-light-color | Nav link default color |
theme/navbar-light-hover-color | --navbar-light-hover-color | Nav link hover color |
theme/navbar-light-active-color | --navbar-light-active-color | Nav link active / current page color |
theme/navbar-light-disabled-color | --navbar-light-disabled-color | Disabled nav link |
theme/navbar-light-brand-color | --navbar-light-brand-color | Brand / logo color in navbar |
theme/navbar-light-brand-hover-color | --navbar-light-brand-hover-color | Brand / logo hover color |
Component & interaction
| Figma variable | Token | Usage |
|---|---|---|
theme/component-active-bg | --component-active-bg | Active background — checkboxes, radio, selected items |
theme/component-active-color | --component-active-color | Text / icon on active background |
theme/q-component-active-hover-bg | --q-component-active-hover-bg | Hover state over active components |
theme/q-component-active-bg-opacity-50 | --q-component-active-bg-opacity-50 | Semi-transparent active background |
theme/border-color | --border-color | Default border / divider |
theme/btn-color | --btn-color | Button text color |