Chapter 1 — Foundation · Section 01

Colors

The SOLIDA palette is built on the Material Design 3 HCT color space — a perceptually uniform system where equal tone steps produce equal perceived luminance differences. Every role ships as a locked pair; the foreground is never interchangeable between the * and *-container token. Toggle Dev Mode in the sidebar to see class annotations on each section.

Locked Pairs

Role Pairs

Each brand family ships as two pairs: the main role (solid, high-chroma) and its container variant (muted, low-chroma). Never use on-primary on a primary-container background — that's a ~1.4:1 contrast violation.

Primary family

bg-primary

Aa

#ffffff

text-on-primary

bg-primary9.1:1 AAA

bg-primary-container

Aa

#001e30

text-on-primary-container

bg-primary-container12.4:1 AAA

Secondary family

bg-secondary

Aa

#ffffff

text-on-secondary

bg-secondary8.4:1 AAA

bg-secondary-container

Aa

#3b0700

text-on-secondary-container

bg-secondary-container11.0:1 AAA

Tertiary family

bg-tertiary

Aa

#ffffff

text-on-tertiary

bg-tertiary7.8:1 AAA

bg-tertiary-container

Aa

#00201a

text-on-tertiary-container

bg-tertiary-container11.8:1 AAA

State Layers

Role Pairs — Hover States

Brand-colored surfaces don't step up a tonal tier on hover — they use M3 state layers: a semi-transparent on-* color overlay at 8% hover · 12% active. This is fundamentally different from neutral surface hover. Hover over the live cards below each family.

Primary family

primary

Rest

Card

Content here

bg-primary

Hover 8%

Card

Content here

+ state layer 8%

Active 12%

Card

Content here

+ state layer 12%

primary-container

Rest

Card

Content here

bg-primary-container

Hover 8%

Card

Content here

+ state layer 8%

Active 12%

Card

Content here

+ state layer 12%

Live — hover to trigger state layer

bg-primary

Introduction to Theology

Dr. Elena Martinez · Module 1

text-on-primary · state layer on hover

bg-primary-container

Introduction to Theology

Dr. Elena Martinez · Module 1

text-on-primary-container · state layer on hover

Secondary family

secondary

Rest

Card

Content here

bg-secondary

Hover 8%

Card

Content here

+ state layer 8%

Active 12%

Card

Content here

+ state layer 12%

secondary-container

Rest

Card

Content here

bg-secondary-container

Hover 8%

Card

Content here

+ state layer 8%

Active 12%

Card

Content here

+ state layer 12%

Live — hover to trigger state layer

bg-secondary

Introduction to Theology

Dr. Elena Martinez · Module 1

text-on-secondary · state layer on hover

bg-secondary-container

Introduction to Theology

Dr. Elena Martinez · Module 1

text-on-secondary-container · state layer on hover

Tertiary family

tertiary

Rest

Card

Content here

bg-tertiary

Hover 8%

Card

Content here

+ state layer 8%

Active 12%

Card

Content here

+ state layer 12%

tertiary-container

Rest

Card

Content here

bg-tertiary-container

Hover 8%

Card

Content here

+ state layer 8%

Active 12%

Card

Content here

+ state layer 12%

Live — hover to trigger state layer

bg-tertiary

Introduction to Theology

Dr. Elena Martinez · Module 1

text-on-tertiary · state layer on hover

bg-tertiary-container

Introduction to Theology

Dr. Elena Martinez · Module 1

text-on-tertiary-container · state layer on hover

Key Difference — Brand vs Neutral Hover

Neutral surface cards

Step up the tonal hierarchy: surface-container-low → surface-container-highest. No overlay needed.

Brand-colored surfaces

Apply a bg-on-*/8 state layer overlay. The base color stays the same — only the transparent overlay appears. Dark mode adapts automatically via CSS variables.

HCT Tonal Palettes

Full Tonal Scale

Each key color generates 13 tone values (0–100) in HCT space. The active design tokens are highlighted. Use these to understand the full palette range — never pick tones arbitrarily.

Primary — Steel Blue

#0000000
#001e3010
#00344e20
#14506d30
#1b5e8040
#2874a650
#5b9fc460
#7ab4d470
#8dc4df80
#c5e1f590
#e3f0fa95
#f8fbff99
#ffffff100

Secondary — Terracotta

#0000000
#3b070010
#5c130020
#7a2b1830
#8e392440
#b04e3650
#d4705a60
#e8957f70
#ffb4a080
#ffdad090
#ffede895
#fffbff99
#ffffff100

Tertiary — Moss Green

#0000000
#00201a10
#00373120
#1a4d4030
#31685840
#42847450
#639e8c60
#7dafa070
#87bbaa80
#bcece190
#d8f6ef95
#f4fdf999
#ffffff100

Neutral Palette

Surface Stack

Six elevation tiers derived from the neutral palette (primary hue ~224°, chroma 2). The subtle cool tint keeps surfaces subordinate to brand colors without reading as warm or purple.

surface-container-lowest

#dcdcdd

T88 · lowest

surface-container-low

#e6e5e6

T90 · low

surface-container

#ebebec

T92 · base

surface

#f0efef

T94 · page

surface-container-high

#f5f4f5

T96 · high

surface-container-highest

#fafafa

T99 · highest

WCAG Contrast

Contrast Matrix

Pre-computed contrast ratios for every foreground × background pairing in the system. Green = AAA (≥7:1) · Blue = AA (≥4.5:1) · Red = FAIL (<3:1). Verify your combination before shipping.

