The problem
The new brand was a red brushstroke, designed for posters and campaigns. It had to work on a website people read on their phones, often when they are stressed. And the red couldn't be used for everything.
Case study · Shelter
Shelter's rebrand and design system
Shelter introduced a new brand, built around a red brushstroke. As Senior UX Designer, I turned it into a design system for the website, while making sure the housing advice stayed easy to read.
At a glance
What I did
Added extra colours for digital, gave every colour a name and a use, wrote component specs for three screen sizes, and built the brand as a theme in Storybook for developers.
What changed
The new brand launched on the design system. Years later, england.shelter.org.uk is still built on it.
“She was an invaluable mentor, teaching me a great deal and helping me significantly enhance my design skills.”
The brand, as it arrived
The red
The brand was built on one strong red. That works on a poster. On a website the colour also has to show what you can click and which pages you have visited, and text has to be easy to read on a small screen.
One red couldn't do all of that and still meet accessibility contrast requirements. So I made the case for extra colours just for digital. We used a version of the red that passes AA for buttons and main links, and gave text links their own blue, with colours for hover and visited links.
That meant convincing the brand and marketing team.
#EB001F
Accessible red
primary-link4.61 : 1 AAPrimary actions and emphasis. Kept away from long reading.
#336DF5
Link blue
text-link4.52 : 1 AANew for digital. Text links, so red didn't have to be a link too.
#660099
Mauve
link-visited10.37 : 1 AAAVisited links, so people can see which advice they've already read.
#C8001A
Dark red
primary-link-hover6.05 : 1 AAHover states, including text links.
Contrast measured against white. Colours from the palette I handed over.
Every colour has a name and a use
For example primary-link, text-link, standard-text, error and disabled. This meant designers and developers didn't have to decide colours page by page.
Colours for messages
Error, success and alert messages each got a border colour and a light background colour. Disabled buttons got one grey.
How the work ran
- AuditThe brand was made for posters, not for a form on a small phone. I went through the website page by page and listed where the brushstroke, the font and the red didn't work. That list became the brief.
- EncodeEvery colour got a name and a use. Links got their own blue, with colours for visited and hover, and for error, success, alert and disabled.
- SpecifyComponent specs for desktop, tablet and mobile, including when not to use each one. Written so content designers and developers could use them too.
- BuildWe built the brand as a theme in Storybook, so developers worked from real components instead of screenshots.
Upper case research
The new brand used a lot of capital letters, and stakeholders were hoping to use them on the website too. Using uppercase letters can make the user feel like YOU ARE SHOUTING AT THEM, so I looked at the research before we designed anything.
All-caps has been shown to increase stress levels and cognitive load, make reading slower and make text harder to scan. Screen readers can read out words typed in capitals letter by letter. And we needed to keep in mind that whilst we wanted to express a louder voice through protesting, Shelter’s website is primarily a support service.
18 of 20Most viewed pages over two years were support journeys: get help, housing advice and search
2Exceptions: Donate, and one campaign page
Caps could be used on
Main headings on Donate, Events and Campaign pages, buttons, and tags on cards. Short text, not paragraphs.
We advised against
Caps in paragraphs and smaller headings, in the main navigation, which is hard to scan on mobile, and on advice pages.
Added with code
Caps should be added with CSS, not typed into the content system, so screen readers read out words and not single letters.
Next steps
Test an all-caps and a title case version on Userlytics: ask people to remember the campaign name, and time how long each takes to read.
The UX team also reviewed Barlow, the new brand font, against Arial, the font we used before. We looked at how it showed characters that are easy to mix up, like 1, I and l, and how it read at small sizes. Barlow looked lighter than Arial, so we looked at using a medium weight for body text.
What was handed over
The website today
The homepage in 2026, on desktop and on a phone. Scroll inside the frames to see the full page. It still uses the design system.
3Breakpoints specified for every component
4.5:1+Contrast for every link and text colour on white
1Storybook theme for the new brand