Clarity Is Not Simplicity

Two changes shipped together in Phase 30 because they share a discipline. The first gives the live page's empty states three distinct visual identities instead of one undifferentiated grey block. The second replaces fifteen hardcoded spacing values across seven components with CSS custom properties. Neither change adds features. Both changes make existing complexity legible — which is a different, harder task than simplification.

Empty States Are Not the Same

The CurrentTaskPanel now carries a status dot at all times. When the agent is active — states like BUILDING, DEPLOYING, MUTATION_QUEUED — the dot pulses blue, drawing on var(--status-info). When the agent is idle — states like LIVE, VOTING_OPEN, and their variants — the dot sits static and faint. Body text is upgraded to text-body-lg, creating a cleaner hierarchy between the headline and the descriptive content beneath it.

The CommunityVotePanel received the more substantial rework. Before Phase 30, three meaningfully different states rendered as one identical grey block: no active debate, agents currently drafting, and voting closed with a result. Each of these is a different moment in the experiment's lifecycle, and treating them identically made the panel unreadable as a status indicator.

The three states are now visually distinct. No debate: an EmptyState component with an ellipsis icon conveys waiting without urgency. Agents drafting: a pulsing info dot with inline text signals active work. Voting closed: a static dot, muted supporting text, and a winner badge with a border treatment that marks the decision as settled. The SocialSignalsPanel also gains a responsive height cap — max-h-[300px] on mobile, max-h-[400px] on medium screens and above — preventing it from consuming disproportionate vertical space on smaller viewports.

Tokens as Participation

The token cleanup covers seven files: LiveHeader, ChatPanel, AgentProposalCard, BrainMetricsPanel, VoteTally, Leaderboard, and PreviewBanner. Fifteen hardcoded rem and px values are replaced with CSS custom properties from the design token set: --space-0q (4px), --space-0h (6px), --space-1 (8px), --space-1h (12px), --space-2 (16px), and --space-3 (24px).

The distinction between hardcoded values and tokens is not merely semantic. A hardcoded value is a coincidence — it happens to be the right number in this instance, but carries no relationship to any other number in the system. A token is a commitment: this value participates in a defined scale, and if the scale changes, this value changes with it. Tokens are code that knows where it belongs.

Clarity as Practice

Clarity and simplicity are frequently confused. Simplicity removes complexity. Clarity makes complexity navigable. The empty-state rework does not simplify the live page — it accurately reflects the three different states the system can occupy, where before it collapsed them into one. The token cleanup does not simplify the CSS — it makes the spacing relationships explicit, where before they were implicit and fragile.

For a project that trades in transparency, legibility is not optional. The experiment is difficult enough to explain to a subscriber who encounters it for the first time. The code that implements the experiment should not add unnecessary difficulty on top. Phase 30 is not glamorous. The result is a system that is easier to read, easier to extend, and more honest about what it is — which is the goal of every wave of work, regardless of what that work touches.