Building an Open Design System for a Nonprofit Community

ForEveryone Berlin
ForEveryone Design System README artwork with the project name, orange doodles, and a lime-green background
ForEveryone Design System: the shared brand reference.
About and Brand page with community stats, mission, and vision
About & Brand: the community, mission, and brand guidelines.
Foundations page with primary colour cards labelled decorative or background
Foundations: colour tokens and their usage rules.
Components page with button states across default, hover, focused, and disabled
Components: default, hover, focus, and disabled button states.
Patterns page with reusable header and footer examples
Patterns: reusable header and footer built from tokens and components.

As Web Lead at ForEveryone Berlin, I coordinate a five-person web team and build the open-source design system. Shared tokens, components, and patterns keep the WordPress marketing site and Next.js app aligned.

  • 100+Colourtokens
  • 15+UIcomponents
  • 11Designpatterns
  • 2Alignedplatforms

The Challenge

ForEveryone runs creative workshops and events in Berlin. Its WordPress marketing site and Next.js app worked from a 40-page PDF brand book, but colours, type, spacing, and UI patterns drifted as new landing pages shipped. Each page meant revisiting design decisions that should have been shared.

My Role

I coordinate the WordPress and Elementor website work, from SEO briefs and copy through Figma design, implementation, and review.

I also lead the design system, translating the brand guidelines into tokens, components, and documentation. I set up the tests and release workflow so the team can build and review changes against the same implementation.

What I Did

Shared design tokens

I built a pipeline that turns 100+ colour tokens, a 19-step spacing scale, and typography rules into shared CSS variables. The system is documented at design.foreveryone.berlin and published as open source on GitHub.

ForEveryone Foundations documentation with primary colour cards labelled accent only or background
Foundations: colour tokens with their usage rules beside each swatch. Image credit: ForEveryone Berlin.

How a design token change ships

  1. Figma: Designers define colours, type, and spacing from the brand book.
  2. Design tokens: The same values live as tokens in the GitHub repo.
  3. GitHub Actions: Token changes build into CSS variables and run through automated checks.
  4. WordPress and Next.js: The marketing site and the web app load the same variables.
  5. Claude and Cursor: Agent skills give AI-assisted builds the same token reference.
The same token definitions support the website, the app, and the tools used to build new pages.

Reusable components

I built 15+ UI components and 11 patterns on those tokens, with accessibility standards and reduced-motion support. The WordPress site and Next.js app consume the same token values. The live preview below shows the system's interactive components and their states.

Explore the live components
ForEveryone component library showing button variants and interaction states
Components from the design system, including buttons, inputs, cards, and tags.

Results

  • A shared design reference reduced design-review rounds and aligned the website and app with the brand's visual identity.
  • The WordPress marketing site and Next.js app now use the same design tokens.
  • The web team builds new pages from documented patterns, with colour, type, and spacing already defined.
  • Developers get automated checks for token drift and accessibility during code review.

What I Learned

The useful part of a design system is making design decisions reusable. Tokens and working examples give designers and developers the same reference for implementation and review. The same approach shaped the block library and page builder in my parcelLab case study.