Card on cream
Cards are always light. The 1px stroke is painted in every mode and resolves to transparent outside cream.
Design system
Zocdoc for Providers foundation
Tokens, typography, color modes and shared components, built from the Figma design system. Every value on this page comes from a token — nothing is hardcoded.
Yellow
- --zd-color-yellow-1
- --zd-color-yellow-2
- --zd-color-yellow-3
- --zd-color-yellow-4
Orange
- --zd-color-orange-1
- --zd-color-orange-2
- --zd-color-orange-3
- --zd-color-orange-4
Pink
- --zd-color-pink-1
- --zd-color-pink-2
- --zd-color-pink-3
- --zd-color-pink-4
Neutrals
- --zd-color-cream-1
- --zd-color-cream-2
- --zd-color-charcoal-soft
- --zd-color-charcoal
Utilities
- --zd-color-button-yellow
- --zd-color-accent-dot
- --zd-color-cream-muted
- --zd-color-white
Type scale
Sizes interpolate between the 375 and 1440 artboards, so both designed widths render exactly. Resize the window to watch them move.
Header XXL — 60 / 48
Header XL — 48 / 40
Header L — 40 / 36
Header M — 32 / 24
Header S — 24
Header XS — 18 / 17
Body L — 18 / 15. Supporting copy under a heading.
Body M — 16 / 15. The default body size.
Body S — 12 / 13. Captions and small print.
Text link — Bold 14, always underlined
Tag with a pink dot
Color mode
Cream
The same components in every mode: nine semantic tokens are remapped, nothing else changes.
Buttons
Hover and focus each one: the filled variants widen the arrow gap, the stroke variants grow and fill, and the text link widens its gap with no surface to grow.
Color mode
Dark
The same components in every mode: nine semantic tokens are remapped, nothing else changes.
Card on dark
Cards are always light. The 1px stroke is painted in every mode and resolves to transparent outside cream.
Buttons
Hover and focus each one: the filled variants widen the arrow gap, the stroke variants grow and fill, and the text link widens its gap with no surface to grow.
Color mode
Sand
The same components in every mode: nine semantic tokens are remapped, nothing else changes.
Card on sand
Cards are always light. The 1px stroke is painted in every mode and resolves to transparent outside cream.
Buttons
Hover and focus each one: the filled variants widen the arrow gap, the stroke variants grow and fill, and the text link widens its gap with no surface to grow.
Color mode
Yellow light
The same components in every mode: nine semantic tokens are remapped, nothing else changes.
Card on yellow-light
Cards are always light. The 1px stroke is painted in every mode and resolves to transparent outside cream.
Buttons
Hover and focus each one: the filled variants widen the arrow gap, the stroke variants grow and fill, and the text link widens its gap with no surface to grow.
Color mode
Yellow
The same components in every mode: nine semantic tokens are remapped, nothing else changes.
Card on yellow
Cards are always light. The 1px stroke is painted in every mode and resolves to transparent outside cream.
Buttons
Hover and focus each one: the filled variants widen the arrow gap, the stroke variants grow and fill, and the text link widens its gap with no surface to grow.
Carousel primitive
Native scroll-snap: paging buttons on desktop, dashes on mobile. Swipe on touch, arrow keys on the focusable track, and the buttons themselves; nothing auto-advances.
Form controls
One global layer, two sources of markup: a template renders these fields directly, and the Marketo block reaches the same rules by classing Forms 2's output. Half and full spans are a per-field choice against the form's two columns, never a width.
The drawn form
States
On every band
The form is drawn on cream only. The box keeps its own white fill and charcoal ink in every mode, so a value can never turn cream and vanish; the label, the supporting line and the checkbox row sit on the band and take its ink. Disabled is a translucent overlay, which is why it greys with the band instead of pinning one composite — and why on the dark band it goes nearly black under charcoal ink. That, and the error red on charcoal, is question 11.17.
Undrawn band
Fields on sand
Undrawn band
Fields on dark
Undrawn band
Fields on yellow-light
Undrawn band