Building an Open Design System for a Nonprofit Community

ForEveryone Berlin
Patterns page with workshop cards and the Workshop facts card component
Patterns: workshop cards and the facts card from the live site.
Foundations page with primary colour cards labelled decorative or background
Foundations: colours with their role labelled up front.
Components page with button states across default, hover, focused, and disabled
Components: button states for primary, secondary, orange, and outline variants.
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 coordinated 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 re-opened the same design calls.

My Role

I coordinated delivery from design through implementation, working from the existing brand guidelines so one system could serve both the WordPress marketing site and the Next.js web app.

Beyond the design system itself, I established the delivery workflow: 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.

The contributor documentation has a second audience: designers, developers, and AI coding assistants such as Claude Code and Cursor all read the same system and produce consistent results from it.

What I Did

  • Built a cross-platform design token pipeline: 80+ colour tokens, a 19-step spacing scale, typography, 15+ UI components, and 8 responsive patterns.
  • Published an interactive documentation site at design.foreveryone.berlin covering Foundations, Components, Patterns, Branding, Logos, and Accessibility.
  • Wired the same tokens into the WordPress marketing site and the Next.js application so visual changes propagate across both products.
  • Established contributor guidelines, accessibility standards, automated testing, and support for visitors who prefer reduced motion.
  • Released the design system as open source on GitHub for other nonprofits.

Results

  • Replaced the 40-page PDF brand book with one documented reference shared by the marketing site, web app, and future digital products.
  • Contributors reuse the same tokens and patterns instead of re-deciding colour, type, and spacing on every new page.
  • Volunteers can browse components and implementation guidance in the browser, without opening Figma or reading code.

What I Learned

Most cross-functional friction comes from translating between disciplines. A design system gives designers, developers, marketers, and stakeholders a shared vocabulary for decisions, not just visual consistency.