CircleThrice Member Portal

Design Review

An evolving record of the member-portal redesign. Each round preserves that stage of the work — switch tabs to revisit earlier rounds.

Prepared for Ivy · CircleThrice Member-portal redesign

Round 4 took the day view from loose studies to a working shell. Below: the most complete work first, then the system we use to track and lock every design, then the sidequests — focused exercises explored along the way.

The artifacts
Canon shell + the Concertina · Day timespan
Day Shell

The day at full scale in its real chrome — the canon nav rail, always-today header, timespan selector set to a single day, and live view tabs — wrapping the Concertina day reading (Outline · Reading · Everything). Three variations: the plain page, a docked planetary-hours band, and a side hours rail. The most complete design in Round 4.

Latest Round 4 Interactive Canon shell CT-DV09–11
Open
One grammar · ~16 object types · four scales
Object Pattern System

A single typographic pattern for every object in the product — planets, days, transits, rites, courses, posts. Eight slots, four scales (nametag → stat line → baseball card → novella), and named directions like the Margin and the Register. Typography carries the hierarchy — no containers. Includes the auspice mark and inline aspect diagrams.

Round 4 System Four scales Every object type CT-PAT01–28
Open
The Combination · Working Assembly
Planner

Everything wired together: global nav, always-today header, unified timespan selector, and the three view tabs — Overview, Calendar, Orrery — each carrying a real, live screen. Switch spans and the panes re-render in place. This is the most recent combination pulling the explorations into one shell.

Round 4 Interactive Three-tab screens Full assembly CT-PLN02
Open
P1.2–P1.4 + Quick Look · Exploration
Planner Shell

Full Planner layout based on Ivy's sketch. Global header locked to today (6 fields). Unified span selector with prev/next navigation. Large sub-view tabs (Auspiciousness · Calendar · Orrery). Quick Look Tray shows all three views simultaneously — active panel enlarges. Planet filter bar at bottom. All sections collapsible.

Round 4 Interactive P1.2–P1.4 Quick Look Tray Collapsible CT-PLN01
Open
AUSP CAL ORRERY
P1.1 · IA Foundation
Nav Collapse

Orrery, Calendar, and Plan collapse into a single Planner nav entry. Sub-view switcher (Auspiciousness · Calendar · Orrery) appears inside Planner. Planetary Filter zone reserved for P2. Before/after nav comparison, component variants, and in-context shell.

Round 4 P1.1 Nav component Sub-view switcher CT-PLN03–05
Open
The system · how we track the work
Ledger of record · permanent IDs
Design Registry

Every discrete design carries a permanent ID — CT-family-number, e.g. CT-TS07 — never reused or renumbered, so an ID means the same design forever: in a note, a review, or conversation. The registry is the ledger of record — lock a chosen design and it's fingerprinted, then any later drift is flagged automatically. Built to hand to clients.

System Client-ready Permanent IDs Lock + drift audit
Open
Single source of truth · shared UI
Canon Reference

The shared components — nav rail, today header, timespan selector, view tabs, auspice chips — each rendered live from ct-canon, the one place they're defined. Locked by construction: pages build from it rather than forking it, so they can't drift out of sync.

System Live from canon Locked components
Open
How to use

Refer to any design by its IDCT-TS07 means the same design for all of us, forever (numbers are identities, never renumbered). Say “lock CT-TS07” to freeze a chosen design: the registry snapshots it and flags any later change as drift, so nothing shifts silently after sign-off. Open the Design Registry for the full ledger; open any listed page to see live ID badges — click one to copy its ID.

Sidequests · design studies

Focused exercises explored along the way — captured and linked for reference, not the main line of work.

Overview & the span band
Overview tab · two directions
Overview Options

A centered Reading where the day's magic leads, versus a data-forward Ledger with events as ruled entries.

Auspice band · resolution
Overview Span States

How the auspiciousness band reframes as the span grows — day and week sit in a month; a quarter opens to the full year.

Marking the span · treatments
Span Selection Treatments

Seven ways to mark the selected span on the band — fill, dim, underline, cut-out — plus compact block densities for quarter and year.

Overview · beyond one day
Overview — Multi-Day

The single-day baseline carried across multi-day spans, with the hours treatments and an ORCA Day-object gap audit.

The planetary hours
Hours in the day view · 3 ways
Mini Hours Options

Three ways to fold the planetary day into the day view — a docked rail, an inline “The Day” grid, or a horizontal sky-strip band — audited against the ORCA Day object.

Drawing 24 unequal hours
Hour Depiction Options

Four ways to draw the unequal hours: ruled hairlines, a tick rail, a neutral zebra, and labeled boundaries.

Live prototype
Hours Band Prototype

The sky-strip, live: drag or scroll sideways, hover an hour for its favors, hover a transit for the glance card. Loads centered on now.

The day & the week
Day · novella scale
The Day Novella

The Day at full novella scale — Margin, Register, Dossier, and the interactive Concertina. The reading the day shell now wraps.

Week · 7-day planner
Week View

The Week as the client's 7-day planner: a grid of day cells, each with its ruler, lunar day, auspice flag, and theme. First consumer of the canon.

Chronology · coming up
Coming Up · CT-ASM01
Coming Up

The season ahead as a chronology, soonest first, with a timeline / by-type toggle and a planet filter.

Coming Up · CT-ASM02
Chronology v2

The same assembly rebuilt on the Margin and Register object directions, at full object fidelity.

Earlier option studies
Full-shell dry run
Shell Assembly

Header, timespan, and view tabs assembled into one live shell with stubbed panes — the frame the Planner fills.

Global header · 6 studies
Header Options

Six treatments for the always-today header, from whisper-muted values to labeled chips with an auspice rating.

Header + span pairings
Timespan Assemblies

The today header and timespan selector paired together in full assemblies, testing column and pill-chip layouts.

Span selector · collapsed
Collapsed Timespan

How the timespan bar reads once collapsed — nav placement, edit affordance, and meta density.

View switcher · A–C
Nav Options

Three ways to seat the Overview / Calendar / Orrery tabs beside the timespan controls.

Full-page switcher
Nav Switcher Options

The Planner / Library / Sessions switcher shown across full pages to test each style at scale.

Switcher × header matrix
Nav Matrix

A cross of switcher styles against header treatments to find the pairing that holds together.

Range picker · studies
Date Picker Options

Single- vs. dual-month range pickers layered over the auspiciousness tints for custom spans.

Hover / tap options
Transit Interactions

How a transit reveals its detail — hover popup vs. tap-to-open — without leaving the calendar.