Switch between the rendered Visual preview and the Raw DESIGN.md.
Zocdoc's design system embodies a clean, accessible, and trustworthy aesthetic built for healthcare discovery and patient empowerment. The visual identity prioritizes clarity and simplicity, with a bold accent color that conveys confidence and energy. The system relies on ample whitespace, legible typography, and purposeful color application to guide users through critical healthcare decisions. This is a functional, modern interface that prioritizes user comfort and ease of navigation in a high-stakes domain.
Key Characteristics
#FCD34D): Primary action buttons, brand accent, call-to-action elements, logo background#003D7A): Primary text, headings, brand identity reinforcement#FCD34D): Warnings, highlights, emphasis states#1F2937): Secondary text, labels, UI emphasis#FCD34D): Default state for primary CTAs#000000): High-contrast text on yellow buttons#EAB308): Slightly darker yellow on hover#0066CC): Standard interactive links (inferred)#000000): Primary text, headings, body copy#374151): Secondary text, supporting copy#F3F4F6): Background surfaces, dividers#FAFBFC): Page backgrounds, subtle contrast#FFFFFF): Primary background, card surfaces#FFFFFF): Default card and container fill#F9FAFB): Secondary surface, sidebar backgrounds#E5E7EB): Light dividers and borders#0066CC): Keyboard focus indicator (inferred)#10B981): Positive confirmations, completed states (inferred)#EF4444): Errors, warnings, destructive actions (inferred)#3B82F6): Informational messages (inferred)Primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif Secondary: Georgia, "Times New Roman", serif (for body emphasis where needed) Fallback Stack: ui-sans-serif, system-ui, sans-serif
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display Large | Primary | 48px | 700 | 1.2 | -0.5px | Hero headlines, page titles |
| Display Medium | Primary | 36px | 700 | 1.25 | -0.3px | Section headlines |
| Heading Large | Primary | 28px | 700 | 1.3 | 0px | Primary section titles |
| Heading Medium | Primary | 24px | 600 | 1.35 | 0px | Secondary headings |
| Heading Small | Primary | 20px | 600 | 1.4 | 0px | Subsection titles |
| Body Large | Primary | 18px | 400 | 1.6 | 0px | Large body text, introductions |
| Body Regular | Primary | 16px | 400 | 1.6 | 0px | Standard body copy, descriptions |
| Body Small | Primary | 14px | 400 | 1.5 | 0px | Secondary body, metadata |
| Button | Primary | 16px | 600 | 1.5 | 0.25px | Interactive button text |
| Link | Primary | 16px | 500 | 1.6 | 0px | Underlined navigation links |
| Caption | Primary | 12px | 400 | 1.4 | 0.3px | Captions, helper text, footnotes |
| Code | Monospace | 14px | 400 | 1.5 | 0px | Code blocks, error IDs |
#FCD34D#00000012px 24px16px6008pxnonepointer#EAB308, text #000000#DBAF00, text #000000#D1D5DB, text #9CA3AF, cursor not-allowed0 2px 4px rgba(0,0,0,0.1)#FFFFFF#003D7A12px 24px16px6008px2px solid #003D7Apointer#F3F4F6, border #003D7A, text #003D7A#E5E7EB, border #003D7A#D1D5DB, text #9CA3AF, cursor not-allowedtransparent#0066CC12px 24px16px5008px1px solid transparentpointer#F0F4FF, text #0052A3#E0E9FF, text #003D7Atext-decoration: underline#FFFFFF1px solid #E5E7EB12px20px0 1px 3px rgba(0,0,0,0.08)0 4px 12px rgba(0,0,0,0.12), border #D1D5DB#FFFFFFnone12px20px0 4px 12px rgba(0,0,0,0.12)#F9FAFB1px solid #E5E7EB8px16px0#FFFFFF1px solid #D1D5DB8px12px 16px16px1.5#000000#9CA3AF#0066CC, Box Shadow 0 0 0 3px rgba(0,102,204,0.1)#F3F4F6, border #E5E7EB, color #9CA3AF#FFFFFF1px solid #D1D5DB8px12px 16px16px1.6120pxvertical#0066CC, Box Shadow 0 0 0 3px rgba(0,102,204,0.1)20px × 20px4px (checkbox), 50% (radio)2px solid #D1D5DB#FFFFFF#FCD34D#000000pointer0 0 0 3px rgba(0,102,204,0.1)#FFFFFF1px solid #D1D5DB8px12px 16px16px#000000pointer#6B7280#0066CC#FFFFFF1px solid #E5E7EB16px 20px64pxflexcenter0 1px 3px rgba(0,0,0,0.05)#37415116px5008px 12pxpointer#003D7A, background #F3F4F6, border-bottom 3px solid #FCD34D#003D7A, border-bottom 3px solid #FCD34D14px#6B7280/ in #D1D5DB#0066CC#0052A3, text-decoration underline#F3F4F6#3741514px 12px12px50016px1px solid #D1D5DB#D1FAE5#065F461px solid #A7F3D0#FEF3C7#92400E1px solid #FCD34D#FEE2E2#991B1B1px solid #FECACABase Unit: 8px
Scale:
4px – Micro spacing, icon spacing8px – Tight spacing, element padding12px – Button padding, form field spacing16px – Standard padding, component spacing20px – Section spacing, card padding24px – Large spacing, section margins32px – Major section separation40px – Page margin (large screens)48px – Hero spacing64px – Section dividers (max width layouts)Context:
12px padding vertical, 16px padding horizontal20px internal padding20px mobile, 40px tablet, 60px desktop32px–48px between major sections1280px (large container), 1200px (standard)20px at desktop, 16px at tablet, 12px at mobile20px margin), 85% on tablet, full width with max-width constraint on desktopGenerous whitespace reinforces clarity and trust. Breathing room between sections reduces cognitive load in the healthcare context. Minimum padding around text elements is 16px; section margins are minimum 32px. Use whitespace to establish visual hierarchy and guide user focus to critical healthcare information.
4px – Form inputs, small UI elements8px – Buttons, small cards, popovers12px – Cards, containers, dialog boxes16px – Larger containers, emphasis cards50% – Circular elements, avatars, badges| Level | Treatment | Use |
|---|---|---|
| Flat (None) | box-shadow: none | Text, inline elements, flat backgrounds |
| Elevation 1 | box-shadow: 0 1px 3px rgba(0,0,0,0.08) | Default cards, subtle containment |
| Elevation 2 | box-shadow: 0 2px 4px rgba(0,0,0,0.1) | Button resting state, hovered surfaces |
| Elevation 3 | box-shadow: 0 4px 12px rgba(0,0,0,0.12) | Elevated cards, hovered cards, modals |
| Elevation 4 | box-shadow: 0 8px 24px rgba(0,0,0,0.15) | Dropdown menus, floating action panels |
| Elevation 5 | box-shadow: 0 12px 32px rgba(0,0,0,0.18) | Modal dialogs, critical overlays |
Shadow Philosophy: Shadows are subtle and purposeful, used sparingly to establish spatial hierarchy without overwhelming the interface. Use soft, diffuse shadows that feel natural and trust-building in a healthcare context. Avoid harsh, high-contrast shadows; prioritize clarity over depth.
#FCD34D (Zocdoc Yellow) for all primary call-to-action buttons to maintain brand recognition16px minimum font size for body text to ensure readability across devices20px) in cards and containers to create visual breathing room#0066CC with 3px blur) on all interactive elements for keyboard navigation#EF4444 with supporting text#FCD34D) for text; reserve it for backgrounds and accents only| Name | Width | Key Changes |
|---|---|---|
| Mobile (xs) | 320px–479px | Single column, 12px gutter, 20px margins, 14px body text |
| Mobile (sm) | 480px–639px | Single column, 16px gutter, 20px margins, 16px body text |
| Tablet (md) | 640px–1023px | 2-column grid, 16px gutter, 32px margins, 16px body text |
| Tablet (lg) | 1024px–1279px | 4-column grid, 20px gutter, 40px margins, 16px body text |
| Desktop (xl) | 1280px+ | 12-column grid, 20px gutter, 60px margins, full max-width container |
44px × 44px for all interactive elements (buttons, links, form controls)8px padding around text-only links to meet touch target size8px gap between adjacent touch targets to prevent accidental activation24px × 24px for touch, 16px × 16px for mouse/desktop UImd breakpoint and abovesm; 2-column grid at md; 3+ columns at lg and above20px to 16px at tablet, 12px at mobile for constrained screens16px margins at mobile; centered with max-width 600px at desktop#FCD34D)#000000)#000000)#374151)#FFFFFF) or Subtle Gray (#F9FAFB)#FFFFFF) with 1px solid #E5E7EB border#0066CC)#EF4444#10B981#E5E7EB)#FCD34D background with #000000 text, 8px border-radius, 12px vertical / 24px horizontal padding, 600 font weight, minimum 44px height for touch0 0 0 3px rgba(0,102,204,0.1) focus ring; do not remove default outlines; test keyboard-only navigation8px; no arbitrary spacing; cards 20px padding; sections 32px–48px gaps; form field groups 12px apart48px / 700 weight; body 16px / 400 weight; buttons 16px / 600 weight; line-height 1.5–1.6 for body20px padding, 1px solid #E5E7EB border, 0 1px 3px rgba(0,0,0,0.08) shadow; hover lifts to 0 4px 12px rgba(0,0,0,0.12)320px; single column at <640px; touch targets 44px × 44px; reduce margins to 16px mobile, 20px tablet, 40px+ desktop12px vertical / 16px horizontal padding, 1px solid #D1D5DB border, 8px radius; focus border #0066CC; labels 14px / 500 weight above fields#FCD34D) only for primary buttons and brand elements; secondary buttons use navy (#003D7A) outline; no yellow text; logo uses yellow square background#EF4444; success in #10B981; validation messages 12px below input; include icon + text for status; clear, instructive messaging critical in healthcare context