Brand
Product identity, not site personalisation.
FG Brand
--fgui-brand#0F79CC
FG UI 1.3 COLOUR SYSTEM IS A CLEAN BREAK.
There are no numbered Blue or Slate scales in the 1.3 development API. With no external consumers to protect, obsolete compatibility aliases were removed rather than carried forward.
FGUI Public Colour Roles
These are the only twelve colours normal FGUI design work needs to understand. Site owners may personalise Accent; FG Brand stays locked; neutrals and feedback roles are controlled by FGUI for visibility and contrast.
Locked
#0F79CC
Personalisation
One chosen hue; FGUI derives safe Light/Dark recipes.
Accent
--fgui-accentFG Blue by default
Neutrals
Page
--fgui-page#f5f8fb
Surface
--fgui-surface#ffffff
Border
--fgui-border#dce5ec · subtle divider
Muted
--fgui-muted#5b7180
Text
--fgui-text#344c5d
Text Strong
--fgui-text-strong#172b3a
Feedback
These are deliberately controlled by FGUI rather than site-pickable. Each main feedback colour is visible against both Light and Dark surfaces and supports a readable filled treatment.
Success
--fgui-success#087f5b
Warning
--fgui-warning#a36800
Danger
--fgui-danger#d93646
Info
--fgui-info#1675b7
Generated by FGUI
These supporting roles exist so components remain readable, but designers do not pick them. FGUI derives them from the active Light/Dark/Hybrid surface and, where applicable, the chosen Accent hue.
| Generated role | Purpose |
|---|---|
--fgui-on-accent | Readable foreground for the active Accent fill; Light and Dark recipes choose the appropriate foreground automatically. |
--fgui-on-success / --fgui-on-warning / --fgui-on-danger / --fgui-on-info | Readable foregrounds for filled feedback treatments. |
--fgui-accent-hover / --fgui-accent-active | Interactive Accent states generated from the chosen hue. |
--fgui-accent-soft / --fgui-accent-border / --fgui-accent-border-strong / --fgui-accent-ink | Accent surfaces, outlines and readable Accent text for the active theme surface. |
--fgui-success-ink / --fgui-warning-ink / --fgui-danger-ink / --fgui-info-ink | Theme-aware feedback text used on soft feedback surfaces. Signal/fill colours are not reused blindly as text. |
--fgui-*-soft / --fgui-*-border | Soft feedback surfaces and borders. |
--fgui-control-border | Internal high-visibility boundary for interactive controls. The public --fgui-border can remain a quiet divider. |
--fgui-placeholder | Readable placeholder text with normal-text contrast rather than a faint decorative grey. |
--fgui-progress-highlight | The intentional two-tone progress-bar exception; follows the selected Accent hue. |
--fgui-shadow-* / --fgui-focus / overlay recipes | Visual effects, not public palette choices. |
Contrast-safe recipe matrix
Core now treats contrast as a token contract. Normal text and filled-label pairs target at least 4.5:1; essential control/signal boundaries target at least 3:1 against adjacent surfaces.
| Combination | Current Light result | Target |
|---|---|---|
| Text / Surface | 8.98:1 | ≥ 4.5:1 |
| Muted / Surface | 5.10:1 | ≥ 4.5:1 |
| Muted / Page | 4.78:1 | ≥ 4.5:1 |
| Placeholder / Surface | 4.81:1 | ≥ 4.5:1 |
| Control boundary / Surface | 3.28:1 | ≥ 3:1 |
| Accent / On Accent | 4.54:1 default FG Blue | ≥ 4.5:1 |
| Success / On Success | 5.00:1 | ≥ 4.5:1 |
| Warning / On Warning | 4.63:1 | ≥ 4.5:1 |
| Danger / On Danger | 4.60:1 | ≥ 4.5:1 |
| Info / On Info | 4.93:1 | ≥ 4.5:1 |
Accent Personalisation is theme-awareThe same selected hue generates separate Light and Dark Accent fills. This prevents deep blue/purple choices from disappearing into Dark surfaces while keeping the user-facing control horizontal-hue-only.
Progress shade exemption
The progress bar intentionally keeps a second, lighter accent shade because the two-tone fill is part of its visual identity. It is component-specific rather than a general-purpose colour scale.
--fgui-progress-highlightDefault #5db9f5 · follows custom accent hueNo legacy colour scale
The 1.3 development line intentionally removes obsolete numbered palette tokens instead of deprecating them.
Removed now, not later
--fgui-blue-*, --fgui-slate-*, --fgui-primary* and --fgui-action* are not part of the 1.3 development API. Components use semantic FGUI roles directly.Buttons and action colours
Every current button colour treatment is shown. Hover and active colours can be inspected directly by hovering and pressing the buttons.
Core variants
Semantic actions
Notices, alerts and notifications
Default alert
Base information treatment.
Info alert
Primary information treatment.
NoteThe standard FG UI note treatment.
Success alert
Successful operation.
Warning alert
Something needs attention.
Danger alert
Destructive or failed state.
Notification
Read notification
Standard surface and border.
Unread notification
Primary-soft unread treatment.
Toast
✓
Saved successfully
Toast surface, border, shadow and success icon treatment.
Status, labels, tags and chips
DefaultSuccessWarningDangerInfoProminentSourceTagTopic label
Form and control colour states
Border, surface, text and help colours.
Disabled surface and muted text.
Checkbox / radio
Switch / range
Selection and navigation colours
Tabs
Pagination
Progress
Accent progress and loading colours
Selected card
Accent border and soft selection ring treatment.
Inverse and dark treatments
Source on dark
Visual-effect colour tokens
These are colour-bearing effects rather than flat swatches.
| Token | Current value | Purpose |
|---|---|---|
--fgui-shadow-xs | 0 1px 2px rgba(22, 45, 63, .04) | Small elevation |
--fgui-shadow-sm | 0 4px 14px rgba(22, 45, 63, .06) | Card elevation |
--fgui-shadow-md | 0 12px 34px rgba(22, 45, 63, .09) | Menus / overlays |
--fgui-shadow-lg | 0 24px 60px rgba(22, 45, 63, .14) | Large overlays / mega menus |
--fgui-focus | 0 0 0 3px rgba(15, 121, 204, .18) | Keyboard focus ring |
Advanced theme recipes
Dark, Light and Accent Personalisation use internal soft, border, ink, on-colour, control-boundary, focus, feedback and surface recipes. These are implementation roles, not a public shade palette.
Theme authors should normally start from the semantic roles shown above. FGUI derives the rest so component contrast and state behavior remain coherent.