Light
Dark
Brand
Primary actions and links across the experience.
LIGHT #0071e3
DARK #2997ff
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
A brighter blue for interactive hover and focus states.
LIGHT #0077ed
DARK #47a9ff
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 clean, high contrast canvas for content.
LIGHT #ffffff
DARK #000000
CSS --sg-color-background
Light
Dark
Surface
Soft sections that separate stories.
LIGHT #f5f5f7
DARK #1d1d1f
CSS --sg-color-surface
Light
Dark
Raised surface
Cards and dialogs lifted above the page.
LIGHT #ffffff
DARK #2c2c2e
CSS --sg-color-surface-raised
Text
Reading colours with enough contrast for long-form content and compact controls.
Light
Dark
Text
The primary reading colour.
LIGHT #1d1d1f
DARK #f5f5f7
CSS --sg-color-text
Light
Dark
Muted text
Supporting copy that steps back.
LIGHT #6e6e73
DARK #a1a1a6
CSS --sg-color-text-muted
Borders and focus
Structure and accessibility cues that keep interactive elements discoverable.
Light
Dark
Border
Fine separators and control edges.
LIGHT #d2d2d7
DARK #424245
CSS --sg-color-border
Light
Dark
Focus ring
A visible ring for keyboard navigation.
LIGHT #0071e3
DARK #2997ff
CSS --sg-color-focus-ring
Status
Feedback colours for success, warning, information and destructive moments.
Light
Dark
Success
Completed work and positive states.
LIGHT #248a3d
DARK #30d158
CSS --sg-color-success
Light
Dark
Warning
Attention without alarm.
LIGHT #c93400
DARK #ff9f0a
CSS --sg-color-warning
Light
Dark
Information
Context and neutral notices.
LIGHT #0071a4
DARK #64d2ff
CSS --sg-color-info
Light
Dark
Danger
Destructive actions and errors.
LIGHT #d70015
DARK #ff453a
CSS --sg-color-danger
Light
Dark
On danger
Text and icons placed on the danger colour.
LIGHT #ffffff
DARK #ffffff
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: #0071e3;
}
[data-theme="dark"] {
--sg-color-brand: #2997ff;
}
.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