12 · Solar, the yellow that cares

Color

Yellow is the brand, not a warning. On light backgrounds it is almost never text, and across the whole interface meaning is carried by the icon and the word, not by color.

Yellow is the brand, not a warning

In almost every system, yellow means “caution”. Not here: Solar is the color of Heliodore and its symbol. That is why no notice, alert or state is coded with yellow, and every state carries an icon and a word. The rules are in Clinical states and semantics.

No: Solar as text on light, 1.7:1

Appointment confirmed

Yes: Deep Amber on Ivory, 5.3:1

Save appointment

Yes: Crystal on Solar, 10.2:1

Palette

Brand and symbol color.

HEX
RGB
HSL
CMYK ≈

White text on top: 1.79:1 · black: 11.74:1

Symbol on dark, primary buttons (with Crystal text) and emphasis backgrounds. Never text on light.

Accent on dark backgrounds.

HEX
RGB
HSL
CMYK ≈

White text on top: 1.44:1 · black: 14.54:1

Links, figures and symbol on Night (13.6:1).

Light of the Reflect icon.

HEX
RGB
HSL
CMYK ≈

White text on top: 1.51:1 · black: 13.94:1

Glow and highlights of the symbol. Not a text color.

Text accent on light backgrounds.

HEX
RGB
HSL
CMYK ≈

White text on top: 5.65:1 · black: 3.72:1

Links and emphasis in the light theme (5.3:1 on Ivory).

Graphic accent on light.

HEX
RGB
HSL
CMYK ≈

White text on top: 3.73:1 · black: 5.63:1

Lines, charts and very large text (3.5:1). Not for normal text.

Upper part of the Reflect icon background.

HEX
RGB
HSL
CMYK ≈

White text on top: 4.65:1 · black: 4.52:1

Gradient to #2e1f00 in the icon and on warm covers.

Lower part of the Reflect icon background.

HEX
RGB
HSL
CMYK ≈

White text on top: 16.00:1 · black: 1.31:1

Dark brand backgrounds; background of the white reversed versions.

Text and symbol on yellow.

HEX
RGB
HSL
CMYK ≈

White text on top: 18.27:1 · black: 1.15:1

Primary button labels and dark symbol on Solar (10.2:1).

Dark interface background.

HEX
RGB
HSL
CMYK ≈

White text on top: 19.67:1 · black: 1.07:1

Raised surfaces of the dark theme.

HEX
RGB
HSL
CMYK ≈

White text on top: 19.00:1 · black: 1.11:1

Text on light backgrounds.

HEX
RGB
HSL
CMYK ≈

White text on top: 18.01:1 · black: 1.17:1

Light interface background.

HEX
RGB
HSL
CMYK ≈

White text on top: 1.06:1 · black: 19.78:1

Surfaces and printed documents.

HEX
RGB
HSL
CMYK ≈

White text on top: 1.00:1 · black: 21.00:1

Secondary text on light (7.1:1).

HEX
RGB
HSL
CMYK ≈

White text on top: 7.53:1 · black: 2.79:1

Secondary text on dark (7.9:1).

HEX
RGB
HSL
CMYK ≈

White text on top: 2.50:1 · black: 8.40:1

