---
version: alpha
name: "Zocdoc"
description: "Zocdoc turns healthcare search into a friendly marketplace flow with a saturated yellow brand field, deep violet copy, conversational prompts, and practical doctor, specialty, location, insurance, and availability controls."
colors:
  bg: "#fff04b"
  surface: "#ffffff"
  surface-soft: "#fffbe0"
  text: "#3a2b71"
  text-body: "#242424"
  text-muted: "#666666"
  brand: "#fff04b"
  accent: "#3a2b71"
  accent-hover: "#2d215c"
  border: "#d8d5df"
  success: "#237a57"
  danger: "#c63d3d"
  on-brand: "#3a2b71"
typography:
  display:
    fontFamily: "Sofia Pro"
    fontSize: "72px"
    lineHeight: 1.5
    letterSpacing: "-0.025em"
  body:
    fontFamily: "Sofia Pro"
    fontSize: "16px"
    lineHeight: 1.5
  mono:
    fontFamily: "SFMono-Regular"
rounded:
  button: "12px"
  card: "20px"
  pill: "9999px"
spacing:
  xs: "0px"
  sm: "4px"
  md: "12px"
  lg: "32px"
  xl: "64px"
---

## Overview

## Overview

The visual system should feel optimistic and useful rather than clinical. Yellow creates the first-viewport atmosphere; white search and provider surfaces make the booking workflow easy to scan.

## Colors

Use yellow as a large brand field, not as body text. Deep violet carries headlines and actions, while white and soft neutral surfaces hold forms, provider details, and availability.

## Typography

Use a rounded geometric sans with clear distinctions between question-like headlines, form labels, provider names, and metadata. Keep body copy plain and comfortably spaced.

## Layout

Lead with the task: what care is needed, where, and when. Put trust and educational content after search rather than before it.

Stack search fields vertically on mobile and keep the final action full width. Provider cards should preserve rating, specialty, location, and next appointment without horizontal scrolling.

## Elevation & Depth

Separate white workflow surfaces from yellow with a light border and restrained shadow. Avoid glossy elevation or translucent glass in healthcare forms.

## Shapes

Use 8px for fields and buttons, 12px for provider cards, and 20px only for large informational panels. Pills are appropriate for availability filters and insurance chips.

## Components

Search fields should be large, white, icon-led, and grouped into one obvious flow. Provider cards need restrained borders, visible ratings, next-available time, and a violet booking action.

Autocomplete and calendar feedback should be immediate. Use short fades for result changes, preserve the user's search values, and remove decorative motion for reduced-motion users.

Never set white text on yellow. Form errors must include text and programmatic relationships; date, insurance, and specialty selectors require complete keyboard support.

Ask clear patient questions and use familiar terms. CTAs should describe the next step, such as `Find doctors`, `View availability`, or `Book appointment`.

The core expression is light. If a dark accessibility theme is offered, retain yellow only as a controlled accent and use a deep violet-black page surface.

The system combines booking-marketplace efficiency with a friendlier consumer-health tone. It avoids hospital-blue dominance and replaces it with yellow recognition plus violet control states.

## Do's and Don'ts

Do keep search prominent and preserve practical provider metadata. Do not use yellow for long text, hide fees or availability, or turn sensitive healthcare choices into playful animation.

Create a Zocdoc-style healthcare search page with a bright yellow hero, deep violet conversational headline, white specialty and location fields, a clear violet search button, and practical provider cards with ratings and available appointment times.