Light
Dark
Brand
Primary actions, links and selected states.
LIGHT #0d6efd
DARK #6ea8fe
CSS --sg-color-brand
Foundations
Colours
A semantic palette that adapts to the theme. Every token has a light and dark value so interfaces remain legible in either mode.
Brand
The signal colours that identify the product and mark the primary path through a task.
Light
Dark
Brand hover
The brand colour under pointer or keyboard focus.
LIGHT #0b5ed7
DARK #8bb9fe
CSS --sg-color-brand-hover
Light
Dark
On brand
Text and icons placed on the brand colour.
LIGHT #ffffff
DARK #000000
CSS --sg-color-on-brand
Backgrounds
Canvas and surface colours used to build calm, legible layers of content.
Light
Dark
Background
The base canvas behind every page.
LIGHT #ffffff
DARK #212529
CSS --sg-color-background
Light
Dark
Surface
Grouped sections and quiet panels.
LIGHT #f8f9fa
DARK #2b3035
CSS --sg-color-surface
Light
Dark
Raised surface
Cards, dialogs and controls that sit above the page.
LIGHT #ffffff
DARK #343a40
CSS --sg-color-surface-raised
Text
Reading colours with enough contrast for long-form content and compact controls.
Light
Dark
Text
Default body and heading text.
LIGHT #212529
DARK #dee2e6
CSS --sg-color-text
Light
Dark
Muted text
Supporting copy and secondary labels.
LIGHT #6c757d
DARK #adb5bd
CSS --sg-color-text-muted
Borders and focus
Structure and accessibility cues that keep interactive elements discoverable.
Light
Dark
Border
Dividers, outlines and control edges.
LIGHT #dee2e6
DARK #495057
CSS --sg-color-border
Light
Dark
Focus ring
A high visibility indicator for keyboard focus.
LIGHT #86b7fe
DARK #9ec5fe
CSS --sg-color-focus-ring
Status
Feedback colours for success, warning, information and destructive moments.
Light
Dark
Success
Completed work and healthy states.
LIGHT #198754
DARK #75b798
CSS --sg-color-success
Light
Dark
Warning
Something needs attention.
LIGHT #ffc107
DARK #ffda6a
CSS --sg-color-warning
Light
Dark
Information
Helpful context and neutral notices.
LIGHT #0dcaf0
DARK #6edff6
CSS --sg-color-info
Light
Dark
Danger
Destructive actions and errors.
LIGHT #dc3545
DARK #ea868f
CSS --sg-color-danger
Light
Dark
On danger
Text and icons placed on the danger colour.
LIGHT #ffffff
DARK #000000
CSS --sg-color-on-danger
Using the palette
The published stylesheet exposes every token as a custom property. Theme switching only swaps the values, so component rules never need to change.
Published tokens
Link the stylesheet for this version, then reference tokens directly in your own CSS.
:root {
--sg-color-brand: #0d6efd;
}
[data-theme="dark"] {
--sg-color-brand: #6ea8fe;
}
.call-to-action {
background: var(--sg-color-brand);
color: var(--sg-color-on-brand);
}Accessible by default
Text, borders and status colours are paired with a matching dark value. Use the theme toggle in the sidebar to compare the whole interface in both modes.
Published palette Light and dark Semantic names