Boutique hospitality, not a clinic. Warm linen grounds, deep juniper for trust, terracotta used sparingly, and arches borrowed from the 1920s house itself.
Juniper HouseVeterinary · Sarasota
Juniper HouseVeterinary · Sarasota
Color in use
Contrast ratios are computed from the tokens, not typed in.
Juniper
#23372F · juniper
Primary dark. Headlines, body text, dark bands and the footer.
Linen on juniper 10.9:1 · AAA
Linen
#F3EDE3 · linen
The page ground — never pure white. Linen 50 raises bands and cards.
Juniper on linen 10.9:1 · AAA
Terracotta
#B5654A · terracotta
Accent for display type (24px+), icons, berries and rules. Never small text.
On linen 3.7:1 · AA large
Terracotta Ink
#9A4F37 · terracotta-ink
The darker terracotta that carries buttons, links and eyebrows at small sizes.
On linen 5.1:1 · AALinen 50 on it 5.5:1 · AA
Clay#D9957AAccent on juniper5.1:1 · AA
Clay tint#EAD8CBHouse-call band
Sand#D6CBB8Photo ground
Sage#C3CDB9Photo ground
Juniper 700#3A5046Surfaces on dark
Moss#45514ABody copy7.1:1 · AAA
Moss muted#56625BCaptions5.5:1 · AA
Hairline#CBBFAERules and borders
Proportion
Linen 58%
Juniper 24%
Sand · Sage · Clay 12%
6%
Linen grounds every page; juniper carries trust in a few deep bands; terracotta is the single call to action, so it stays under a tenth of the screen. Terracotta itself (#B5654A) is 3.7:1 on linen, which is why small text and buttons use Terracotta Ink instead.
Type
Newsreader for headlines: a bookish serif with a warm italic, set light (300–450) and slightly tight. Instrument Sans for everything you read to act on. Both load through next/font.
Every size is fluid: it sits at the mobile value at 390px, the desktop value at 1440px, and moves smoothly in between — no jumps at tablet widths.
AaNewsreader 300–500
AaInstrument Sans 400–600
Display76 / 44
A calmer kind of vet.
Heading 154 / 34
Your pet’s doctor, by name.
Heading 242 / 30
Here for the season?
Heading 326 / 21
Senior & comfort care
Quote31 / 26
Now she barely notices.
Body large20 / 17
Appointments are never rushed, and your pet always sees their own doctor.
Body16 / 14.5
Exams, vaccines, nutrition and parasite prevention, planned around your pet’s age and way of life.
Eyebrow · small13 / 12
What a visit is likeCaptions and meta, 14px
Single-use display steps
text-feature · House-call headline60 / 38
text-title · Booking headline48 / 32
text-statement · Footer statement34 / 26
text-numeral · Pillar figures64 / 40
Sizes shown desktop / mobile, in px. Line height tightens as size grows.
Margin (gutter) and section rhythm (section) are fluid tokens, so a 1024px tablet gets 82px margins and 88px section spacing rather than either extreme.
Shape language
The archEvery photograph. Taken from the house’s Mediterranean Revival doorways.
Pills, 600 weight, no icons on primary. 52px tall by default, 56–58 in the hero and booking; 44 in the phone header. One terracotta button per view — everything else steps back to outline or text.
Key components
Doctor card
Dr. Priya Raman
Feline & Senior Care
Loves the patients other people call “difficult”.
Service item
Recovery suites
Quiet private rooms, updates by text and photo.A few quiet, private rooms for post-surgical stays, with updates by text and photo.
Care-team messageMHDr. Hale
All done. Pepper was a model patient, apart from the singing.
Review“
“Our cat used to hide for a day after every vet visit. Now she barely notices.”
Next.js App Router + Tailwind CSS v4. Tokens live in brands/juniper-house/theme.css as @theme variables, so every class on this page — bg-juniper, text-h1, py-section — is generated from them.
