Smart Data Hub
Brand Kit /

Color

Mauve leads, Sunset points the way, and every value is here to copy.

Palette

13 colours, from the approved brand spec. Click any value to copy it. The complete token set is in Design tokens.

Brand

AaWhite text
14.7:1 · AAA

Mauve

Leads every layout.

RGB 50 32 69

AaWhite text
17.8:1 · AAA

Mauve Ink

The deepest ground, behind dark surfaces.

RGB 30 19 41

Interaction

AaOff-Black text
6.4:1 · AA

Sunset

Signature accent and the call-to-action colour.

RGB 254 110 78

AaOff-Black text
5.0:1 · AA

Sunset Hi

Hover state for Sunset.

RGB 232 90 58

AaOff-Black text
6.5:1 · AA

Coral Hi

Brighter Sunset variant.

RGB 254 114 83

AaWhite text
9.5:1 · AAA

Rust

Active and pressed state.

RGB 131 35 14

Supporting

AaOff-Black text
7.8:1 · AAA

Light Mauve

Supportive accent, never dominant.

RGB 208 151 231

AaWhite text
12.8:1 · AAA

Dark Sage

Supportive, contextual.

RGB 40 53 43

AaOff-Black text
10.6:1 · AAA

Light Sage

Supportive, contextual.

RGB 188 204 193

Neutral

AaWhite text
17.7:1 · AAA

Off-Black

Text on light surfaces.

RGB 25 24 26

AaOff-Black text
14.8:1 · AAA

Off-White

Text on dark surfaces and soft panels.

RGB 231 236 228

AaOff-Black text
16.8:1 · AAA

Bone

Warm page ground.

RGB 250 249 243

AaOff-Black text
17.7:1 · AAA

Paper

Pure white.

RGB 255 255 255

How they balance

Mauve leads. Sunset is the signature accent and the call-to-action colour. Sage and Light Mauve support and never dominate. This bar is an illustration of that order, not a measured ratio.

Text pairings, measured

Contrast is calculated from the hex values against WCAG 2.2 for the pairings this hub itself uses. Sunset on white fails for text, so call-to-action buttons put Mauve Ink on Sunset instead.

AaText on page16.8:1 · AAA
AaLight text on brand12.3:1 · AAA
AaAccent on brand5.3:1 · AA
AaBrand on page13.9:1 · AAA
AaButton text on accent6.4:1 · AA
AaAccent on page2.6:1 · Fails

Take the values with you

The brand palette as CSS custom properties or JSON.

CSS variablesPalette JSON

Guidance

The palette is a rich spectrum of purples and oranges, chosen to reflect bold innovation, professionalism, and forward momentum (SDS Brand Guidelines p.11). Mauve (#322045) is the primary brand color; Sunset (#FE6E4E) is the signature accent and the primary action/button color. Sage and light-mauve accents support, differentiate, and highlight — they must never overwhelm the composition or compete with the primary tones.

Support

Light Sage

#BCCCC1 — calm secondary surface tint; pairs with Off Black and Mauve for ADA-compliant contrast (Brand Guidelines p.11–12).

Support

Light Mauve

#D097E7 — accent for highlights and focus; also the focus-ring color in the token system.

Support

Bone

#FAF9F3 — warm paper for tertiary surfaces; keeps long-form layouts soft, not stark white.