VetTriage

Overview

VetTriage is a compassionate, accessible veterinary telehealth platform embodying 'Clinical Clarity'—a design aesthetic that prioritizes trust, immediacy, and human connection over visual complexity. The brand serves pet owners seeking urgent, judgment-free veterinary guidance 24/7, transforming a traditionally appointment-bound service into an on-demand, video-first experience. The UI conveys calm professionalism through a restrained palette of deep navy (#305565) and medical-grade pink (#d71a52), anchored by clean typography and generous whitespace. The emotional response is one of relief: a pet owner sees the hero card's vivid pink CTA and knows help is moments away.

Voice: Direct, reassuring, never clinical or cold. The brand speaks in active, present-tense language: 'Connect now,' 'Start your session,' 'Your veterinarian is ready.' Vocabulary favors accessibility over jargon—'video chat' not 'teleconference,' 'pet' not 'animal patient.' Example sentence in brand voice: 'Your vet is available right now—no waiting room, no appointment needed.'

Colors

The color system balances medical authority with approachable warmth. Primary (#d71a52) is the signature accent—a vibrant, saturated pink deployed on all CTAs, hero cards, and interactive highlights. It signals urgency and compassion simultaneously, appearing on the 'CONNECT' button in the header and the 'NEW PATIENTS' card. Secondary (#305565) is a deep, professional navy used for body text, navigation, and secondary buttons; it conveys stability and expertise. Tertiary (#579af6) is a clinical blue reserved for links, focus states, and data visualization, providing a third accent without competing with primary. The surface stack uses near-white (#ffffff, #f5f5f5, #eeeeee) to maintain clarity and reduce cognitive load—critical for users in stressful pet-health situations. Error (#cf2e2e) i

Typography

The type system uses Quicksand exclusively—a geometric, approachable sans-serif that humanizes medical content without sacrificing professionalism. Display (64px, 400 weight) anchors hero headlines like 'On-Demand Veterinary Care for Your Pet,' using a lighter weight to feel inviting rather than authoritative. Headline-lg (40px, 600 weight) and headline-md (28px, 600 weight) structure section breaks and card titles, with 600 weight adding visual hierarchy without heaviness. Body-lg (18px, 400 weight) and body-md (16px, 400 weight) carry descriptive copy and list items, maintaining 1.5x line-height (28px and 24px respectively) for readability during high-stress scanning. Label-md (14px, 600 weight) and label-sm (12px, 500 weight) label form fields and badges. All headlines use negative lett

Layout

The layout uses a 12-column fluid grid with a max-width of 1280px, scaling responsively from mobile (single column) to desktop (multi-column sections). The hero section spans full width with asymmetric content: left-aligned headline and bullet list (40px left gutter) paired with a right-aligned card component (40px right gutter), creating visual tension that draws the eye to the CTA. Section separation uses lg spacing (40px) vertically and md spacing (24px) horizontally for gutters. Container padding defaults to {spacing.md} (24px) on tablet/desktop, reducing to {spacing.sm} (12px) on mobile. The 'NEW PATIENTS' card in the hero uses a 1:1 aspect ratio on desktop, stacking below the headline on mobile. All cards and inputs use consistent {spacing.md} (24px) internal padding. Whitespace is i

Elevation & Depth

Depth is achieved through subtle shadows and color shifts rather than dramatic layering. Level 1 (Base): flat surfaces at {colors.surface-bright} (#ffffff) with no shadow, used for primary content areas. Level 2 (Cards & Inputs): {elevation.md} (0 3px 8px rgba(0, 0, 0, 0.15)) applied to cards, input fields, and secondary containers, creating gentle separation from the background. Level 3 (Hero & Modals): {elevation.lg} (0 8px 24px rgba(0, 0, 0, 0.12)) on the primary CTA card and elevated modals, signaling maximum importance. On hover, cards transition from {elevation.md} to {elevation.lg} over

Shapes

The shape system follows 'Soft-Technical Precision'—rounded corners are used strategically to soften clinical sterility without introducing organic or playful aesthetics. Buttons use {rounded.lg} (10px / 0.625rem), a moderate radius that feels modern and approachable while remaining professional. Cards and hero components use {rounded.xl} (1rem / 16px), creating a slightly softer container that invites interaction. Input fields use {rounded.md} (8px / 0.5rem), a tighter radius that signals form-specific purpose. Badges and pills use {rounded.full} (9999px), creating perfect circles or capsules

Components

Action Elements Buttons are the primary interaction mechanism. Button-primary uses {colors.primary} (#d71a52) background, {colors.on-primary} (#ffffff) text, {rounded.lg} (10px), and padding 12px 40px, creating a 48px tall target. On hover, button-primary-hover shifts to #a01a3d (a darker shade of primary) with a 200ms ease-in-out transition, providing clear feedback without animation jank. Button-secondary mirrors the primary structure but uses {colors.secondary} (#305565) background, ideal for secondary actions like 'Learn More' or 'View Details.' Button-ghost has transparent background, {colors.primary} text, and a 2px solid border in {colors.primary}, used for tertiary actions or cancel buttons. All buttons use {typography.label-md} (14px, 600 weight) for text, ensuring readability

Do's and Don'ts

**Do**

• Do use {colors.primary} (#d71a52) exclusively for primary CTAs and interactive highlights—it's the signature brand accent and must remain visually distinct.
• Do maintain 24px gutters (md spacing) on desktop and 12px (sm spacing) on mobile; this rhythm prevents the interface from feeling cramped or scattered.
• Do apply {elevation.md} (0 3px 8px rgba(0, 0, 0, 0.15)) to all cards and input fields; shadows must be soft and subtle, never harsh or dramatic.
• Do use Quicksand for all typography; its geometric warmth humanizes medical content and differentiates VetTriage from clinical competitors.
• Do ensure all interactive elements (buttons, links, inputs) have a clear hover state with a 200ms transition; users in stressful situations need immediate feedback.
• Do use {colors.secondary} (#305565) for body text and navigation; it's professional, readable, and pairs perfectly with the pink primary.

**Don't**

• Don't use hard corners (0px radius) on any component; they feel corporate and cold. Minimum radius is {rounded.md} (8px).
• Don't apply shadows exceeding 8px blur radius or 0.15 opacity; heavy shadows make the interface feel dated and reduce the sense of lightness.
• Don't use system fonts or generic sans-serifs; Quicksand is mandatory for brand consistency and emotional warmth.
• Don't exceed 1280px container width on desktop; wider layouts dilute the focused, intimate experience VetTriage aims to create.
• Don't use all-caps text for body copy or CTAs; it feels aggressive and contradicts the calm, reassuring brand voice.
• Don't mix primary and secondary colors on the same button or card; color hierarchy must be crystal clear to guide user attention.