← Round 3
CircleThrice Member Portal

Design System · R3

The consolidated visual language for Round 3 of the member-portal redesign. Covers color tokens, typography, planetary color system, auspiciousness scale, navigation icons, and component patterns.

Jun 27, 2026 Prepared for Ivy · CircleThrice Round 3 · Member Portal
01 · Foundation
Color Tokens

CSS custom properties on :root. All portal UI references these tokens — never raw hex values — so themes and modes can be updated in one place.

--paper
#f6f9fc
Sidebar · TimeBar · Tray bg
--white
#ffffff
Main content areas
--ink
#2b3240
Body text · headings
--blue
#3f6d96
Primary · active states · links
--l-blue
#7c9bbd
Secondary blue · accents
--muted
#586073
Secondary text · labels
--icon
#8a98ad
Inactive icons · tertiary text
--rule
#cbd5e1
Stronger dividers
--vpale
#dde4ec
Hairlines · subtle dividers
--banner
#424d61
Dark callouts · night surfaces
02 · Foundation
Typography

Three typeface roles. Montserrat Alternates for all headings and small-caps labels. Open Sans for body prose. Physis exclusively for astrological glyphs — never used for Latin text.

Display / Small-caps
Montserrat Alternates
wt 400 · 500 · 600
--disp, --sc
Google Fonts
CircleThrice Portal
TIME SPAN · AUSPICIOUSNESS · ORRERY
Nav labels · section headers · pill text
Body
Open Sans
wt 300 · 400 · 600
--body
Google Fonts
A grounding day suited for steady, measured work. The pace is deliberate rather than urgent — use it to consolidate rather than launch.
Italic — Magic notes · day gloss
Glyphs
Physis
(custom font)
Astrological symbols
only — no Latin
☽ ☿ ♀ ☉ ♂ ♃ ♄
♈ ♉ ♊ ♋ ♌ ♍ ♎ ♏ ♐ ♑ ♒ ♓
Use font-variant-emoji: text to prevent emoji rendering.
Rule

Physis glyphs must always carry font-variant-emoji: text to prevent OS emoji override. Always set alongside a serif fallback: font-family: 'Physis', 'Segoe UI Symbol', serif. Never render Physis below 9px — switch to Unicode text labels instead.

03 · Planetary System
Planetary Color System

Each of the seven traditional planets has a canonical hex color, a glyph character, and a background opacity range for UI surfaces. The glyph color is always the full hex — only the fill/background uses opacity.

Glyph Planet Hex Glyph color UI bg opacity Sample
☽ Moon #b0bede #5a6882 0.40 · 0.22 · 0.08 ☽ Moon
☿ Mercury #d4782a #d4782a 0.38 · 0.20 · 0.07 ☿ Merc
♀ Venus #45aa82 #45aa82 0.35 · 0.18 · 0.06 ♀ Venus
☉ Sun #f2dc78 #b8820a 0.30 · 0.16 · 0.06 ☉ Sun
♂ Mars #a84848 #a84848 0.45 · 0.24 · 0.09 ♂ Mars
♃ Jupiter #8878cc #8878cc 0.35 · 0.18 · 0.06 ♃ Jup
♄ Saturn #6e6e88 #6e6e88 0.45 · 0.24 · 0.09 ♄ Saturn
Opacity levels — three tiers
Selected / Active pill — highest opacity (0.35–0.45). The pill background when a planet is the active selection.
Calendar cell / Range tint — medium opacity (0.18–0.24). Auspiciousness band over calendar grid cells.
Hover / Inactive pill — low opacity (0.06–0.09). Idle state, sufficient to indicate color identity without noise.
Rules

