Skip to main content
StudentLoanStudy.uk

Brand guidelines

The Instrument system: one spruce, one clay, cool neutrals, and two typefaces. Archivo carries every word; Martian Mono is reserved for figures. Everything on this page is drawn from the live design tokens.

Two colours carry meaning

Every other surface is a cool neutral. Colour is spent only where it means something.

Spruce--primary

Brand, affordance, and every positive reading — links, actions, the paid-down curve.

Clay--signal

Cost only. Interest, the peak of the balance, the number that hurts. Used sparingly.

Primary logo

On dark
StudentLoanStudy.uk
On light
StudentLoanStudy.uk

Icon / favicon

2xl
lg
md
xs

Colour tokens

The full token set behind the two-colour system — neutrals, semantic status, and the per-series chart ramp.

Brand marks

The two fixed spruce tones baked into the logo and icon.

Spruce#0C5C44
Mint#34B08A
Neutrals
Background--background
Foreground--foreground
Card--card
Muted--muted
Border--border
Status

Non-brand utility tokens for system messaging — deliberately outside the two-colour thesis.

Info
Foreground
Background
Border
Success
Foreground
Background
Border
Warning
Foreground
Background
Border
Danger
Foreground
Background
Border
Chart series
Chart 1--chart-1
Chart 2--chart-2
Chart 3--chart-3
Chart 4--chart-4
Chart 5--chart-5

Typography

Two faces, one rule: words are Archivo, figures are Martian Mono. Nothing crosses over.

Aa
ArchivoDisplay, headings, body, every label400 · 500 · 600 · 700
1234
Martian MonoNumeric readouts — figures only400 · 500 · 600

Logo anatomy

StudentLoanStudy.uk
  • Icon: a mint square carrying a deep-spruce wave — the peak repayment zone lifted straight from the calculator chart.
  • "StudentLoan" is set in ink — the context, telling you what the site is about.
  • "Study" is set in spruce, the single brand colour — the emphasised, memorable word.
  • ".uk" is set in soft grey — the domain, deliberately subordinate to the name.