Design System — Color Language

00 / The Complete Palette

At a Glance

Thirteen colours. One system. The proportions below reflect each colour’s weight in the Gisele identity.

Ultra Violet
Ultra Violet Dark
Cloud
Ultra Violet Bright
Ultra Violet Light
Micron
Plum
Lavender
Sage
Olive
Pink
Mint
Lime

01 / Core Palette

The Foundation

Six essential colors that define the Gisele identity. From the signature Ultra Violet to the warm neutrality of Cloud, each tone has been selected with Pantone precision.

Ultra Violet
#5F4B8B
18-3838 TCX
Primary brand color. The signature hue of Gisele.
Ultra Violet Dark
#323037
Deep foundation. Used for backgrounds and grounding elements.
Ultra Violet Bright
#B897FF
Vibrant mid-tone. For interactive states and emphasis.
Ultra Violet Light
#D5C2FF
Soft tint. For surfaces, cards, and subtle highlights.
Cloud
#F0EDE5
11-4201 TCX Cloud Dancer
Warm white. The primary light background.
Micron
#7A7A7A
20-0007 TPM
Neutral grey. For secondary text and dividers.

02 / Ultra Violet Family

A Spectrum of Violet

The Ultra Violet family spans from the deepest near-black to an airy lavender. Together they form the tonal backbone of every Gisele interface.

NameCSS VariableHex
Ultra Violet--gisele-ultra-violet#5F4B8B
Ultra Violet Dark--gisele-ultra-violet-dark#323037
Ultra Violet Bright--gisele-ultra-violet-bright#B897FF
Ultra Violet Light--gisele-ultra-violet-light#D5C2FF

03 / Data Palette

Telling Stories

Purpose-built for charts, graphs, and data visualisation. Each hue maintains sufficient contrast while harmonising with the core palette.

Plum
#7E4580
Deep violet for primary data series.
Lavender
#E9C2FF
Soft purple for secondary data series.
Sage
#CFD5BA
Muted green for tertiary data series.
Olive
#4A5520
Deep green for quaternary data series.

04 / Accent Palette

Points of Light

High-luminance accents designed for moments that demand attention — success confirmations, active states, and editorial flourishes.

Pink
#FDC2FF
Warm pink accent for highlights and callouts.
Mint
#C2FFC4
Fresh green accent for success and positive states.
Lime
#F3FFC2
Warm yellow-green accent for alerts and attention.

05 / Token Reference

Every Token

The complete colour inventory. Use the CSS custom property names in your stylesheets or reference the hex values directly.

NameCSS VariableHex
Ultra Violet--gisele-ultra-violet#5F4B8B
Ultra Violet Dark--gisele-ultra-violet-dark#323037
Ultra Violet Bright--gisele-ultra-violet-bright#B897FF
Ultra Violet Light--gisele-ultra-violet-light#D5C2FF
Cloud--gisele-cloud#F0EDE5
Micron--gisele-micron#7A7A7A
Plum--gisele-plum#7E4580
Lavender--gisele-lavender#E9C2FF
Sage--gisele-sage#CFD5BA
Olive--gisele-olive#4A5520
Pink--gisele-pink#FDC2FF
Mint--gisele-mint#C2FFC4
Lime--gisele-lime#F3FFC2