---
generator: clinical-terminal-brand-kit
company: "WebMD Health Services"
domain: "webmdhealthservices.com"
colors:
  primary: "#3456FF"
  onPrimary: "#FFFFFF"
  dark: "#000000"
  accent: "#3557FF"
  highlight: "#00157C"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#000000"
  accent: "#3456FF"
fonts:
  heading: "Lato"
  body: "Lato"
radius:
  card: "0px"
  button: "20px"
---

# Design System — WebMD Health Services

> Read from WebMD Health Services's public website (webmdhealthservices.com) by Clinical Terminal. Not reviewed by WebMD Health Services.
> Use it as inspiration: borrow the ideas, not WebMD Health Services's name, logo or identity.

## Ground
- **Light ground** (#FFFFFF), from WebMD Health Services's site background #FFFFFF. Pages and panels sit on it.
- Main text: #000000 (21:1 on the ground).
- Secondary text is #000000 at 88% / 76% / 60%; hairlines and plate borders #000000 at 16%.

## Color
- **Accent on the ground: #3456FF** (5.36:1). Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #3456FF** for filled shapes (buttons, chips, bars), with #FFFFFF text on it (5.36:1).
- Secondary accent #3557FF: charts and a second data series only.
- Highlight #00157C (from WebMD Health Services's logo gradient): sparing emphasis, never body text.
- Quote every hex exactly as written above.

## Type
- Headlines: **Lato**. Body: **Lato**. Both on Google Fonts.

## Shape
- Cards and panels: 0px corners. Buttons and chips: 20px.

## Voice
- Tone: professional. Energy: low. Written for businesses.
- Headlines are short and concrete.

## Tokens from the site's stylesheets

### Other named colors

- `--wfp-accent`: `#71717A`
- `--wfp-text-color`: `#FFFFFF`
- `--wfp-btn-artwork-scrim`: `#000000`
- `--tec-color-text-primary`: `#141827`
- `--tec-color-text-primary-light`: `#141827`
- `--tec-color-text-secondary`: `#5D5D5D`
- `--tec-color-text-disabled`: `#D5D5D5`
- `--tec-color-icon-primary`: `#5D5D5D`
- `--tec-color-icon-primary-alt`: `#757575`
- `--tec-color-icon-secondary`: `#BABABA`
- `--tec-color-icon-active`: `#141827`
- `--tec-color-icon-disabled`: `#D5D5D5`
- `--tec-color-icon-focus`: `#334AFF`
- `--tec-color-icon-error`: `#DA394D`
- `--tec-color-event-icon`: `#141827`
- `--tec-color-event-icon-hover`: `#334AFF`
- `--tec-color-accent-primary`: `#334AFF`
- `--tec-color-accent-primary-hover`: `#334AFF`
- `--tec-color-accent-primary-active`: `#334AFF`
- `--tec-color-accent-primary-background`: `#334AFF`
- `--tec-color-accent-secondary`: `#141827`
- `--tec-color-accent-secondary-hover`: `#141827`
- `--tec-color-accent-secondary-active`: `#141827`
- `--tec-color-accent-secondary-background`: `#141827`
- `--tec-color-link-accent-hover`: `#334AFF`
- `--tec-color-border-default`: `#D5D5D5`
- `--tec-color-border-secondary`: `#E4E4E4`
- `--tec-color-border-tertiary`: `#7D7D7D`
- `--tec-color-border-hover`: `#5D5D5D`
- `--tec-color-border-active`: `#141827`
- `--tec-color-background`: `#FFFFFF`
- `--tec-color-background-events`: `#000000`
- `--tec-color-background-transparent`: `#FFFFFF`
- `--tec-color-background-secondary`: `#F7F6F6`
- `--tec-color-background-messages`: `#141827`
- `--tec-color-background-secondary-hover`: `#F0EEEE`
- `--tec-color-background-error`: `#DA394D`
- `--tec-color-background-primary-multiday`: `#334AFF`
- `--tec-color-background-primary-multiday-hover`: `#334AFF`
- `--tec-color-background-secondary-multiday`: `#141827`
- `--tec-color-background-secondary-multiday-hover`: `#141827`
- `--tec-color-accent-primary-week-event`: `#334AFF`
- `--tec-color-accent-primary-week-event-hover`: `#334AFF`
- `--tec-color-accent-primary-week-event-featured`: `#334AFF`
- `--tec-color-accent-primary-week-event-featured-hover`: `#334AFF`
- `--e-global-color-primary`: `#3557FF`
- `--e-global-color-secondary`: `#54595F`
- `--e-global-color-text`: `#000000`
- `--e-global-color-accent`: `#61CE70`
- `--e-global-color-1a70d748`: `#F8F8F8`
- `--e-global-color-5101c842`: `#FFBF3F`
- `--e-global-color-571efea2`: `#FF6900`
- `--e-global-color-1844bcd2`: `#3EB1C8`
- `--e-global-color-3cf3298b`: `#AE2573`
- `--e-global-color-6881ca4a`: `#84BD00`
- `--e-global-color-38cad253`: `#3557FF`
- `--e-global-color-280d8d13`: `#DCDCDC`
- `--e-global-color-a1ed69c`: `#FFFFFF`
- `--e-global-color-d7afcf9`: `#00157C`
- `--survey-accent-green`: `#5C8F30`
- `--survey-accent-gold`: `#FFBF3F`
- `--survey-accent-magenta`: `#AE2573`
- `--survey-accent-blue`: `#0078BF`

### Typefaces

- lato-fallback
- lato-fallback-light
- Lato — on Google Fonts

### Type scale (most-used sizes)

`1.5rem` · `1.25rem` · `1.125rem` · `1rem` · `.9375rem` · `15px` · `.875rem` · `.8125rem` · `13px` · `12px` · `.75rem` · `11px`

### Letter-spacing

`.06em` (6) · `1px` (3) · `.05em` (2) · `2em` (1)

### Corner radii (most-used)

`1.125rem` · `9999px` · `4px` · `50%` · `1.25rem` · `.75rem` · `4rem` · `10px` · `8px` · `6px`

### Shadows

- `3px 4px 12px rgba(0,0,0,.15)`
- `inset 0 0 0 1px #1e1e1e`
- `0 2px 5px rgba(0,0,0,.2)`
- `0 1px 4px rgba(0,0,0,.08)`
- `0 1px 2px rgba(0,0,0,.04)`
- `inset 0 2px 5px -2px rgba(0,0,0,.2)`

### Gradients

- `radial-gradient(at 10% 90%,hsla(0,0%,100%,1) 0px,transparent 50%)`
- `radial-gradient(at 90% 10%,hsla(0,0%,100%,1) 0px,transparent 50%)`
- `linear-gradient(90deg,#00157c 0%,#3557ff 100%)`
- `linear-gradient(0deg,#00157c 0%,#3557ff 100%)`
- `radial-gradient(at 90% 90%,hsla(230,100%,92%,1) 0px,transparent 50%)`
- `radial-gradient(at 10% 10%,hsla(230,100%,92%,1) 0px,transparent 50%)`

### Breakpoints

360px · 480px · 599px · 600px · 767px · 768px · 781px · 782px · 960px · 1023px · 1024px · 1240px · 1241px · 1365px · 1439px