Glyphs always use the full glyph color (column 4) at opacity 1.0 — never at reduced opacity.
Sun exception: #f2dc78 is the UI/background color; #b8820a is the glyph and text color — this is intentional because the background yellow is too light for text.
Never mix two planet tints on the same surface — if a range spans two planetary periods, use a neutral (#f6f9fc) for the overlap zone.

04 · Auspiciousness
Five-Level Scale

All calendar cells, day list entries, and chart nodes carry an auspiciousness rating 1–5. Colors were chosen for accessibility on --paper (#f6f9fc) and --white (#ffffff) backgrounds. The teal/green range (4–5) and magenta/deep-magenta range (1–2) are intentionally distinct from all planet colors to avoid collision.

5 · Very Good ++
bg rgba(1,78,103,0.14) · text #014e67
Deep teal. High contrast on both white and paper. Use for ++: star days, power windows, peak cycles.
4 · Good +
bg rgba(77,153,178,0.10) · text #2d7a94
Mid teal. Sufficient contrast at 4.5:1 on white. Reads as "favorable" without alarm.
3 · Neutral ·
bg rgba(185,195,203,0.06) · text #8a98ad (--icon)
Matches --icon token. Effectively invisible background — neutral days should not attract attention.
2 · Caution −
bg rgba(200,110,172,0.09) · text #c86eac
Rose-magenta. Distinct from all planet hues. Communicates mild unfavorability without alarm.
1 · Avoid −−
bg rgba(144,40,111,0.13) · text #90286f
Deep magenta. Strong signal. Use sparingly — reserve for genuinely challenging periods, not mild friction.
Coexistence — Auspice + Planet tint on same surface
Allowed — complementary
☽ Moon hour · Good day
Moon (blue-gray) + level 4 teal. Hues are distinct. Text remains legible.
Caution — similar hues
☽ Moon + level 5
Moon (blue-gray) + level 5 deep teal — similar hue family. Reduce planet glyph opacity to 0.6 or use the text label only.
Never — same surface
♂ Mars + Avoid
Mars red on level-1 magenta. Both communicate "danger." Never stack two negative signals — use a neutral container for Mars hours on a level-1 day.
Accessibility

All five text colors achieve minimum 3:1 contrast on --paper and 4.5:1 on --white. Level 3 (--icon #8a98ad) is the only near-miss — at 3.08:1 on white it is decorative/non-informational use only. Never render level 3 as the sole means of conveying state information.

05 · Iconography
Navigation Icons

Six icons — one per portal section. Each is a 24×24 SVG drawn on a 24×24 viewBox. Two states: default (--icon #8a98ad) and active (--blue #3f6d96). Used in both the desktop left-rail and the mobile bottom tab bar.

Orrery
Active
Default
Cal
Active
Default
Plan
Active
Default
Magic
Active
Default
Sessions
Active
Default
Forums
Active
Default
  • Active state: icon color switches to --blue #3f6d96. Nav rail shows a 2px left border in --blue with 7% blue background tint.
  • Default state: icon color is --icon #8a98ad. No border, transparent background.
  • Mobile tab bar: same color logic, icons render at 22px, labels at 7px SC below.
  • Icon SVG viewBox is always 24×24. Render at 22px (desktop rail) or 22px (mobile tab).
  • Never add filled backgrounds to icons beyond the active-state tint — icons are always on --paper or --white.
06 · Components
Component Patterns

Key layout components that recur throughout the Portal. These are design patterns, not production code — implement to spec but adapt as engineering requires.

TopBar Persistent header — branding left, live clock right
Height
50px
Background
--paper (#f6f9fc)
Border
bottom 1px --vpale
Left
CircleThrice wordmark (Montserrat Alternates 600) + PORTAL label (SC 10px --muted)
Right
Live clock — DAY, MON DD, YYYY H:MM AM/PM — SC 9px 500 --icon. Updates every minute.
LeftNav (Desktop) Compact 68px icon rail — 6 sections
Width
68px fixed
Background
--paper
Border
right 1px --vpale
Item size
full width, padding 13px 4px 11px
Active item
background rgba(63,109,150,0.07) · border-left 2px --blue
Icon size
22×22px rendered
Label
SC 7px 500 uppercase letter-spacing .1em, color --icon / --blue
MobileTabBar Bottom navigation — same 6 sections
Position
fixed bottom, full width
Background
--white
Border
top 1px --vpale
Item
flex 1, icon 22px + label 7px SC below
Active
--blue border-bottom 2px + icon/label color --blue
Safe area
padding-bottom: env(safe-area-inset-bottom, 0px)
SpanTray (Desktop) Collapsible time-span selector — CAL row + ASTRO row
Background
--paper
Border
bottom 1px --vpale
Collapsed state
Single row: glyph + planet name + days pill + date range. Chevron to expand. Taps the full tray open.
Expanded state
Date header (centered: glyph · label · days pill · date range in --disp 16px 600). CAL row: date inputs + view pills (Day/Week/Month/Quarter/Half Year/Year). ASTRO row: 7 planet pills.
Pill style
border-radius 20px · SC 9px 500 · padding 3px 11px · border 0.75px
Active pill
background rgba(planet,0.16–0.40) · border planet color · text --ink
+ Collapse
SC 8px --icon, top right
MobileSpanSheet Bottom sheet — same span selection on mobile
Position
absolute bottom above tab bar, full width
Collapsed
Handle + glyph/name + days pill + date range. Shadow 0 -2px 8px rgba(30,35,48,.05).
Expanded
Date inputs (FROM → TO). GEO pills (Day/Week/Month/Quarter/Half Year/Year). ASTRO pills. All scrollable horizontal via overflow-x:auto.
Pill min-height
36px (thumb target)
TimeBar (Calendar embed) Calendar-specific selector inside the Cal tab iframe
Background
--paper
Border
bottom 1px --vpale
CAL row
Date inputs (start → end). View pills on second row: Day · Week · Month · Quarter · Half Year · Year.
ASTRO row
7 planet pills — same style as SpanTray. Active planet determined by ?sel= URL param on embed load.
Collapse/Expand
Collapsed: single row with dates + active view pill + ↑ Expand. Expanded: full two-row layout.
Persistence
View pill selection postMessages parent window with {type:'calView', view:'month'} so Portal sel syncs.
PlanetRail Right-side detail tray — opens on planet click in Orrery
Default state
Closed (no planet selected on load)
Width
240px, flex-shrink 0
Trigger
Click a planet dot in the Orrery. Clicking again or ✕ closes it.
Content
Planet glyph + name header, date range, aspect list (within 55-day spans only).
Background
--paper · border-left 1px --vpale
Auspiciousness Mini-Calendar Tappable month grid — appears top of Plan and Plan/Day views
Cell background
AUS_BG tint for the cell's auspice level. Selection: --blue fill, white text.
Symbol
−− / − / · / + / ++ below date number. Level 3 (·) omitted to reduce visual noise.
Tap behavior
Single tap selects a day. Tap + drag selects a range. Syncs start/end dates to span tray.
Legend
5-swatch horizontal legend: colored square + symbol label. Shown below calendar when showLegend=true.
07 · Copy System
Day Words & Tone

Each calendar day carries a single evocative word derived deterministically from its date. These are not horoscopes — they are mood anchors, seeds for reflection.

Clarity · Flow · Power · Calm · Vision · Grace · Spark · Resolve · Renewal · Lucky · Agile · Peace · Open · Blessed · Still · Rise · Drift · Anchor · Flame · Tide · Root · Crown · Wing · Path · Light · Echo · Wave · Glow · Turn · Bridge · Mend