YoonetYoonet

Colour Palette

Core palette

Periwinkle Blue

Primary

HEX #8A9EFF

HSL 230 100% 77%

RGB 138,158,255

AA (7.0:1)

Tron Blue

Primary Alt

HEX #98E9ED

HSL 183 70% 76%

RGB 152,232,237

AAA (12.6:1)

Offwhite

Background

HEX #EEEFF4

HSL 230 21% 95%

RGB 238,239,244

AAA (15.2:1)

Dark Navy

Foreground

HEX #181925

HSL 235 21% 12%

RGB 24,25,37

AAA (15.2:1)

Rosy Pink

Secondary

HEX #FF6495

HSL 341 100% 70%

RGB 255,100,149

Fail (2.8:1)

Royal Intrigue

Secondary Alt

HEX #6B7094

HSL 233 16% 50%

RGB 108,112,145

AA (4.8:1)

CSS variables root

Token

Value (HSL)

Usage

--backgroundhsl(240 20% 97%)

Page background

--foregroundhsl(235 22% 12%)

Primary text

--cardhsl(0 0% 100%)

Card background

--card-foregroundhsl(235 22% 12%)

Card text

--borderhsl(240 15% 88%)

Default border

--inputhsl(240 15% 88%)

Input border

--primaryhsl(231 100% 77%)

Primary action

--primary-foregroundhsl(0 0% 100%)

On primary

--secondaryhsl(183 70% 76%)

Secondary surface

--secondary-foregroundhsl(235 22% 12%)

On secondary

--mutedhsl(240 20% 92%)

Muted surface

--muted-foregroundhsl(233 14% 50%)

Muted text

--accenthsl(231 100% 77%)

Accent surface

--accent-foregroundhsl(0 0% 100%)

On accent

--destructivehsl(341 100% 70%)

Error / danger action

--destructive-foregroundhsl(0 0% 100%)

On destructive

--ringhsl(231 100% 77%)

Focus ring

--radius0.5rem

Border radius

Tints and tones

Periwinkle Blue ramp

80 / 60 / 40 / 20 / 10% for tertiary fills and hover states only.

Tron Blue ramp

80 / 60 / 40 / 20 / 10% for tertiary fills and hover states only.

Usage rules

Role usage

Do

- Use Primary for actions.

- Use Accent for highlights and tags.

- Use Destructive only for critical actions.

Do not

- Do not use Destructive as a decorative accent.

- Do not use more than three strong colors per screen.

Examples: Button primary, Badge accent, Delete confirmation destructive

Brand caution: avoid PH organic campaign style in AUNZ client-facing contexts.

Page Context

Purpose

Apply color roles consistently with brand-safe and accessible usage.

Audience

Designers and engineers defining visual hierarchy and interaction states.

Updated March 2026

Key Takeaways

- Use semantic color roles, not arbitrary palette picks.

- Validate text-on-color contrast before finalizing components.

- Limit color count per screen for cleaner hierarchy.

Related Next Steps

Brand Architecture

Use brand selection guidance before applying colours.

Typography

Pair color hierarchy with type hierarchy.