Design system
Style guide
Single source of truth for PT Publications tokens and components. Every value below is wired to src/styles.css.
Tokens · 01
Colour
White (page bg)
#FFFFFF--cream
Trust blue (primary)
#1D5FAD--brass
Dark navy (headings/footer)
#0F2E52--ink
Light blue (tint)
#EFF5FC--tint
Slate (body)
#3D4A5C--ink-soft
Sale red
#D64541--sale
Success green
#1E7B4F--success
Border grey
#DDE4EC--hairline
Tokens · 02
Typography — Inter throughout
School-specific 11+ practice papers that match the real exam.
Hero · Inter 800 · clamp(2.2rem, 4.5vw, 3.4rem) · line-height 1.1
Section heading
Inter 800 · 30px
Card title
Inter 700 · 15px
Body copy — direct, benefit-led, confident. Short sentences.
Inter 400 · 15px · line-height 1.55 · slate
Eyebrow label
Inter 600 · 11.5px · uppercase · trust blue
Tokens · 03
Layout & spacing
- Max width: 1280px
- Vertical rhythm: 56–72px between sections
- Grid: 12-col, tight
- Border radius: 8px cards/buttons
- Rule weight: 1px, #DDE4EC
- Elevation: border by default, shadow only on hover
Components · 01
Buttons
Components · 02
Chips & badges
11+Maths SampleSale −15%Active filter
Components · 03
Prices
£12.50
Standard price
£10.60£12.50−15%
Sale price
Components · 04
Trust chip strip
Rated 5★ by parents
Written by exam specialists
Instant download
Trusted since 2015
Components · 05
Utility bar variants
Volume discounts: 10% off over £100 · 15% off over £200 — applied automatically at checkout.
SaleAutumn sale — 15% off every paper. Applied automatically at checkout.(Seasonal — OFF by default.)
Components · 06
Review card
The closest I've found to the real SET format. My daughter sat the exam feeling calm and prepared.
Words · 07
Voice
Do
- "Instant download after checkout."
- "Matches the real Sutton SET format."
- "10% off over £100 — applied automatically."
Don't
- Exclamation marks, emoji, ALL CAPS.
- Countdown timers or "hurry" language.
- Stacked banners or entry pop-ups.