Be The People
Establishing the design system for a civic engagement platform launched nationally, with partnerships spanning the NBA, GivingTuesday, and the King Center.
A national launch with no foundation yet
Be The People connects everyday Americans with community leaders solving real problems, on a 10-year national mission. With partnerships spanning the NBA, GivingTuesday, and the King Center, it launched with significant visibility, and it needed a design system that could scale with it.
Four surfaces, one design language
Each of the platform's four surfaces has its own content and goals, but all four have to feel like one product. One token layer carries the brand's black and white palette and six action color groups across every surface, so each component inherits the right color without per-screen overrides.
Story feed with action filtering
Content page with controls
Tagging a story with an action
Curated story groupings
Built against real product need
Components came in the order the product needed them, not by theoretical completeness: the patterns that appeared most, or were blocking active design work, came first. Building without a real use case tends to produce the wrong abstractions.
Screen and pattern inventory
Documented all screens and UI patterns to identify what needed components, what needed consolidation, and what was still undefined.
Token and naming strategy
Defined color, spacing, and type tokens in a way meaningful to both Figma and code, reducing translation errors at handoff.
Component builds with engineering review
Built components iteratively with developer syncs to validate naming, behavior, and state coverage before shipping each category.
Spec sheets and governance
Spec sheets stayed in Figma with components, preventing documentation drift. Governance defined how new components are proposed, reviewed, and merged by design and engineering.
Four categories, one source of truth
The Figma library covers four layers of the interface, each component with named variants, full state coverage and semantic color tokens. WCAG AA contrast was validated at the token level, so everything built on top inherits compliance by default.
Form and Selection Controls
Checkbox, Radio, Switch, Text Input, Text Area, Button, Icon Button, and Menu.
Wayfinding Patterns
Tabs, Top Nav Tray, Pagination, Link, and Search. Consistent behavior across all breakpoints.
Action Bento Tiles
Forty-eight actions in six color groups, at three sizes, from small chips to the large tiles that fill the story grid.
Spatial Foundation
Grid system, spacing tokens, and breakpoints for web, tablet, and mobile layouts.
What the system made possible
Faster design velocity
New screens were composed from existing components, reducing estimated design time per screen by approximately 30 to 40%.
Cleaner developer handoff
Spec sheets addressed spacing, states, and behavior upfront, reducing back-and-forth between design and engineering during the build.
Accessibility at launch
WCAG AA compliance met across all components at the token level, eliminating a class of post-launch remediation that is typically expensive to fix under production pressure.
Visual consistency across surfaces
Story pages, project listings, profiles, and navigation all drew from one library, giving the platform a coherent identity at launch.
A design system is a product
It has users, needs documentation and maintenance, and its quality is measured by whether teams actually use it. Treating it as infrastructure rather than a design deliverable changes every decision along the way.
Engineering involvement from the start
Early developer syncs produced specs that were useful at handoff, not just visually complete.
Lock tokens earlier
Some naming decisions required refinement after components were already built. Earlier token validation would have saved rework.
Docs co-located with components
Keeping spec sheets inside the Figma file meant documentation stayed current as components evolved.
Define governance earlier
The contribution process came together toward the end. Formalizing it sooner would have made the build phase cleaner.
