UX Designer
Project overview
Surfers Against Sewage is an environmental charity focused on protecting the ocean, tackling plastic pollution, and empowering coastal communities to take action. Their vision is of a thriving, litter-free coastline where people and nature coexist sustainably. To scale their impact and unify the way their supporters engage with their campaigns, they needed a clearer, more cohesive digital presence. A dedicated design system offers the foundation for this: distinguishing their visual identity, improving usability, and supporting accessible, mission-aligned experiences across their campaigns.
Naturelings is a small-batch, plant-based wellbeing brand offering handmade skincare, haircare, and homeware products.The goal of this project was to create a responsive e-commerce experience that brought the brand values to life, helped customers confidently choose the right product, and made purchasing feel simple and trustworthy.
My role
In this project, I took on the role of designer and challenged myself to create a design system for Surfers Against Sewage, imagining their team needed clearer structure to support future digital work. I began by analysing their brand, tone, and visual identity to understand how their mission should be expressed digitally, then defined core foundations such as colour, typography, and spacing before building out reusable components for key content and campaign needs. To push the system's flexibility, I created both light and dark modes, keeping consistency and usability central across themes. The project was a way to prove I could design a system from scratch while staying true to an existing brand’s values and purpose.
The challenge
As the designer, I set out to turn Surfers Against Sewage’s activism into a clear, usable digital language. The challenge wasn’t just making things look consistent; it was creating a flexible set of foundations and components that could support urgent environmental campaigns, keep information clear and accessible, and stay true to the charity’s distinctive voice.
Project Goals
Create a design system that:
Approach and key UX decisions
Discover → Define → Structure → Assemble → Apply
Discover
With no design files or brand guidelines to work from, I began by reverse-engineering the existing Surfers Against Sewage website. I pulled screenshots into Figma, examined their colour usage, typography choices, iconography, spacing patterns, and UI elements. This gave me a clearer sense of how the brand currently expresses itself, where it’s consistent, and where it fragments.
This stage helped me identify the raw materials I needed to work with, and also the gaps the design system needed to solve.
Define
I extracted the brand’s key colours, the main blue and supporting accent colours, then extended them into gradient variations. Every colour was contrast-tested across both light and dark backgrounds to ensure accessibility. These primitives were converted into Figma variables, forming the base of the system.
Once the primitives were set, I defined semantic roles such as: brand colours, background layers, accents, content colours (on light/on dark), alert and success states, borders, and all button states (default, hover, active, disabled). Each semantic token adapts automatically in dark mode, simplifying future UI work.
The existing site uses HVDPoster for headings and Trade Gothic for body text, so I kept the brand’s typographic personality intact while refining it. I reduced the number of font sizes for clarity, then created tokens for headings, sub-headings, body, labels, links, and button text, complete with line height, case, and decoration presets.
To unify the visual rhythm of the interface, I introduced a consistent spacing scale and border-radius tokens. These ensure every component sits within the same structural logic. I also listed the icons and images used on the website.
Structure
With the foundations defined, I organised them into a clear, logical architecture that explains how each part of the system relates to the next. This structure ensures that design decisions are predictable and easy to apply or change.
-
primitives → semantic tokens → applied styles
-
theme-aware variables for instant light/dark switching
-
naming conventions that are readable, scalable, and predictable
-
token behaviour rules that ensure consistency across components
This structural layer makes design decisions easier and more consistent by defining how styles should be applied across components.
Assemble
Once the system’s logic was in place, I created UI components that fully rely on the token systems. Components include:
-
Typography components (headings → labels → links)
-
Icons and icon groups, adjusted for contrast in dark mode
-
Buttons, including primary red CTAs from the landing page, secondary styles, naked buttons, and all interaction states
-
Logos with automatic colour variants for any background
-
Form elements: text fields, dropdowns, radio buttons with focus, error, and disabled states
The goal was to ensure each component behaves consistently, uses the same underlying tokens, and can be reused without redefining styles.
Apply
Finally, I created component instances that show how each element behaves in real UI conditions. This stage proved the system works beyond theory: it functions cohesively in actual interface scenarios.
Final Design System
The completed design system consolidates Surfers Against Sewage’s visual identity into a structured and accessible toolkit. It includes refined colour and typography foundations, semantic tokens, and a full suite of components that function seamlessly across light and dark themes.
Reflection
Overall, this project was a valuable deep dive into designing at a system level rather than focusing on individual screens. Working without original design files forced me to rely on the live website and make intentional decisions about what to keep, refine, or simplify. One of the biggest takeaways was how much clarity and consistency can be unlocked by reducing choice, particularly in typography and colour, without diluting a brand’s character.
If I were to extend this project further, I would explore documenting usage guidelines and handoff considerations, as well as testing the system against additional real-world layouts and campaign scenarios.
Overall, the project strengthened my confidence in creating design systems and reinforced the importance of accessibility, structure, and intent when creating tools meant to support future digital work.
Naturelings is a small-batch, plant-based wellbeing brand offering handmade skincare, haircare, and homeware products.The goal of this project was to create a responsive e-commerce experience that brought the brand values to life, helped customers confidently choose the right product, and made purchasing feel simple and trustworthy.
Outcomes
༄ Structured foundation: Clear colour, typography, spacing, and radius tokens establish consistency across light and dark themes.
༄ Accessible visual system: Colours and components were contrast-tested and designed to remain legible and usable across themes and states.
༄ Reusable component library: UI components and their instances were built with defined behaviours, making them easy to apply and adapt across different contexts.