Color System Overview

Every color token source in the Liminal Space design system, rendered from actual production imports. No hardcoded hex values — everything you see is live from the 12+ token files.

12 TS files·2 CSS files·88 palette stops·7 factors × 4 variants·12 archetypes × 7 signatures·4 adaptive presets

1. Chakra Foundations

7 frozen canonical hues — the ontological source of truth for all factor colors.

chakra-tokens.ts → CHAKRA_COLORS

Redroot#e63a59

#ff7b7a

Orangesacral#ffa500

#ffae89

YellowsolarPlexus#fff06c

#ffed9f

Greenheart#9fe758

#c6ed9f

Tealthroat#0ed7f2

#82eaf8

VioletthirdEye#8e66fb

#c09cfc

Magentacrown#ff00ff

#f2a0ea

Top row: base (solid) / Bottom: soft (muted). Meaning: Errors, critical, foundation · Creativity, innovation, new · Warnings, attention, power · Success, growth, positive · Communication, expression · AI, intelligence, insights · Premium, cosmic, special moments

2. Frontier Direction

Warm black + cream palette. Ink/paper/silver/gold — the visual scaffold of the app.

frontier.ts → frontier

Core Palette

#0f0f10

InkBackground

#f3f1ef

PaperPrimary text

#b8b2ab

SilverSecondary text

#FFDD88

GoldAccent

Text Hierarchy

Primary#f3f1ef

Secondary#e3ddd7

Subtle#f3f1efd9

Glass Variants

standard

heavy

subtle

input

3. Greyscale

12-step perceptually uniform neutral ramp.

chakra-tokens.ts → GREYSCALE

1#fafafa

2#f4f4f5

3#e4e4e7

4#d4d4d8

5#a1a1aa

6#71717a

7#52525b

8#3f3f46

9#27272a

10#18181b

11#09090b

12#000000

4. 7-Factor Coherence Colors

Canonical factor → chakra → color mapping. Primary, light, dark, muted, glow, and gradient per factor.

v3/factors.ts → factorColors + factorMeta

stability

Root · Earth

primary

light

dark

muted

vitality

Sacral · Water/Fire

primary

light

dark

muted

agency

Solar Plexus · Fire

primary

light

dark

muted

connection

Heart · Air/Water

primary

light

dark

muted

expression

Throat · Ether

primary

light

dark

muted

clarity

Third Eye · Light

primary

light

dark

muted

wholeness

Crown · Consciousness

primary

light

dark

muted

5. Generated OKLCH Ramps

Build-time generated tonal ramps from 7 chakra hues. 11 stops × 8 hues = 88 colors.

generated/palette.ts ← scripts/generate-palette.ts (culori OKLCH)

root

100

200

300

400

500

600

700

800

900

950

sacral

100

200

300

400

500

600

700

800

900

950

solar

100

200

300

400

500

600

700

800

900

950

heart

100

200

300

400

500

600

700

800

900

950

throat

100

200

300

400

500

600

700

800

900

950

thirdEye

100

200

300

400

500

600

700

800

900

950

crown

100

200

300

400

500

600

700

800

900

950

grey

100

200

300

400

500

600

700

800

900

950

500 stops (highlighted) are pinned to canonical base hex. Other stops share the same hue, varying only in lightness/chroma.Full detail view →

6. Transition Phase Colors

5 phases of transition with semantic colors. Shown from two sources: chromatic (adaptive) and domain (static).

v3/chromatic.ts → phaseColors + domain-colors.ts → phaseColors

EndingLetting go, release

chromatic

domainAutumn

LiminalUncertainty, potential

chromatic

domainWinter

EmergingActivation, new growth

chromatic

domainSpring

MomentumEnergy, movement

chromatic

domainSummer

IntegrationWholeness, harvest

chromatic

domainHarvest

7. Chromatic Fluidity (Adaptive)

Colors shift based on coherence state — the interface mirrors the user. 4 presets shown.

v3/chromatic.ts → chromaticPresets, getAdaptivePalette()

Highcoherence: 85%

Primary text

Secondary text

Muted text

Accent

sat: 1.00 · bri: 1.00

Mediumcoherence: 55%

Primary text

Secondary text

Muted text

Accent

sat: 0.85 · bri: 0.95

Lowcoherence: 30%

Primary text

Secondary text

Muted text

Accent

sat: 0.65 · bri: 0.85

Driftcoherence: 15%

Primary text

Secondary text

Muted text

Accent

sat: 0.50 · bri: 0.75

8. Archetype Colors

12 Jungian archetypes with domain colors (static) and energy signatures (7-factor computed palette).

domain-colors.ts → archetypeColors + archetype-signatures.ts → ARCHETYPE_SIGNATURES

oracle#4a4680

warrior#c94a4a

healer#4a9c6b

sovereign#d4a845

trickster#a855f7

lover#e879a9

sage#6b8dad

creator#f59e0b

caregiver#10b981

explorer#3b82f6

magician#8b5cf6

judge#6b7280

Energy Signature Matrix (12 × 7)

Archetype	stab	vita	agen	conn	expr	clar	whol
oracle	0.4	0.3	0.3	0.6	0.7	1.0	0.9
warrior	0.9	0.8	1.0	0.3	0.5	0.6	0.2
healer	0.5	0.4	0.3	1.0	0.8	0.6	0.7
sovereign	0.8	0.5	0.9	0.6	0.4	0.7	1.0
trickster	0.2	0.9	0.6	0.5	1.0	0.8	0.3
lover	0.4	0.9	0.3	1.0	0.7	0.4	0.6
sage	0.6	0.3	0.5	0.4	0.8	1.0	0.7
creator	0.3	1.0	0.8	0.4	0.7	0.6	0.5
caregiver	0.8	0.5	0.4	1.0	0.6	0.4	0.7
explorer	0.2	0.8	0.7	0.3	1.0	0.7	0.4
magician	0.3	0.6	0.7	0.4	0.6	1.0	0.9
judge	0.8	0.3	1.0	0.3	0.5	0.7	0.6

9. Tarot Suit Colors

4 suits mapped to elemental energies. Shared between client and server for spread rendering.

lib/tarot/suit-colors.ts → SUIT_COLORS

🔥wandsFire

primary

secondary

accent

💧cupsWater

primary

secondary

accent

🌬swordsAir

primary

secondary

accent

🌍pentaclesEarth

primary

secondary

accent

10. Architecture Map

How the 12+ color token files relate. Arrows indicate import dependencies.

All files in src/styles/design-system/ + src/lib/tarot/

Foundation (no deps)

chakra-tokens.tsfrontier.tscolors.ts

Generated

generated/palette.tsgenerated/palette.cssgenerated/tailwind-colors.ts

V3 Canonical

v3/factors.tsv3/chromatic.tsv3/factor-bridge.ts

Semiotic

archetype-signatures.ts

Domain (legacy)

domain-colors.tsliminal-colors.tsdomain/index.ts

Application

tarot/suit-colors.ts

chakra-tokens.ts → v3/factors.ts → v3/chromatic.ts

chakra-tokens.ts → archetype-signatures.ts (+ v3/factors.ts)

generated/palette.ts → v3/factors.ts (light/dark/muted stops)

colors.ts → tarot/suit-colors.ts