Connected mockup set · 2026-04-26

Six surfaces, one design language, click-through walkthrough.

Every surface in this folder shares the Civic design language — cool navy + rust accent, Space Grotesk + Geist + Geist Mono, ProPublica/institutional register. Surfaces link to each other where it makes sense, so clicking around feels like a real product.

The six surfaces
§ 01 · Surface Active
Homepage
Triage + Atlas meld. Three calm doors (Donors / Curators / Candidates) above a tilegram of US states. Hero, three doors, atlas, quiet stats strip, three-step explainer.
homepage.html · Open →
§ 02 · Surface Most-seen donor surface
Slate page
Sarah Reyes’s "Atlanta to the mountains" slate, fully rendered. Curator byline + slate intro + ordered candidate cards with per-pick commentary + give-to-all ActBlue CTA + follow.
slate.html · Open →
§ 03 · Surface Candidate destination
Candidate profile
Civic-derived candidate page (Kendra Washington, VA-07). Hero with finance summary, sectioned bio + contact + story + platform + Honeyfund goals; sidebar with track record, endorsements, slates featuring this candidate.
candidate.html · Open →
§ 04 · Surface Public curator presence
Curator profile
Sarah Reyes’s public profile. Hero with stats (followers, slates published, dollars routed) + bio + her published slates + contact (off-platform) + her commitments to followers.
curator.html · Open →
§ 05 · Surface Browse
Slate discovery
The browse-all-slates surface. Search bar, sort by durable metrics (never editorial), sidebar facets (state, office, curator type, slate size, recency), eight sample slate cards.
discovery.html · Open →
§ 06 · Surface Curator workflow
Slate builder
Mid-flight compose flow. Title + subtitle + intro + candidate search/add + drag-to-reorder picks with per-pick commentary editor + visibility settings + ready-to-publish checklist sidebar.
builder.html · Open →
Suggested click-through · donor's path
01
Land on the homepage. Pick a door (donor) or hover the atlas to see slate counts by state.
02
Arrive at slate discovery. Scan eight slates with curator + counts + intro line. Pick a curator’s slate that resonates.
03
Open Sarah’s slate. Read her intro + the per-pick commentary. Click into a candidate.
04
Land on the candidate profile (Kendra Washington). Read bio, platform, Honeyfund goals; check the Track Record sidebar; review endorsements + which slates feature her. Click "Atlanta to the mountains" in the sidebar — back to the slate. Or click Sarah Reyes — to her profile.
05
From Sarah's profile, see her commitments + her two slates. Click "Build a slate" if you want to publish your own.
06
Land in the builder with a draft already in flight. See what the curator side looks like during composition: search candidates, drag picks, write commentary, watch the publish-readiness checklist tick green.
Display typography
DM Sans · 400–700
Body typography
Geist · 300–700
Mono / data
Geist Mono · 400, 500
Background
#eef1f4 cool paper
Ink
#0f1e35 deep navy
Accent
#b85730 rust
No serifs. No default sans-serifs. Distinctive Google Fonts only. Warm, restrained, dignified — institutional / ProPublica register, never corporate-blue or AI-generic. Hard rules from docs/01_philosophy_and_principles.md apply across every surface (no fake urgency, no editorial curation, no login wall for browsing or donating, no featured-placement-for-pay).
Sample-data context
The curator
Sarah Reyes
Fulton County Democrats vice-chair. 847 followers across two slates. Her voice is direct and specific — Atlanta-grounded, has-met-the-candidate energy. Local-organizer curator type (internal classification only).
The featured slate
Atlanta to the mountains
"Southeast federal races I stake my name on." Five candidates: Marcus Okafor (Sen-GA), Johnnie Redmond (GA-02), Arjun Patel (GA-07), Priya Ramanathan (Sen-NC), Gabriel Akinyemi (NC-01). 512 followers, $18,420 routed, 284 distinct donors.
The featured candidate
Kendra Washington
VA-07, second run. Spotsylvania County School Board chair. Lost 2024 by 2,847 votes; 18 months of organizing infrastructure built since. Civic candidate-profile direction; verified profile, platform full, four Honeyfund goals active.