Shecluded color system documentation with a pink tonal ramp

Project overview

Sole designer on the Shecluded design system. I owned the color audit, the tonal scale, the token structure and the engineering handoff.

TL;DR

Shecluded's brand pink, #EB2590, is bold and recognisable, but white text on it measures 4.04:1, below the 4.5:1 WCAG AA minimum for normal-sized text such as button labels. Rather than abandon the brand color, I built a tonal scale around it and assigned each step a job: the original pink for large display moments and UI shapes, and a deeper step (#D2137A, 5.10:1 with white) for buttons and text. After the system was adopted, failing color pairings in the dashboard dropped from 11 of 38 to 0, and engineering replaced 23 hard-coded hex values with 14 semantic tokens.

The brand pink and its tonal steps with contrast ratios
The same pink, seven jobs. White text on the brand pink fails AA; one step deeper passes.

The problem: a strong brand color that fails where it matters most

Shecluded serves female entrepreneurs across Nigeria and Africa, many of whom apply for loans on their phones while managing a business and family. Research for the redesign found that 89% prefer mobile for financial tasks, and the team committed to designing for older and lower-quality devices. In that context, low contrast is not a style issue: it is a reason someone cannot read a button.

The brand's primary color, #EB2590, is the site's theme color. Measured against WCAG 2.1:

Contrast measurements of the brand pink against white and tints
The live product used the first, third and fourth pairings: white labels on pink primary buttons, pink "View details" links on white, and pink links inside the light pink eligibility card. The shipped button color is #D2137A.

The supporting brand colors told a mixed story:

Contrast measurements of the supporting brand colors

What shaped the system

  • The pink is the brand. Replacing it was not an option; the system had to keep it visible and recognisable. The founder's one rule for the redesign: "People should know it's Shecluded from across the room." Any fix had to read as the same pink.
  • Users read on phones in bright light and on older screens. Contrast has to hold up beyond a designer's monitor.
  • Trust depends on clarity. In a market where financial scams are common, unclear buttons and faint status labels erode confidence. Status cannot rely on color alone.

Decision 1: One hue, a full tonal scale

I generated a tonal scale from #EB2590 by changing lightness while keeping hue and saturation, so every step reads as the same pink. Each step was measured against white and black.

Seven-step pink tonal scale with contrast ratios
These are the seven steps adopted. Tint 200 and Tint 400 were generated and dropped because no component needed them.

Decision 2: Give each shade a job

Instead of one pink used everywhere, each shade has rules:

  • Buttons and links use Action (#D2137A): white labels reach 5.10:1, clearing AA for normal text.
  • The original brand pink stays for large display text, icons, illustrations and component boundaries, where the 3:1 threshold applies and it passes.
  • Pink text on pink backgrounds uses Action dark (#BB116D), which reaches 5.28:1 on Tint 50, where the brand pink only reaches 3.46:1 and Action only 4.38:1.

I documented the rules as design tokens in two layers, primitives (pink-50 to pink-800) and semantic tokens (action.primary, text.link, text.link-on-tint and so on), published them as Figma variables, and handed engineering a JSON token file plus a one-page "which pink?" usage sheet. Engineers mapped the tokens to CSS custom properties.

Before and after comparison of the button pink
The visual change is small. The readability change crosses the AA line on both surfaces.

Decision 3: Never rely on colour alone for status

Loan status is the most important information on the dashboard. Status chips such as Paid and Pending need a text label and an icon, not just a green or amber fill, so they work for colourblind users and on washed-out screens.

Status chips shown in color and in grayscale
In grayscale, every state is still identifiable from its label and icon.

Applying it to the product

I applied the system to the screens borrowers use most: the dashboard balance card, the eligibility card, the Repay loan and Apply buttons, the repayment list with status chips, the four-step application stepper, and all text links. The audit also caught the yellow eligibility card, whose amber text measured 2.39:1; it now uses dark brown at 6.34:1.

Dashboard annotated with tokens and contrast ratios
Every pairing on the dashboard, with its token and measured ratio.
Components referencing semantic tokens
Components only reference semantic tokens, so nobody has to re-measure a pink.

The result

11 → 0failing color pairings out of 38 in the dashboard
23 → 14hard-coded hex values replaced by semantic tokens

Failing pairings were measured with the same contrast script before and after. In the design review, the founder signed off on the deeper button pink without noticing it had changed until it was pointed out.

The system shipped to production with the redesigned dashboard in April 2025.

What I'd do differently

I measured on a monitor and in browser simulators. Next time I would test with real borrowers on low-end Android phones outdoors in Nigerian daylight, and check the scale against the newer APCA contrast method alongside WCAG 2.1, since APCA treats light-on-dark text like the balance card differently.