← Round 1
CircleThrice · Modern Mystic · Design Reference

Planetary Colour System

The seven classical planet colours — hex tokens, per-planet opacity ranges, opacity matrix, coexistence with the auspice scale, and design rules for team and Claude Design sessions.

For Claude Design

This document defines the complete planetary colour system for CircleThrice. Use the CSS tokens block directly. Apply planet colours at per-planet opacity — never at full opacity for UI fills. See the design rules and collision table before placing planet tints and auspice tints on the same surface.

Foundations

The Seven Planets

Each card shows the full colour, a five-step opacity strip (10–50%), the hex token, the traditional western/Hellenistic colour association, and the recommended opacity range split by use case — UI tint (calendar highlights, orrery arc backgrounds) vs data visualisation (arc strokes, markers).

Sun
--planet-sun: #F2DC78
Warm lemon-butter gold
UI tint
20–30%
Data viz
60–80%
Moon
--planet-moon: #B0BEDE
Silver, periwinkle blue-violet
UI tint
20–30%
Data viz
60–80%
Mercury
--planet-mercury: #D4782A
Calendula orange, lac resin
UI tint
30–45%
Data viz
70–90%
Venus
--planet-venus: #45AA82
Warm teal-green, nature
UI tint
30–45%
Data viz
70–90%
Mars
--planet-mars: #A84848
Muted terracotta red
UI tint
40–55%
Data viz
70–100%
Jupiter
--planet-jupiter: #8878CC
Violet-purple, royal
UI tint
30–45%
Data viz
70–90%
Saturn
--planet-saturn: #6E6E88
Blue-slate, lead grey
UI tint
40–55%
Data viz
70–100%
Behaviour

Opacity Matrix

All seven planets stepped from 10% to 100% on --paper: #f6f9fc. Blue outlines mark the recommended UI tint range per planet. Full opacity (rightmost column) is reserved for orrery arc strokes and small data markers only — it is too dark for surface fills.

10
20
30
40
50
60
70
80
90
100%
Sun ☉
Moon ☽
Mercury ☿
Venus ♀
Mars ♂
Jupiter ♃
Saturn ♄

Blue outlines = recommended UI tint range per planet. Rightmost column = full opacity, for data viz strokes only.

Three opacity tiers
☉☽
Luminaries (Sun, Moon) — UI tint 20–30%. Below 20% they barely register on paper. Above 35% the Sun starts feeling painted rather than luminous. Their register is deliberately airy. Data viz: 60–80%.
☿♀♃
Personal planets (Mercury, Venus, Jupiter) — UI tint 30–45%. Enough chroma to read clearly at lower opacities. 30% is the minimum for distinctly coloured rather than washed-out. Jupiter requires at least 30% to clear the Very Good auspice collision. Data viz: 70–90%.
♂♄
Outer planets (Mars, Saturn) — UI tint 40–55%. Most chromically muted in the set. Below 40% they desaturate too aggressively and become hard to distinguish. Data viz: 70–100%.
Coexistence

Planet Colours vs Auspice Scale

Both palettes share cool-blue territory. Where planet tints and auspice tints appear on the same surface, specific pairs create collision risk at lower opacities. The table below is the authoritative reference — treat it as a constraint, not a guideline.

Existing auspice scale (canonical — do not alter without Ivy)
Very Good
#014e67
Good
#4d99b2
Neutral
#b9c3cb
Bad
#c86eac
Very Bad
#90286f
Collision table
Pair At 20% At 30% At 40%+ Mitigation
Moon ☽ × Good auspice High risk Medium Acceptable Both pale blue. Physis glyph ☽ required below 40%. At 30%+ Moon's violet cast separates from Good's cyan.
Jupiter ♃ × Very Good auspice Medium Acceptable Clear Purple-violet vs deep teal. Resolved at 30%+. Glyph ♃ recommended below 30%.
Saturn ♄ × Very Good auspice Medium Acceptable Clear Saturn's warm grey cast creates separation at 30%+. Glyph ♄ recommended below 30%.
Mars ♂ × Very Bad auspice Acceptable Clear Clear Orange-red vs magenta-purple. Distinct at 20%+. No special mitigation needed.
Sun, Mercury, Venus × any Clean Clean Clean Yellow, orange, warm teal-green — no collision with any auspice colour at any opacity. Use freely.
Open question for Ivy

The auspice scale was specified before Modern Mystic was finalised. At any opacity, Very Good and Very Bad sit darker in register than the planet palette at its recommended UI tint range — they will read as more emphatic than any planet colour in shared-surface contexts.

If the interface direction continues toward a lighter, brighter register, the auspice scale should be revisited in a dedicated session with Ivy. Do not change auspice values without her input.

Rules

Design Rules

These rules govern every context where planet colours appear — orrery arcs, calendar highlights, transit list markers, and any future surface. They are constraints derived from coexistence testing, not style preferences.

1
Never use planet colours at full opacity for UI fills. Full opacity is for orrery arc strokes, Physis glyph rendering, and small data markers only. Any fill or background tint uses the per-planet opacity token.
2
Use per-planet opacity, not a single global value. Sun and Moon are luminaries — airy and light. Mars and Saturn have weight and presence. A flat global opacity collapses this distinction and makes the interface feel either washed-out or heavy.
3
Below 30% opacity, never rely on colour alone for the two collision pairs. When Moon or Jupiter tints appear on the same surface as auspice tints, a Physis glyph (☽, ♃) or small-caps label must accompany the colour.
4
Planet colours encode identity. Auspice colours encode quality. These are categorically different data types. They must never share the same visual treatment — same opacity, same shape, same weight.
5
Opacity range is a constraint, not a target. Within the recommended band, choose the value that suits the surface density. One active planet: use the lower end. Three simultaneous transits: use the upper end to maintain distinction.
Reference

CSS Tokens — Copy-Ready

Drop this block into any CircleThrice prototype or template. The base colour tokens and per-planet opacity tokens are kept separate so opacity can be overridden per context.

/* Planet base colours — do not use at full opacity for UI fills */ --planet-sun: #f2dc78; /* warm lemon gold */ --planet-moon: #b0bede; /* periwinkle blue-silver */ --planet-mercury: #d4782a; /* calendula orange */ --planet-venus: #45aa82; /* warm teal-green */ --planet-mars: #a84848; /* muted terracotta red */ --planet-jupiter: #8878cc; /* violet-purple */ --planet-saturn: #6e6e88; /* blue-slate */ /* Per-planet UI tint opacity — starting points within the ranges above */ --planet-opacity-sun: 0.20; /* range 20–30% */ --planet-opacity-moon: 0.25; /* range 20–30% */ --planet-opacity-mercury: 0.35; /* range 30–45% */ --planet-opacity-venus: 0.35; /* range 30–45% */ --planet-opacity-mars: 0.45; /* range 40–55% */ --planet-opacity-jupiter: 0.35; /* range 30–45% */ --planet-opacity-saturn: 0.45; /* range 40–55% */ /* Existing auspice scale — canonical, do not alter without Ivy */ --aus-very-good: #014e67; --aus-good: #4d99b2; --aus-neutral: #b9c3cb; --aus-bad: #c86eac; --aus-very-bad: #90286f;