fg ↓ / bg →surfacesurf-lowsurf-basesurf-highprimarysecondaryprim-cont
on-surface
AAA16.1
AAA14.3
AAA15.0
AAA17.1
FAIL1.3
FAIL1.5
AAA11.2
on-surface-variant
AAA7.2
AA6.4
AA6.7
AAA7.6
FAIL2.1
FAIL2.4
AA5.0
primary
AA5.8
AA5.2
AA5.4
AA6.2
FAIL1.0
FAIL1.1
3:14.1
secondary
AA4.7
3:14.2
3:14.4
AA5.0
FAIL1.5
FAIL1.0
3:13.3
tertiary
AA4.5
3:14.0
3:14.2
AA4.8
FAIL1.4
FAIL1.6
3:13.2
on-primary
FAIL1.1
FAIL1.2
FAIL1.2
FAIL1.1
AAA9.1
AAA8.4
FAIL1.4
on-secondary (= on-primary)
FAIL1.1
FAIL1.2
FAIL1.2
FAIL1.1
AAA9.1
AAA8.4
FAIL1.4
AAA ≥7:1AA ≥4.5:13:1 minFAIL <3:1

Interactive States

Hover Behavior

Every interactive surface must jump minimum 2 tiers on hover. Hover over the cards below to see the live surface transition. Active/pressed steps 1 tier below rest — creating a spatial press metaphor.

Card on page surface

Rest

Card title

Rest state

bg-surface-container-low

#e6e5e6 · T90

Hover (preferred)

Card title

Hover state

hover:bg-surface-container-highest

#fafafa · T99

Active / Pressed

Card title

Active state

active:bg-surface-container

#ebebec · T92

Panel on card surface

Rest

Card title

Rest state

bg-surface-container

#ebebec · T92

Hover (preferred)

Card title

Hover state

hover:bg-surface-container-highest

#fafafa · T99

Active / Pressed

Card title

Active state

active:bg-surface-container-low

#e6e5e6 · T90

Live examples — hover over each card to see state changes

Neutral surfaces — tonal tier jump

Card on page

Course Title

T90 → T99 on hover

surface-container-low

Panel card

Course Title

T92 → T99 on hover

surface-container

Primary surfaces — state layer (on-primary/8%)

bg-primary

Course Title

Dr. Elena Martinez

Light · 8% state layer

bg-primary-container

Course Title

Dr. Elena Martinez

Light · 8% state layer

Secondary surfaces — state layer (on-secondary/8%)

bg-secondary

Course Title

Dr. Elena Martinez

Light · 8% state layer

bg-secondary-container

Course Title

Dr. Elena Martinez

Light · 8% state layer

Tertiary surfaces — state layer (on-tertiary/8%)

bg-tertiary

Course Title

Dr. Elena Martinez

Light · 8% state layer

bg-tertiary-container

Course Title

Dr. Elena Martinez

Light · 8% state layer

Token Interaction

Brand Colors on Surfaces

Brand tokens (primary, secondary, tertiary) can be used as text/icon colors on surface backgrounds — but only when contrast is sufficient. This table shows every surface tier with pass/fail indicators.

text-primary

#1b5e80

Aa

text

3:1

T88

4.4:1

Aa

text

AA

T90

4.9:1

Aa

text

AA

T92

5.2:1

Aa

text

AA

T94

5.8:1

Aa

text

AA

T96

6.2:1

Aa

text

AAA

T99

7:1

text-secondary

#8e3924

Aa

text

3:1

T88

3.8:1

Aa

text

3:1

T90

4.2:1

Aa

text

3:1

T92

4.4:1

Aa

text

AA

T94

4.7:1

Aa

text

AA

T96

5:1

Aa

text

AA

T99

5.7:1

text-tertiary

#316858

Aa

text

3:1

T88

3.6:1

Aa

text

3:1

T90

4:1

Aa

text

3:1

T92

4.2:1

Aa

text

AA

T94

4.5:1

Aa

text

AA

T96

4.8:1

Aa

text

AA

T99

5.4:1

When the background IS a brand color

Use the locked on-* foreground only. Never use a neutral text token on a brand background — it may appear to work in light mode but fails in dark mode when the tones invert. Hover each card to see the state-layer pattern in action.

bg-primary

Heading text

Body copy here

text-on-primary

#ffffff

AAA9.1:1

bg-primary-container

Heading text

Body copy here

text-on-primary-container

#001e30

AAA12.4:1

bg-secondary

Heading text

Body copy here

text-on-secondary

#ffffff

AAA8.4:1

bg-secondary-container

Heading text

Body copy here

text-on-secondary-container

#3b0700

AAA11.0:1

bg-tertiary

Heading text

Body copy here

text-on-tertiary

#ffffff

AAA7.8:1

bg-tertiary-container

Heading text

Body copy here

text-on-tertiary-container

#00201a

AAA11.8:1

Forbidden Combinations

✗ text-primary on bg-primary-container

~1.9:1 — invisible violation

✗ text-primary-container on bg-surface

~1.4:1 — container tokens are backgrounds only

Text Tokens

On-Surface Text

Two text tokens for light mode. Always verify against the component's own background — not the page background.

on-surface

#1c1b1f

16.1:1 AAA on surface · Body text, headings, primary labels

on-surface-variant

#49454e

7.2:1 AAA on surface · Captions, metadata, placeholders

Accessibility

The locked-pair rule is WCAG-critical. Using on-primary (white) on bg-primary-container yields ~1.4:1 — completely invisible and a WCAG 1.4.3 failure. The container variants exist specifically because the main role color is too dark/light to contrast against the container background.