Building an Open Design System for a Nonprofit Community

ForEveryone Berlin
ForEveryone Design System overview page, version 1.3.1, with a summary of what the system covers
Overview: the ForEveryone Berlin design system at a glance.
Foundations page with primary colour cards labelled decorative or background
Foundations: colours with their role labelled up front.
Components page with button variants and states across default, hover, focused, and disabled
Components: buttons across every interaction state.
Patterns page with reusable header and footer examples
Patterns: reusable header and footer built from tokens and components.
About and Brand page with community stats, mission, and vision
About & Brand: the digital home of the ForEveryone Brand Book.

As Web Lead (Volunteer) for a 4-person web team, I remotely owned the UI/UX design, engineering, and delivery of ForEveryone's open-source design system: one source of truth for their WordPress marketing website and Next.js web app.

  • 80+Colortokens
  • 19Spacingsteps
  • 15+UIcomponents
  • 8Designpatterns

The Challenge

ForEveryone ran a WordPress marketing site and a Next.js web app from a 40-page PDF brand book, while marketing shipped new landing pages every month. Colors, type, spacing, and UI patterns drifted apart, and every page meant the same design decisions again: there was no shared source of truth.

My Role

I owned the project from design through implementation. Starting from the existing brand guidelines, I translated the visual identity into reusable design tokens, components, and patterns that could be shared across both platforms. I also created a live documentation site at design.foreveryone.berlin so contributors could browse and use the system without opening Figma or reading code.

Beyond the design system itself, I established the delivery workflow, including GitHub Actions for automated token builds and testing, semantic versioned releases with changelogs, unit and end-to-end tests, and Vercel hosting for continuous deployment of the documentation site.

Every decision prioritized clarity and consistency. Design tokens define intent instead of individual values, components expose clear usage rules, and contributor documentation helps designers, developers, and AI coding assistants such as Claude Code and Cursor produce consistent results from the same system.

What I Did

  • Built a cross-platform design token pipeline with 80+ semantic color tokens, a 19-step spacing scale, typography foundations, 15+ reusable components, and 8 responsive design patterns.
  • Published an interactive documentation site covering Foundations, Components, Patterns, Branding, Logos, and Accessibility.
  • Integrated the same design tokens into both the WordPress website and the Next.js application so visual changes propagate consistently across every product.
  • Established contributor guidelines, accessibility standards, automated testing, and support for visitors who prefer reduced motion.

Results

  • Replaced the 40-page PDF brand book with one documented reference: 80+ color tokens, 19 spacing steps, 15+ UI components, and 8 design patterns, shared by the marketing site, the web app, and future digital products.
  • Reduced repeated design and implementation decisions, since contributors read the same tokens and patterns instead of settling color, type, and spacing again on every page.
  • Enabled volunteers to explore components and implementation guidance directly in the browser, without requiring Figma or development tools.
  • Released the design system as open source on GitHub, making it reusable by other nonprofits.

What I Learned

Most cross-functional friction comes from translating between disciplines. A design system is valuable because it gives designers, developers, marketers, and stakeholders a shared vocabulary for making decisions. Its purpose is not simply visual consistency, but reducing ambiguity so everyone can move faster with confidence.