Personalized state
Match the system to the correct districts
Use this card treatment for precise, trust-building moments such as address entry, district matching, and local routing unlocks.
Design System exploration
A full product language for Loud Voters.
This prototype turns the elements from the other explorations into a cohesive system: typography, spacing, surfaces, controls, navigation, feedback states, and icon usage.
Foundations
Mint Green
#3AE59D
Neutral Black
#231F20
Ashy Gray
#C4C7C6
Light Gray
#F2F2F2
Typography
Display
Make action legible.
Section Heading
System-level clarity
Body Large
Use for clear explanatory copy that helps a first-time visitor understand what the system is doing.
Label
Activity Summary
Grid and spacing
Grid behavior
Use a generous content shell with 12-column desktop layouts, open negative space, and nested cards that align on 8px increments.
Spacing scale
4
8
12
16
24
32
48
64
Interactive components
Buttons
Inputs
Segmented controls
Tabs
Filters
Sliders
Density value: 64
Iconography
Map
Prototype navigation, network views, and geography-aware states.
Bulletin Board
Topic feeds, post lists, and campaign aggregators.
Transmittals
Messages routed to offices, delivery states, and active sending UI.
Advocacy Groups
Coalitions, organizing bodies, and supporter clusters.
Representatives
Office holders, officials, and recipient-facing cards.
Trust
Privacy, verification, and routing-purpose reassurance.
Unlocks
Personalization, district matching, and precision moments.
Home
Prototype navigation, hub links, and return actions.
Surfaces and patterns
Activity item
routingUI should feel editorial and active: strong type, quiet surfaces, and a clear sense of motion without noise.
Modal language
Large overlays should feel soft, editorial, and trustworthy.