HEX is the source of truth. CMYK is an approximation without an ICC profile: the screen yellow (#f5b800) looks different on paper, even more so on office paper. Until a proof is printed at the chosen print shop, it is not an approved value. Pantone is defined by comparing against the physical swatch book, not on screen.

Roles in the interface

Role	Light theme	Dark theme
Page background	Ivory #fbf8ef	Night #0d0b06
Surface	White #ffffff	Night 2 #131008
Main text	Ink #1b160a	#f5f5f2
Secondary text	Warm Gray #5b5441	Light Gray #a3a3ad
Primary button (background)	Solar, with #8a5f00 border	Solar
Primary button text	Crystal #1c1400	Crystal #1c1400
Links and text accent	Deep Amber #8a5f00	Glow #ffd23f
Focus ring	Ink, 3 px, with Solar halo	Glow, 3 px

On light, the Solar button has a 1 px border in Deep Amber: this way its shape stands out from the background (1.7:1 on its own) and the Crystal text still gives 10.2:1.

Usage proportion

Ivory and Night 56% Backgrounds
Ink and grays 26% Text and support
Solar 12% Brand and main action
Amber and reflections 6% Accent text and brand backgrounds

Contrast

Every pair is checked against WCAG 2.2: 4.5:1 for normal text, 3:1 for large text and interface components. What does not pass is not used for text.

Contrast between text (rows) and background (columns)
Text \ Background	Solar	Glow	Deep Amber	Amber	Crystal	Night	Ink	Ivory	Warm Gray
Solar	·	1.24:1 Fail	3.16:1 Large text only	2.09:1 Fail	10.21:1 AAA	11.00:1 AAA	10.07:1 AAA	1.68:1 Fail	4.21:1 Large text only
Glow	1.24:1 Fail	·	3.91:1 Large text only	2.58:1 Fail	12.65:1 AAA	13.62:1 AAA	12.47:1 AAA	1.36:1 Fail	5.21:1 AA
Deep Amber	3.16:1 Large text only	3.91:1 Large text only	·	1.51:1 Fail	3.23:1 Large text only	3.48:1 Large text only	3.19:1 Large text only	5.32:1 AA	1.33:1 Fail
Amber	2.09:1 Fail	2.58:1 Fail	1.51:1 Fail	·	4.90:1 AA	5.27:1 AA	4.83:1 AA	3.51:1 Large text only	2.02:1 Fail
Crystal	10.21:1 AAA	12.65:1 AAA	3.23:1 Large text only	4.90:1 AA	·	1.08:1 Fail	1.01:1 Fail	17.20:1 AAA	2.43:1 Fail
Night	11.00:1 AAA	13.62:1 AAA	3.48:1 Large text only	5.27:1 AA	1.08:1 Fail	·	1.09:1 Fail	18.52:1 AAA	2.61:1 Fail
Ink	10.07:1 AAA	12.47:1 AAA	3.19:1 Large text only	4.83:1 AA	1.01:1 Fail	1.09:1 Fail	·	16.96:1 AAA	2.39:1 Fail
Ivory	1.68:1 Fail	1.36:1 Fail	5.32:1 AA	3.51:1 Large text only	17.20:1 AAA	18.52:1 AAA	16.96:1 AAA	·	7.09:1 AAA
Warm Gray	4.21:1 Large text only	5.21:1 AA	1.33:1 Fail	2.02:1 Fail	2.43:1 Fail	2.61:1 Fail	2.39:1 Fail	7.09:1 AAA	·

Tokens

:root {
  --heliodore-solar: #f5b800;
  --heliodore-brillo: #ffd23f;
  --heliodore-destello: #ffcc33;
  --heliodore-ambar: #8a5f00;
  --heliodore-ambar2: #b07a00;
  --heliodore-reflejo: #9a6c00;
  --heliodore-sombra: #2e1f00;
  --heliodore-cristal: #1c1400;
  --heliodore-noche: #0d0b06;
  --heliodore-noche2: #131008;
  --heliodore-tinta: #1b160a;
  --heliodore-marfil: #fbf8ef;
  --heliodore-blanco: #ffffff;
  --heliodore-gris: #5b5441;
  --heliodore-gris-claro: #a3a3ad;
}

{
  "heliodore-solar": "#f5b800",
  "heliodore-brillo": "#ffd23f",
  "heliodore-destello": "#ffcc33",
  "heliodore-ambar": "#8a5f00",
  "heliodore-ambar2": "#b07a00",
  "heliodore-reflejo": "#9a6c00",
  "heliodore-sombra": "#2e1f00",
  "heliodore-cristal": "#1c1400",
  "heliodore-noche": "#0d0b06",
  "heliodore-noche2": "#131008",
  "heliodore-tinta": "#1b160a",
  "heliodore-marfil": "#fbf8ef",
  "heliodore-blanco": "#ffffff",
  "heliodore-gris": "#5b5441",
  "heliodore-gris-claro": "#a3a3ad"
}

@theme {
  --color-heliodore-solar: #f5b800;
  --color-heliodore-brillo: #ffd23f;
  --color-heliodore-destello: #ffcc33;
  --color-heliodore-ambar: #8a5f00;
  --color-heliodore-ambar2: #b07a00;
  --color-heliodore-reflejo: #9a6c00;
  --color-heliodore-sombra: #2e1f00;
  --color-heliodore-cristal: #1c1400;
  --color-heliodore-noche: #0d0b06;
  --color-heliodore-noche2: #131008;
  --color-heliodore-tinta: #1b160a;
  --color-heliodore-marfil: #fbf8ef;
  --color-heliodore-blanco: #ffffff;
  --color-heliodore-gris: #5b5441;
  --color-heliodore-gris-claro: #a3a3ad;
}