VenTEA · Non-profit · Pro bono · 2026

A design system for a non-profit, in Figma and in code

VenTEA brings adapted cinema to children and adults with autism and their families. I designed its Christmas donation page, then built the parts as a small React component library so the next campaign can reuse them.

Covered: product design, AI prototyping and build

My role: Sole designer. I also built the component library, with AI assistance.
Design: Figma, with colour variables that match the code.
Code: React, TypeScript, Tailwind and Storybook.
Live site: The page runs inside VenTEA's existing WordPress site.

The brief

VenTEA needed a Christmas page that makes a one-off donation easy, on desktop and on a phone.

It had to sit inside the existing site, keeping the same header and footer. And the donation section had to be reusable, so the next campaign does not start from zero.

The page

Each donation amount is tied to something concrete, such as a bag of sensory toys or noise-cancelling headphones. The button says exactly what will happen: "Donar 50 €".

Supporters choose between giving every month and giving once. Below the amounts, the page shows that payment is secure and that a confirmation email follows.

Full VenTEA desktop donation page showing the inclusive cinema campaign, four Christmas donation amounts, charity impact, locations map and footer — Desktop design. The complete page is shown, including the donation choices, impact information and locations map. Select the image to see it at full size.

Complete VenTEA mobile donation page showing stacked amount cards, donation button, impact sections and footer — Mobile design. The complete responsive flow is visible, with donation cards stacked for smaller screens. Select the image to enlarge.

The system behind it

I built the page's parts as a coded component library next to the Figma file. Every component has one Storybook story for each Figma variant or state, so design and code stay in step.

3
components: button, donation card and festive photo frame: 9
documented variants and states, such as selected, disabled and full width: 12
colour tokens, with the same names in Figma, Tailwind and Storybook

Storybook colour token documentation for the VenTEA design system — Foundations: the colour tokens in Storybook. Each one has a name and a stated use, and the same names exist in Figma.

Storybook donation card variants including default, selected and without photo — A component built from them: the donation card, with its properties and each state. Scroll inside the frame to see them all.

VenTEA's audience includes people who find noise, light and movement overwhelming. The page follows the same care as its cinema sessions.

Calm motion

The falling snow switches off for anyone who has asked their device for reduced motion.

Readable contrast

Buttons and small text pass WCAG AA. The brighter orange is kept for large headings only.

Easy to press

Every control is at least 48 px tall, and keyboard focus is always visible.

Plain words

Labels say what happens next, and the selected amount is announced to screen readers.

How I worked with AI

I'm a designer, not an engineer. I made the design decisions and set the rules, and used Claude to write the component code with me.

I reviewed each component in Storybook, checked it in the accessibility panel, and kept a changelog so every change to a token starts in Figma and ends in code.

This is a small system for one organisation, not a system running at scale. What it shows is how I keep a design library and its coded version in step.

What happened next

The Christmas page is built into VenTEA's site, and the same donation card is now reused on the main donation page shown above, with monthly and one-off giving.

Donation results will be published in January 2027, after the Christmas campaign.

[LINKS: live page and Storybook, once they are public]