Wellness
Routine Wellness Exam
A head-to-tail assessment that lets your doctor track changes over time and catch the early signs of a problem. We recommend one a year for cats and dogs.
Design system · Concept 1
Moorpark Warmth
Sherman Oaks Veterinary Group has been on Moorpark Street for over sixty years and is still run by the family whose name is on the surgery list. Its clients are not shopping in a panic; they are choosing who looks after the animal that sleeps on their bed. So this site is warm, worn-in and unhurried. It states; it never shouts.
- 01
Warm ink, rationed claret
Espresso carries the structure — headings, header rule, footer band. Claret is rationed to about one accent per section. Nothing is red just to be loud.
- 02
Serif at speaking volume
A serif at conversational scale — the h1 stops at 3.25rem — over their own Arial, with wide-tracked uppercase labels and section air of 56–104px.
- 03
Stamped, near-square surfaces
3px radius, hairline warm rules, flat printed panels with a claret edge, and buttons with a real bottom edge that depresses under the thumb.
Tokens
Colour
Four values come straight off their live site; the rest are cut from those two browns. Claret earns its place as the accent, so it appears on rules, eyebrows and one control per view — not on every surface.
ink
#2e1915
Extracted primary + button
ink-deep
#1c0f0c
Press + hover under primary
ink-soft
#5b4741
Body copy, 7.9:1 on canvas
claret
#800000
Extracted link / text / accent
claret-deep
#5c0000
Deep accent, hover on claret
oat
#efe8e0
Warm secondary surface
paper
#ffffff
Card + header surface
canvas
#f5f5f5
Extracted page background
line
#e2dad2
Hairline
line-strong
#c4b4aa
Hairline at rest on hover
signal
#0000ee
Extracted secondary — utility links
Surface · oat
The warm secondary surface. Used for bands that need separation from the canvas without going dark.
Surface · ink
The deep band, carrying a single warm gradient from ink to ink-deep. Eyebrows lift to #e2b9b9 here for 8.6:1 contrast. Utility links keep the extracted blue.
Tokens
Type scale and pairing
Their own Arial for body and labels; a locally-resolved serif stack standing in for the Wix webfont their headings use. No font is fetched at build or at runtime.
text-5xl
clamp(2.125rem → 3.25rem)
Veterinary Care in Sherman Oaks
text-4xl
clamp(1.875rem → 2.625rem)
Our Hospital
text-3xl
clamp(1.625rem → 2.125rem)
Walk-In Schedule
text-2xl
clamp(1.375rem → 1.625rem)
Routine Wellness Exam
text-xl
1.3125rem
Puppy & Kitten Initial Exam
text-lg
1.125rem
Schedule an appointment or walk in — we are here to help.
text-base
1rem
Body copy sits in a 66-character measure and is never centred at full width.
text-sm
0.875rem
Supporting copy inside cards and lists.
text-xs
0.75rem
Field labels and navigation
text-2xs
0.6875rem
Badges and captions
Tokens
Spacing, radius, shadow and motion
A 4px base with a generous section rhythm, a 3px stamped radius, warm-tinted shallow shadows, and one easing curve for everything that travels.
Spacing
--spacing
0.25rem
spacing × 4
1rem
spacing × 8
2rem
spacing × 16
4rem
--spacing-gutter
clamp(1rem → 2rem)
--spacing-section
clamp(3.5rem → 6.5rem)
Radius
rounded-brand
3px
rounded-lg
8px
rounded-pill
999px
Shadow
shadow-raise
0 1px 2px rgba(46,25,21,.06)
shadow-card
0 6px 18px rgba(46,25,21,.07)
shadow-lift
0 16px 40px rgba(46,25,21,.14)
Motion
--duration-fast
120ms
Press and colour changes
--duration-base
220ms
Sweeps, card lift
--duration-slow
500ms
Photography reveal, stamp rule
--ease-brand
cubic-bezier(.22,1,.36,1)
Everything that travels
Focus states, touch targets and reduced-motion handling come from the interaction kit; nothing here restates them.
Components
Buttons
Primary presses on a real 3px edge. Secondary is outlined in claret and fills on hover. Ghost is the quietest step, taking an underline that travels in from the left.
Primary
One per view: the call or the appointment request.
Secondary
The alternative route — call instead of book, or the reverse.
Ghost
In-flow navigation: read more, see the full list.
Components
Cards and badges
Cards stretch to equal height with the action pinned to the bottom, so a row stays level however long one body runs. Copy in a row is capped within roughly 15% of its siblings.
AccentNeutralOutlineWalk-ins welcomeFamily-operated
First visit
Puppy & Kitten Initial Exam
Book the first visit at six to eight weeks. We carry out a complete physical exam, including a fecal, and start the immunisation plan for your new family member.
Surgery
Spay and Neuter
The right timing is decided case by case with your doctor, though we generally advise between six and eight months. Microchips are usually placed during the procedure.
Components
Form fields
Every control clears a 48px touch target and states its own error. This specimen is not wired to anything; the request-service wizard posts to /api/lead.
We call back on this number.
Enter an email address we can reply to.
A sentence is plenty — the front desk will take the detail on the phone.
Voice
Warm, plain-spoken and unhurried, in the first person plural — the way a long-standing family practice talks. Explain what happens at the visit, name the doctors, give the number, and stop. No urgency theatre, no superlatives, and never a claim that is not on their own pages.
Where the accent falls
- Eyebrow above a section heading.
- The stamp rule beneath it.
- The card edge that draws down on hover.
- The outline and fill of a secondary button.
- The required mark on a field label.
Chrome
Header and footer
Both are rendered in place on this page. The header carries the wordmark, the primary navigation, the phone number as a tel: link and the appointment request; below 1024px the menu opens, scrolls and closes, and a call control sits within thumb reach at all times.
- Phone
- 818-784-9977
- Address
- 13624 Moorpark Street, Sherman Oaks, CA 91423
- Service area
- Sherman Oaks and the greater Los Angeles area
- Hours
- Mon–Wed 7:30–7:00 · Thu 7:30–7:00 · Fri 7:30–6:00 · Sat 8:00–4:00 · Sun 9:00–4:00