Day-to-Day OperationsTheme settings
Colour settings
The primary, secondary, neutral, and semantic colour palette, plus input corner radius - with IDs, CSS variables, and default hex values.
Colour settings
👤 Ops · 🛠 Dev
The Colors group defines the whole palette. Each colour is exposed as a CSS variable as an RGB
triplet (see snippets/css-variables.liquid) and consumed as rgb(var(--color-name)), so opacity
can be layered on where needed.
Primary
The main brand blue and its shades.
| Setting | ID | CSS variable | Default |
|---|---|---|---|
| Primary Base | color_primary_base | --color-primary-base | #0066CC |
| Primary Hover | color_primary_hover | --color-primary-hover | #004499 |
| Primary Dark | color_primary_dark | --color-primary-dark | #004499 |
| Primary Lighter | color_primary_lighter | --color-primary-lighter | #3399FF |
| Primary Light | color_primary_light | --color-primary-light | #0088FF |
| Primary Dusk | color_primary_dusk | --color-primary-dusk | #003366 |
Secondary
Accent orange plus supporting teals.
| Setting | ID | CSS variable | Default |
|---|---|---|---|
| Secondary Base | color_secondary_base | --color-secondary-base | #FF6B35 |
| Secondary Dark | color_secondary_dark | --color-secondary-dark | #CC5529 |
| Secondary Light | color_secondary_light | --color-secondary-light | #FF8C5A |
| Secondary Light Teal | color_secondary_light-teal | --color-secondary-light-teal | #D3EAEC |
| Secondary Light Teal 2 | color_secondary_light-teal-2 | --color-secondary-light-teal-2 | #EFFCF8 |
Neutral
Greyscale used for text, borders, and surfaces.
| Setting | ID | CSS variable | Default |
|---|---|---|---|
| White | color_neutral_white | --color-neutral-white | #FFFFFF |
| Black | color_neutral_black | --color-neutral-black | #000000 |
| Grey Text | color_neutral_grey_text | --color-neutral-grey-text | #666666 |
| 700 Grey | color_neutral_grey_700 | --color-neutral-grey-700 | #333333 |
| 500 Grey | color_neutral_grey_500 | --color-neutral-grey-500 | #808080 |
| 300 Grey | color_neutral_grey_300 | --color-neutral-grey-300 | #CCCCCC |
| 100 Grey | color_neutral_grey_100 | --color-neutral-grey-100 | #F5F5F5 |
Semantic
Status colours for success/warning/error/info messaging (e.g. validation callouts).
| Setting | ID | CSS variable | Default |
|---|---|---|---|
| Success | color_semantic_success | --color-semantic-success | #22C55E |
| Warning | color_semantic_warning | --color-semantic-warning | #F59E0B |
| Error | color_semantic_error | --color-semantic-error | #EF4444 |
| Info | color_semantic_info | --color-semantic-info | #3B82F6 |
Inputs
Also lives in the Colors group (under a "Layout" sub-header):
| Setting | ID | CSS variable | Default |
|---|---|---|---|
| Input corner radius | input_corner_radius | --style-border-radius-inputs | 4px (range 0–10) |
Use var(--style-border-radius-inputs) for input and dropdown border radius so all form controls
stay consistent.