The building blocks of splootvets.com.

Foundations

Colors

Cream dominates the canvas, teal carries text and dark sections, coral is the surgical accent (CTAs, eyebrows, one highlight word per headline). Mint shows up in small icon tiles and the occasional soft section.

Tailwind tokens

sploot-teal   #1B4B4B
sploot-coral  #E07A6A
sploot-cream  #F2EAE4
sploot-paper  #FAF7F4   /* lighter cream, header & dropdown surfaces */
sploot-mint   #E8F4F0

Foundations

Typography

New Spirit for display and headings (max weight 500 — the font doesn't go heavier). Outfit for body and UI, full 300–700 range available.

Navigation

Navbar

Sticky mega-header with backdrop blur, brand left, primary nav center, coral "Book Now" right. Mobile collapses to a hamburger that opens a vertical drawer.

Book Now

Used on: every page. Lives inline in each HTML file with brand colors, blur, mega-dropdowns (Services / Locations).

Navigation

Footer

Dark teal panel, four columns: brand + tagline, Pages, Locations, Get in Touch. Coral "Book an Appointment" pill sits in the contact column.

Primary & urgent veterinary care, open 365 days a year.

Pages

• About
• The App
• Pharmacy
• Membership

Locations

• Denver
• Chicago
• Colorado Springs
• Salt Lake City

Get in Touch

(720) 770-8656

Book →

© 2026 Sploot Veterinary Care.

PrivacyTerms

Heroes

Split hero

Editorial two-column hero used on service pages (primary-care, wellness-exams). Left column: eyebrow → headline (with italic accent) → subhead → "Open now" pulse card → primary + secondary CTAs → stat card. Right column: image with a coral shape rotated behind it.

Primary Care

Routine care that keeps them well.

Annual exams, vaccines, dental, and parasite prevention — under one warm, modern roof.

Open now · 8am–8pm

Same-day appointments available

Book an appointment Call (720) 770-8656

365days

Open every day of the year — including holidays.

Used on: primary-care, wellness-exams. Class hooks: .hero-section, .hero-visual, .open-card, .stat-card.

Components

Buttons & CTAs

Coral primary for the moment of conversion (Book Now, Get the App). Teal outline or solid for secondary actions. Inline arrow link for tertiary or in-flow CTAs.

<a class="btn-coral">Book Now</a>
<a class="btn-teal-solid">Get the App</a>
<a class="btn-teal-outline">Secondary</a>
<a class="btn-link">Explore →</a>

Components

Store badges

App Store and Google Play download buttons. Apple icon stays monochrome; Google Play uses its branded multi-color triangle.

Components

Card system

Single base — .s-card — plus BEM slot elements (__icon, __number, __eyebrow, __title, __stat, __body) and modifiers (--featured dark teal, --bordered coral edge, --hoverable lift on hover). Use this for any new card and migrate existing one-offs (.inc-card, .why-card, .cover-card) to it over time.

<div class="s-card">
  <div class="s-card__icon"><svg/></div>     <!-- or __number, or __eyebrow + __stat -->
  <h3 class="s-card__title">Title</h3>
  <p class="s-card__body">Supporting text.</p>
</div>

<!-- Modifiers (additive) -->
.s-card--featured   /* dark teal */
.s-card--bordered   /* coral edge */
.s-card--center     /* center-aligned content */
.s-card--hoverable  /* lift + shadow on hover */

Components

Page cards

The homepage grid uses three variants: standard white, dark-teal featured (SplootRx, The Sploot App), and white with a coral border accent (Today's Availability).

Used on: homepage page-card grid. The full-width sm:col-span-2 variant works as a featured "last word" CTA.

Components

Service cards

Vertical cards used on service pages to outline what's covered. Rounded icon tile (cream), heading, supporting copy, uppercase arrow link aligned to the bottom that widens its gap on hover.

Used on: primary-care §2 "covers". Class hook: .cover-card.

Components

Service cards (alt)

Horizontal link rows used for secondary or "beyond the basics" services. Title + meta on the left, circular arrow on the right that fills coral on hover. Three-column grid at desktop.

Used on: primary-care §5 "beyond". Class hook: .beyond-link.

Components

Checklist

Vertical list of items with a green checkmark glyph and thin separators between rows. Used for "what to bring" / prep lists. Built on .s-panel.s-panel--rows with .s-check-row children.

Used on: wellness-exams §6 "prep". Class hooks: .s-panel.s-panel--rows + .s-check-row.

Components

Stat trio

Three columns inside one panel with vertical dividers. Each cell: uppercase eyebrow → large serif phrase → small subline. Stacks on mobile. Built on .s-panel.s-panel--cols.cols-3.

Used on: wellness-exams §5 "cadence". Class hooks: .s-panel.s-panel--cols.cols-3 + card slot elements.

Components

Steps timeline

Numbered process flow with a dashed coral connector running between the circles. Four 64px outlined circles, each followed by a heading and a paragraph. Connector hides on mobile; circles stack 2-up.

Used on: wellness-exams §4 "steps". Class hooks: .s-steps, .s-step, .s-step__num.

Components

Tabs

ARIA-compliant tablist + panels. Three tabs along a bottom-bordered row; active state darkens the text and adds a thick teal underline. Active panel is a two-column card (image + copy) that fades up on switch.

0–1 yr

Puppies & Kittens

1–7 yr

Adult

7+ yr

Senior

The first year, set up right.

Vaccine series, spay/neuter, training basics, and a comfortable introduction to lifelong vet visits — handled at your pup or kitten's pace.

Used on: primary-care §4 "life stage". Class hooks: .stage-tabs, .stage-tab, .stage-panel. JS toggles is-active + hidden + aria-selected.

Components

Value-prop trio

Three cards in a row, with the middle card in mint as the visual anchor. Used at the top of feature/landing pages to summarize the offer in one glance.

Components

Feature row

Two-column row used to deep-dive a feature: copy on one side (eyebrow, heading, body, bulleted benefits) and a screen-card on the other. Alternate the order between rows for rhythm.

Components

Phone mockup

CSS-only iPhone-shaped frame with a black dynamic-island pill. Drop a screenshot inside, optionally overlay floating "chip" notifications around it for added visual interest.

Components

Testimonials

Coral five-star rating, body quote, then a small avatar + name + location/pets line at the bottom. Three cards in a row at desktop.

Components

FAQ

Loaded from /styles/sploot-faq.css. Cream pill cards with a coral + that becomes − when open. Open state switches to a white background with a coral border.

<link rel="stylesheet" href="/styles/sploot-faq.css">

<div class="sploot-faq">
  <details>
    <summary>Question?</summary>
    <div class="faq-answer-body">Answer.</div>
  </details>
</div>

Components

QR card

Used in the closing CTA on the app landing page. White card, "SCAN TO DOWNLOAD" eyebrow, the real QR, and a tiny caption. Points at splootvets.com/get-app which redirects mobile visitors to the right store.

Scan to download

Point your camera here to install

Behavior

QR encodes the universal /get-app link. iOS scanners deep-link into the App Store; Android scanners deep-link into Play Store; desktop scanners just open the page.

Patterns

Section header

Coral eyebrow in caps with wide letter-spacing, then a large New Spirit heading on the next line. Used to introduce nearly every section across the site.

<p class="text-xs uppercase tracking-[0.18em] text-sploot-coral font-bold mb-3">
  Eyebrow Label
</p>
<h2 class="font-heading text-4xl md:text-5xl font-bold text-sploot-teal leading-tight">
  The heading goes here.
</h2>

Patterns

SPM callout

Coral promotional band for SplootPack Membership. Left column: white eyebrow → serif heading with underlined italic accent → bulleted perks list → white pill CTA. Right column: coral gradient panel (or image). Collapses to a single column on mobile.

Used on: primary-care §6 "pack-block". Class hook: .pack-card.

Patterns

Booking CTA

Dark teal closing CTA used on service pages (not the App download CTA). Centered headline with peach italic accent, supporting copy, primary coral "Book" button + outlined-light secondary phone button. Decorative mint blob in the bottom-left corner.

Used on: primary-care §8 "final-block", wellness-exams. Class hook: .final-block.

Patterns

App download CTA

Dark teal rounded panel used at the bottom of the app landing page. Headline + supporting copy on the left, store badges below; QR card on the right. Distinct from the Booking CTA above — this one drives installs, not appointments.

Bring your pet's care everywhere.

Download the Sploot app and book, refill, remember — wherever the road takes you both.

Download on the

App Store

Get it on

Google Play

Scan to download

Patterns

Motion

Two recurring motion patterns: reveal-on-scroll for content as you read down a page (subtle rise + fade), and a card stagger entrance on the homepage grid (cascading 120ms delay between cards).

.reveal { opacity: 0; transform: translateY(20px);
          transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.in { opacity: 1; transform: translateY(0); }