Component
Library
A complete catalog of every UI component, color, and motion pattern in the app. Covers all existing components plus forms, feedback states, AI transparency, and loading indicators.
Colors
Every color in the app is a named variable — change the value once and it updates everywhere. Toggle the theme button at top-right to see how each color adapts between dark and light mode. Each color also carries a purpose — success, warning, error — so swapping the palette for a new theme doesn't break meaning.
| Color | Variable name | Purpose | Readability (on dark purple) |
|---|---|---|---|
| --rose | Primary accent, interactive labels | 4.8:1 — passes ✓ | |
| --text | Body text, headings | 12.4:1 — highest standard ✓ | |
| --muted | Secondary text, descriptions | 5.2:1 — passes ✓ | |
| --ok | Success, verified, confirmed | 4.5:1 — passes ✓ | |
| --warn | Warning, unverified, pending | 3.6:1 — icons & borders only * | |
| --alert | Error, critical, destructive | 4.6:1 — passes ✓ | |
| --act | Action accent, advocacy emphasis | 3.1:1 — icons & borders only ✓ |
* This color passes the readability minimum for icons and borders, but avoid using it for text smaller than 18px.
The ratios above are measured in dark mode. In light mode, the palette shifts significantly — use the theme toggle at top-right and verify contrast directly in context before applying any color to text.
Typography
Two fonts. Melodrama is the expressive headline font — used for big, editorial moments. Avenir Next handles everything else, from tiny status labels to screen headings.
- Welcome screen hero text
- Section titles on profile / impact pages
- Pull quotes and feature callouts
- Onboarding splash headings
Spacing
All padding, gaps, and margins in the app are chosen from this fixed set of sizes — not arbitrary numbers. This keeps layouts predictable and consistent.
Motion
Motion is purposeful — it confirms actions, guides attention, and signals state changes. All animations are automatically turned off for users who have enabled Reduce Motion in their device accessibility settings.
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
/* For JS-triggered animations: */
const reduced = window.matchMedia(
'(prefers-reduced-motion: reduce)'
).matches;
setTimeout(callback, reduced ? 0 : 2000);
Buttons
Three variants cover the full action hierarchy. All use a radial fill animation on hover that is hardware-accelerated and automatically turns off when the user has enabled Reduce Motion.
- One primary button per section
- Lead with verb: "Save", "Join", "Submit"
- Use ghost for cancel or low-risk actions
- Use action btn for advocacy/campaign CTAs
- Stack two primary buttons side by side
- Use vague labels like "OK" or "Click here"
- Use action variant for standard navigation
- Make buttons narrower than 88px touch target
Minimum tap height is 44px. The brief press-down shrink is a tactile detail felt more than seen. In loading state, text is hidden from screen readers while the spinner is visible. Keyboard focus shows a two-ring outline — a dark gap ring inside a rose outer ring — visible only when navigating by keyboard, never on touch or mouse.
Icon Buttons
Small tap targets for the header bar and screen navigation. Two shapes: circular for icon actions (32–36px), square-ish for the back button.
Floating Actions
Floating buttons that surface the primary action on a screen — always pinned bottom-right, just above the bottom navigation bar. Two color variants: pink-rose for composing, purple for advocacy actions.
- One FAB per screen
- Position bottom-right, 22px from edge
- Sits above the bottom navigation bar (96px from bottom)
- Hide during scroll if it obscures content
- Use FAB for destructive or rare actions
- Show more than one FAB at a time
- Place over primary content areas
- Use for navigation (use the bottom bar instead)
Topbar
The persistent header. Logo and app name on the left; notification, settings, and avatar on the right. Extra top padding reserves space for the phone's system status bar (time, battery).
Tabbar
Fixed bottom navigation bar. Five sections — Voice, Gather, Listen, Find, Move. Active tab is pink-rose; inactive is dimmed white. Extra bottom padding reserves space for phones with a home indicator bar at the bottom of the screen.
- Keep to 4–5 destinations max
- Label every tab with 1 word
- Always show active state
- Use the bottom bar for secondary navigation
- Hide or fade the bottom bar during scroll
- Use icons without labels
Screen Header
Two-line header for detail and secondary screens. A small section label sits above the larger screen title, with an optional back button on the left.
Post Card
The primary content unit in the Voice feed. Header (avatar + author + timestamp), body copy, optional source link, and footer actions.
Event Card
Compact event unit with type badge, title, date/host, and RSVP avatar stack. The listen-enabled variant shows a live pulse indicator when ambient audio is available.
Event Hero Card
Used at the top of event detail screens. Three visual layers — dark gradient, a soft purple glow, and a subtle film-grain texture — are composited to create depth. Always dark regardless of the app's current theme, with an explicit light-mode override to keep text readable.
- Always use Melodrama for the title
- Keep eyebrow to date/time metadata only
- Limit to one hero card per screen
- Place on a light surface without the override
- Use for compact feed cards (use Event Card instead)
- Add background images — the noise layer is the texture
Member Card
Horizontal layout for directory listings. Avatar, name, role, focus areas — Connect button right-aligned. Used in Find directory and connection suggestions.
- Show initials when no photo is available
- Truncate role title at one line with an ellipsis
- Reflect connection state in the button label and style
- Keep focus areas to 2–3 tags maximum
- Show an empty avatar circle — always fall back to initials
- Allow the name or role to wrap to two lines
- Use this layout for non-member content (events, posts)
Campaign Card
Move-section card. Campaign type badge, title, description, progress bar with signature gradient fill, and an urgency deadline pill. Three campaign types: Petition, March, Testimony.
- Show progress bar for all countable goals
- Style the deadline label in a more urgent color when fewer than 7 days remain
- Match badge color to campaign type
- Show progress bar at 0% — use an empty state
- Use march badge for petitions or testimony
- Truncate the progress label
Tags & Chips
Three selection patterns — each for a different context. Use this guide to pick the right one: Tags for browsing and labeling within a feed. Focus chips for choosing multiple interests at once during setup. Filter pills for narrowing a list that's already on screen.
- Use for topic browsing and inline labeling on cards
- Keep labels to 1–3 words
- Show active state when the tag is a live filter
- Use tags for multi-step selection flows (use focus chips)
- Mix active and category variants in the same row
- Use more than 4 tags on a single card
- Show in a 2–3 column grid so all options are visible at once
- Allow multiple selections simultaneously
- Pre-select inferred interests when context is available
- Nest inside a content card or scrollable list
- Use as a single-select — that's a filter pill
- Show more than 9 chips without pagination
- Place directly above the list being filtered
- Always keep one pill active — never unselect all
- Update the list immediately on selection, no confirm step
- Allow multiple pills to be active at once
- Use more than 5 filter options in a single row
- Use filter pills for multi-step selection (use focus chips)
Badges & Pills
Non-interactive labels for status, type, and urgency. All share the same 8px uppercase pattern at minimum; colors carry semantic meaning.
Avatars
Gradient-filled circles with initials. Four sizes cover every context from RSVP stacks (24px) to profile heroes (80px).
Inputs
Text inputs, textareas, and search fields. All states are designed to read clearly against the dark purple background — pink focus highlight on active, distinct red and green tints for error and success.
Selects & Toggles
Dropdowns, radio groups, and on/off toggles. Planned for the next build phase.
Alerts & Modals
Toast notifications, inline alerts, confirmation dialogs, and full overlays. Planned for the next build phase.
Loading States
Skeleton screens, spinners, and progress indicators for async content. Planned for the next build phase.
AI Indicators
Every AI-generated element is labeled. Labels are small but always present — the system never lets users mistake AI output for human authorship. Three states: generated, pending review, human-verified.
Source Attribution
Every AI claim links directly to the source passage that backs it up. The panel is collapsed by default — users open it on demand. The highlighted excerpt shows exactly which words the AI used.
Review Workflow
A human approval step before anything AI-generated can be published. The AI drafts a structured summary; the user checks each point against its source. The publish button stays locked until every point is verified. Click "Review source" to walk through the flow.