Color Tokens

All interface colors are defined once in the Branding / Colors group in the theme editor and exposed as CSS custom properties on :root via css/_fonts.css. Make sure not to have any hard-coded values — every component reads from these tokens, so a single change in the theme editor ripples through the entire application instantly.

CSS custom properties

Defined on :root in css/_fonts.css from theme.global_colors.* fields.

CSS variable	Theme field	Default	Used for
`--color-primary`	`global_colors.primary_color`	`#5532F0`	Links, CTAs, active nav indicator, focus rings, accent bars, section underlines
`--color-secondary`	`global_colors.secondary_color`	`#eb8223`	Secondary buttons, card title text, accent highlights
`--color-heading`	`global_colors.heading_color`	`#333333`	h1–h6 elements, strong labels, table header text
`--color-body`	`global_colors.body_color`	`#68717A`	Paragraphs, table cell content, form labels, general copy
`--color-muted`	`global_colors.muted_color`	`#949494`	Captions, sidebar section labels, timestamps, placeholders
`--color-app-bg`	`global_colors.app_background`	`#EEF2F6`	Outermost `<body>` background, full-screen shell
`--color-page-bg`	`global_colors.page_color`	`#F8FAFC`	Content area background, code snippet fill
`--color-surface`	`global_colors.menu_background`	`#FFFFFF`	Cards, dropdown menus, sidebar, modals, table header background
`--color-hover-surface`	`global_colors.hover_surface`	`#F1F5F9`	Interactive hover backgrounds, striped table rows, nav hover
`--color-border`	`global_colors.border_color`	`#BBBBBB`	Input borders, card outlines, outline-secondary button border
`--color-divider`	`global_colors.divider_color`	`#E5E7EB`	Table row separators, section divider lines, card inner borders
`--color-light-grey`	`global_colors.light_grey_color`	`#C4CAD4`	Icon box shadows, action button border, subtle UI accents
`--color-table`	`global_colors.table_color`	`#E7EBF2`	Table cell border lines specifically
`--color-success`	`global_colors.success_color`	`#198754`	Success states, positive indicators, `.text-success`
`--color-warning`	`global_colors.warning_color`	`#FFC107`	Caution states, warning badges, advisory alerts
`--color-error`	`global_colors.error_color`	`#DC3545`	Error states, danger buttons, validation messages, `.text-danger`

Brand

The two hues that define the product identity. Every interactive element — buttons, links, active states — pulls from one of these two tokens. Changing either in the theme editor immediately updates every component that references it.

#5532F0

Primary

--color-primary

Links, primary buttons, active nav indicator, focus rings, section underlines, accent bars, outline-primary border & fill.

#eb8223

Secondary

--color-secondary

Secondary buttons, card title text, accent highlights, secondary-branded UI elements.

Text

Three levels of typographic emphasis covering headings, body copy, and de-emphasised supporting text. Using these tokens rather than arbitrary grey values ensures that every piece of text maintains a coherent visual hierarchy.

#333333

Heading text

--color-heading

h1–h6 elements, bold labels, table header text, strong UI copy requiring maximum contrast.

#68717A

Body text

--color-body

Paragraphs, table cell content, form labels, sidebar icon colour, general reading copy.

#949494

Muted text

--color-muted

Captions, sidebar section labels, timestamps, input placeholders, card usage descriptions, unpublished badge text.

Surfaces

Layered background tokens that create the visual depth of the application shell. Each layer sits slightly lighter than the one behind it, producing a clear sense of elevation without hard shadows.

#EEF2F6

App background

--color-app-bg

Outermost <body> background; the base layer behind all other surfaces.

#F8FAFC

Page background

--color-page-bg

Content area background, inline code snippet fill, striped table row alternate.

#FFFFFF

Surface

--color-surface

Cards, dropdown menus, sidebar, modals, table header background — the top-most resting surface.

#F1F5F9

Hover surface

--color-hover-surface

Interactive element hover backgrounds, active nav item fill, striped table rows, user-link hover.

Borders & Lines

Four tokens that handle every edge and separator in the system. Two of them — Border and Divider — are general-purpose; the other two serve the table component specifically to give finer control over cell lines vs. surrounding frames.

#BBBBBB

Border

--color-border

Input borders, card outlines, outline-secondary button border, focus ring fallback.

#E5E7EB

Divider

--color-divider

Table row separators, section rule lines, card inner dividers, scrollbar track.

#C4CAD4

Light grey

--color-light-grey

Icon box shadows, action button border (.actions--link), subtle UI accents.

#E7EBF2

Table cell border

--color-table

Table cell border lines specifically; also the wrapper border and header bottom rule.

Semantic

Universally understood signal colors. Use these — not the brand hues — wherever the interface needs to communicate an outcome. The utility classes .text-success, .text-danger, and .green-text all reference these tokens.

#198754

Success

--color-success

Success states, positive status indicators, .text-success, .green-text, status circle fill.

#FFC107

Warning

--color-warning

Caution states, warning badges, advisory alerts where action may be needed but is not yet critical.

#DC3545

Error

--color-error

Error & danger states, .btn-danger background & border, validation messages, .text-danger, archive action icon.