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
Paper cream
#FAF7F0--cream
Ink navy
#1C2B4A--ink
Charcoal
#2E2E2E--ink-soft
Brass
#A8823C--brass
Hairline
#E4DDD0--hairline
Success
#2E6B4F--success
White
#FFFFFF--card
Tokens · 02
Typography
Pursue. Persevere. Perfect.
Display · Fraunces · clamp(2.5rem, 5vw, 4rem)
Section header
Display · Fraunces · 2rem / 32px
Body copy — the quiet middle ground where the writing lives.
Body · Inter · 1rem / 16px · line-height 1.65
Eyebrow label
Body · Inter · 0.75rem · uppercase · brass
mono-typed metadata 01
Mono · JetBrains Mono · 12px
Tokens · 03
Layout & spacing
- Max width: 1200px
- Vertical rhythm: 96–128px between sections
- Base grid: 8pt
- Border radius: 4px everywhere
- Rule weight: 1px hairline (#E4DDD0)
- Shadows: soft (2px) / elevated (4–8px)
Components · 01
Buttons
Components · 02
Chips & labels
11+Maths Sample availableActive filter
Components · 03
Hairline rules
Standard hairline rule between content blocks.
Emphasis rule (ink) — use sparingly.
Components · 04
Testimonial
"
The closest I've found to the real CEM format. My daughter sat the SET feeling calm and prepared.
Components · 05
Stat strip
23+
Papers
12
Schools
4
Subjects
Instant
Delivery
Words · 06
Voice
Do
- "Buy at 9pm, printing by 9.05pm."
- "Written to the exact format of the Sutton SET."
- "No account needed. Your papers arrive instantly."
Don't
- Exclamation marks, emoji, ALL CAPS.
- Countdown timers, "hurry" language, fake urgency.
- Stacked banners or entry pop-ups.