Design system
The system behind this site
Every colour, size and rule rgleeson.com uses, with where each one came from and how it measures. The token, contrast and type sections below are generated from the live stylesheet, so they can't drift from what you're looking at.
Where it came from
I didn't start from a blank page. The layout, type and spacing came from studying good examples of studio portfolio design: lots of white space, oversized headlines, one accent used sparingly. Starting from proven patterns, then fitting them, is the same approach I take for clients, and it's why the structure here works.
What I didn't do at first was measure it. The site launched in June 2026 with a light coral accent that failed contrast with white text: 2.84:1 on every button and accent band, where 4.5:1 is needed. In November I checked every piece of text on 12 pages against the background actually behind it, and 102 elements failed.
So the accent moved 8° towards orange in OKLCH and deepened until white text passed: coral orange, #D04205, at 4.70:1. A brighter step was added for headlines, where large text only needs 3:1, and form field edges got dark enough to see. Afterwards, 10 elements failed, and none of them use the accent. The full write-up covers the options I tried and the before-and-after screenshots.
What changed when I fitted it
4 tokens changed and 9 were added when I fitted the starting system to this site and measured it. The four headline sizes replaced the original type scale.
| Token | Before | Now | Status | Why |
|---|---|---|---|---|
--color-secondary | #FF6955 | #D04205 | Changed | White text on it was 2.84:1; now 4.70:1 |
--color-secondary-hover | #DD5341 | #AF3500 | Changed | Darker step of the new accent |
--color-secondary-tint | — | color-mix(in srgb, var(--color-secondary) 8%, transparent) | Added | Replaces hard-coded coral tints |
--color-accent-display | — | #F36435 | Added | Headlines and dark bands: 6.05:1 on ink |
--color-text-subtle | #828A9D | #6A7185 | Changed | Was 3.46:1 on white; now 4.87:1 |
--color-text-accent | — | #D04205 | Added | Accent for links and labels, 4.70:1 on white |
--color-input-border | — | #8A91A6 | Added | Field edges were 1.54:1; now 3.14:1 |
--container-max | 1280px | 1680px | Changed | Wider container for large screens |
--font-size-hero | — | clamp(2.75rem, 5.6vw, 5rem) | Added | New headline scale, replacing the original --fs-* sizes |
--font-size-page | — | clamp(2.5rem, 4.6vw, 4rem) | Added | New headline scale, replacing the original --fs-* sizes |
--font-size-section | — | clamp(1.875rem, 3.2vw, 2.75rem) | Added | New headline scale, replacing the original --fs-* sizes |
--font-size-sub | — | clamp(1.5rem, 2.4vw, 2rem) | Added | New headline scale, replacing the original --fs-* sizes |
--shadow-nav | — | rgba(15, 16, 20, 0.06) 0px 6px 24px 0px | Added | Sticky header shadow |
Colour
Ink and white do most of the work. One accent, coral orange, is used sparingly: one filled button per view, one accent band per page. The large-accent step exists because the bright orange only passes contrast at headline sizes.
Contrast
Every colour pair the site uses, measured with the WCAG 2 formula. Text needs 4.5:1, or 3:1 at headline sizes; outlines and field edges need 3:1.
| Pair | Colours | Measured | Needs | Result |
|---|---|---|---|---|
| Body text on the page | Aa #0F1014 on #FFFFFF | 19.01:1 | 4.5:1 | Pass |
| Muted text on the alternate band | Aa #5C5C5C on #F9FAFF | 6.42:1 | 4.5:1 | Pass |
| Captions on the alternate band | Aa #6A7185 on #F9FAFF | 4.67:1 | 4.5:1 | Pass |
| Accent links on the page | Aa #D04205 on #FFFFFF | 4.70:1 | 4.5:1 | Pass |
| Accent links on the alternate band | Aa #D04205 on #F9FAFF | 4.51:1 | 4.5:1 | Pass |
| White text on accent buttons and bands | Aa #FFFFFF on #D04205 | 4.70:1 | 4.5:1 | Pass |
| White text on accent hover | Aa #FFFFFF on #AF3500 | 6.30:1 | 4.5:1 | Pass |
| Large accent headline on the page | Aa #F36435 on #FFFFFF | 3.14:1 | 3:1 | Pass |
| Accent text on dark bands | Aa #F36435 on #0F1014 | 6.05:1 | 4.5:1 | Pass |
| White text on dark bands | Aa #FFFFFF on #0F1014 | 19.01:1 | 4.5:1 | Pass |
| Muted text on dark bands | Aa #D0D0D0 on #0F1014 | 12.33:1 | 4.5:1 | Pass |
| Accent outlines (non-text) | #D04205 on #FFFFFF | 4.70:1 | 3:1 | Pass |
| Form field edges (non-text) | #8A91A6 on #FFFFFF | 3.14:1 | 3:1 | Pass |
Type
Cabinet Grotesk for headlines and Inter for everything else, both kept from the original. Four headline sizes scale with the screen between a phone minimum and a desktop maximum.
I design and build websites.
Design system
How it works
What I built
- Headlines
- Cabinet Grotesk, weight 500 · Fontshare, free for commercial use
- Body
- Inter, 16 to 20px · Google Fonts
Shape and space
sm 6pxmd 8pxlg 12px--container-max- 1680px
--page-x- 72px
--section-y- 96px
--grid-gap- 24px
Components
The real components, built from the same classes the rest of the site uses.
- Design Systems
- AI-Augmented Design
Your business online
A card groups one idea. Light fill, hairline edge, no shadow.
Rules
Do
- Use the accent once per view: one filled button, or one band per page.
- Use the large accent step only for headlines and figures, never for body text on white.
- Alternate white and off-white sections instead of drawing borders between them.
- Put tags under card titles, at every width.
- Measure any new colour pair before it ships.
Don't
- Fill more than one button per view with the accent.
- Add a second accent colour; use more steps of the one there is.
- Use colour alone to show meaning; pair it with a word or icon.
- Add shadows, gradients or decoration to cards.
- Animate anything so it stays hidden without JavaScript.
How this approach works for client sites: what every site gets.
Want a system fitted to your business?
Every site I build starts from a proven design system and is fitted to your brand and measured before launch. Email richardgleeson83@gmail.com or ring +44 7823 77 88 95.