Style guide
The Able Spectrum design system.
The tokens, type and components used across ablespectrum.com. Flat and architectural, Archivo throughout, one red accent, zero corner radius, black-and-white photography.
Colour
Every colour is a named token. Red text on a light ground is always accent-deep; the brighter accent is reserved for the focus ring. The Spectrum band replaces solid banners.
ground
#f3f2f2 · Page background
surface
#eae9e9 · The one tinted panel
ink
#201e1d · Headings and body copy
ink-soft
#2d2b2b · Long paragraphs
muted
#605d5d · Captions, meta, footer
rule-strong
#201e1d · 2px section rules
rule-soft
#bab6b6 · 1px rules inside a section
accent
#ec3013 · Focus ring only
accent-deep
#ae1800 · All red text, links, primary buttons
accent-press
#7c1405 · Hover state of accent-deep
on-accent
#ffffff · Text on dark grounds
step-number
#9b9797 · The 01/02/03 numerals
Spectrum band — white text on every stop is at least 13:1
linear-gradient(120deg, #3a0e0a, #3d2a05, #0e2e1a, #0c1f3f, #23123f) · Closes every page. Alludes to the logo’s spectrum arc while keeping AAA contrast for white text.
Typography
Archivo at weights 400 and 800 only. Nothing is centred. Body copy wraps at about 60 characters.
Display · 88 / 56 / 40 · 800 · 0.98
Beautiful websites made accessible.
H1 Inner · 72 / 48 / 34 · 800 · 1.0
Beautiful websites made accessible.
H2 Section · 44 / 34 / 28 · 800 · 1.0
Beautiful websites made accessible.
H3 Service Row · 38 / 28 / 24 · 800 · 1.05
Beautiful websites made accessible.
H3 Card · 22 / 20 / 19 · 800 · 1.2
Beautiful websites made accessible.
Lead Paragraph · 20 / 18 / 17 · 400 · 1.45
Beautiful websites made accessible.
Body · 17 / 16 / 16 · 400 · 1.5
Beautiful websites made accessible.
Small Body · 15 · 400 · 1.5
Beautiful websites made accessible.
Meta Caption · 13 · 400 · 1.5
Beautiful websites made accessible.
Eyebrow · 13 / 13 / 12 · 800 · 0.16em · uppercase
Beautiful websites made accessible.
Table Header · 11 · 600 · 0.08em · uppercase
Beautiful websites made accessible.
Buttons
ASButton. Labels flush left, radius 0, no icons. Every variant keeps the 2px accent focus ring at 2px offset.
Used on the Spectrum band and image heroes.
Layout and rules
Content width
1080px max, centred. Gutters 56px desktop, 32px tablet, 24px phone.
Section padding
72px top, 64px bottom on desktop; 48/40 tablet; 40/32 phone.
Rules
2px ink between sections. 1px rule-soft inside a section. No other borders.
Radius and shadows
Radius is 0 everywhere. No drop shadows on content.
Photography
Every photo renders black and white: grayscale 100%, contrast 108%. Image heroes carry an 80% ink overlay under white text.
Alignment
Nothing is centred — headings, paragraphs and button labels are all flush left.
Accessibility rules
—
Focus ring: 2px #ec3013 at 2px offset on every interactive element, never removed.
—
Red text on a light ground is always #ae1800 (7.6:1). #ec3013 is a field colour, not a text colour.
—
One h1 per page; headings never skip a level. Framer text layers get their real tag.
—
Targets are at least 44×44px at mobile widths.
—
Every image has alt text, or an explicit empty alt if decorative.
—
No horizontal scrolling at 320px; tables collapse rather than scroll.
—
Videos never autoplay; thumbnails say where they go.