Aa
Fraunces
Display
Headlines, product names, pull quotes, prices. Variable, optical size 9–144.
300 · 400 · 500 · 600
For designers · VetPro Complete
Type & colour system
Everything below is rendered in the live theme fonts and tokens — what you see here is exactly what ships on the site and in email. Match these and artwork will sit correctly alongside it.
01 — The three faces
Aa
Instrument Sans
Body
All running copy, buttons, navigation, form labels.
400 · 500 · 600 · 700
Aa
Spline Sans Mono
Utility
Eyebrows, badges, fine print, tags, tabular numerals.
400 · 500 · 600
02 — Fraunces, the display face
Care better.
Worry less.
Weights
Vet-formulated 300
Vet-formulated 400
Vet-formulated 500 · default
Vet-formulated 600
The tracking rule
Hip & Joint
Do — 500, −0.02em
Hip & Joint
Don't — 700, default tracking
03 — Instrument Sans, the body face
Thirty years in exam rooms taught our family one thing: the owners who get the best outcomes are the ones with the information in hand.
04 — Spline Sans Mono, the signature move
The single most recognisable thing in the system: small uppercase mono, very wide tracking, sitting directly above a tight serif headline.
VetPro Health 360 · 3 months free
Every record. One place.
05 — Type scale in use
Page headline
Section headline
Card headline
Small headline
Lede paragraph
Body copy
Eyebrow / badge
06 — Palette
Amber is the only action colour — buttons and badges, nothing else. Plum carries hierarchy; oat is the page.
07 — Text tints & contrast
Secondary text is never a separate colour — it is ink at reduced opacity over oat. Ratios below are measured against the oat background.
Ink at 85%
Body
Ink at 78%
Body
Ink at 70%
Body
Ink at 66%
Body
Ink at 60%
Large only
Ink at 55%
Large only
Ink at 50%
Large only
Ink at 45%
Decorative
Careful with amber. White on amber measures 3.36:1 — under the 4.5:1 needed for body text. It is fine on large button labels, but never set small text in white on amber, and never set amber text on oat (3.12:1).
08 — Logo
On oat or white. This is the primary mark.
On plum. Knock out to oat — never place the dark mark on a dark panel.
Download
Transparent PNG. Never recolour, stretch, rotate, add effects, or place on a busy photo without a solid panel behind it.
09 — Shape & depth
Corner radius
999px
1.5rem
1.25rem
1rem
12px
Pills for anything interactive. 1.25–1.5rem for cards and panels. 12px for small tiles and icon chips. Nothing is ever square.
Elevation
soft
card
panel
Shadows are plum-tinted, never neutral grey or black. Large blur, low opacity, offset downward only.
10 — Icons
Line only, never filled. New icons must match the 1.7 stroke on a 24px grid or they will read heavier than the set.
11 — Photography & export
Direction
Natural light, warm cast, shallow depth of field. Real dogs in real places — grass, woods, the exam room — never a studio sweep or a white cyclorama. Clinical shots are candid and warm, not sterile. Dogs are relaxed and mid-life, matching the joint-support audience.
Where to get pictures
Start here
Unsplash
Free for commercial use, no attribution required, and large enough for any slot. The default for produced artwork. Pick natural light and real settings — the bluebell-wood shot in Welcome E3 came from here. Avoid studio backdrops and anything that reads as stock.
unsplash.com →
For social proof only
Dogs of VetPro
57 photos customers sent in with their reviews. Unbeatable for authenticity, but they top out at 1000–1200 px, so only 3 of 58 are big enough for an email header at 2× and none can fill a site hero. Use them small, and only in review or social-proof contexts.
Browse the gallery →
Customer photos are shown with permission. Gallery images are tied to the review they came with — never present one as a different customer's dog, and never pair one with a testimonial it did not belong to.
Export sizes
Email card header
export 1104 × 736
3:2
Email product panel
export 580 wide
free
Site hero
export 2400 wide
16:9 – 3:2
Phone mockup screen
export 497 × 900
497:900
Logo
export 376 wide
2.68:1
Avatar / review
export 200 square
1:1
Always export at 2× the display width. A 200px image placed in a 552px slot is what blur looks like — the browser cannot invent detail. Target JPEG quality ~78 and keep full-width email images under about 250 KB.
12 — Patterns to match in artwork
Badge
3 months freeAmber pill, 10px mono, 600, uppercase, 0.1em tracking, fully rounded.
Button
Get it on the App StoreAmber, white text, Instrument Sans 700 at 16px, fully rounded, generous padding.
13 — Getting the fonts
All three are free and open source. Use the Google Fonts page to install on your machine — the Get font button there downloads a zip. The repository link gives you the raw OTF, TTF and variable files if you prefer them.
Fraunces
Display
Variable · opsz 9–144 · wght 300–600
Google Fonts → Source files →Instrument Sans
Body
Variable · wght 400–700
Google Fonts → Source files →Spline Sans Mono
Utility
Variable · wght 400–600
Google Fonts → Source files →For developers — web embed
https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&family=Instrument+Sans:wght@400;500;600;700&family=Spline+Sans+Mono:wght@400;500;600&display=swap
Fallbacks
--font-display: 'Fraunces', georgia, serif;
--font-body: 'Instrument Sans', system-ui, sans-serif;
--font-mono: 'Spline Sans Mono', ui-monospace, monospace;
Fraunces is a variable font. The zip contains a static/ folder as well as the variable file. If your tool handles variable fonts badly, use the static instances — but set the 144 optical size for anything large, or the serifs flatten and it stops matching the site.