Clinical Terminal
AboutSign in

Doximity design system

doximity.com

Read from Doximity's public website by Clinical Terminal. Not reviewed by Doximity. Copy it and paste it into Claude as inspiration.

Corrections or removal: agent@clinicalterminal.com

Doximity homepage

Palette

Color ramps

Dox Color Blue
100
#DAEEFB
400
#1670AD
500
#00538A
900
#003D6E
Dox Color Green
100
#5ADC70
500
#26A53B
900
#218231
Dox Color Yellow
100
#FFF9E6
200
#FFEFB8
500
#F4D058
700
#E4B04A
900
#9E7C00
Dox Color Orange
100
#FFA17E
500
#FC632A
900
#E0511B
Dox Color Red
100
#FD8D8D
500
#FF3B30
900
#C80600
Dox Color Gray
100
#FBFAF8
150
#F8F7F5
200
#F6F5F3
250
#F1F0EE
300
#EFEEEC
350
#D5D4D2
400
#BBBBBB
450
#AAAAAA
500
#999999
550
#7F7F7F
600
#666666
650
#757575
700
#585858
750
#5C5C5C
800
#333333
850
#2A2A2A
Dox Shadow Color Ambient Elevation
1
#999999
2
#999999
3
#999999
Dox Dark Bg Surface
400
#3C4758
500
#333E4F
600
#273243
700
#1F2937
750
#1A2230
900
#000000

Other named colors

Type

Headings
Source Serif 4

Doximity at a glance

Body
Inter

Clear, readable paragraphs for clinicians, buyers and patients alike.

Shape & depth

Cards and panels: 5px corners · buttons and chips: 999px.

Corner radii

Shadows

Gradients

Breakpoints: 360px · 480px · 640px · 667px · 680px · 768px · 780px · 860px · 900px · 960px · 1080px · 1100px

Voice

Tone: professional. Energy: low. Written for patients and healthcare professionals.

DESIGN.md

The file Copy design system puts on your clipboard. Open the raw file.

---
generator: clinical-terminal-brand-kit
company: "Doximity"
domain: "doximity.com"
colors:
  primary: "#00538A"
  onPrimary: "#FFFFFF"
  dark: "#0B1B2B"
  background: "#F7F9FC"
ground:
  mode: light
  hex: "#F7F9FC"
  ink: "#0B1B2B"
  accent: "#00538A"
fonts:
  heading: "Source Serif 4"
  body: "Inter"
radius:
  card: "5px"
  button: "999px"
---

# Design System — Doximity

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

## Ground
- **Light ground** (#F7F9FC), from Doximity's site background #F7F9FC. Pages and panels sit on it.
- Main text: #0B1B2B (16.51:1 on the ground).
- Secondary text is #0B1B2B at 88% / 76% / 60%; hairlines and plate borders #0B1B2B at 16%.

## Color
- **Accent on the ground: #00538A** (7.65:1). Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #00538A** for filled shapes (buttons, chips, bars), with #FFFFFF text on it (8.06:1).
- Quote every hex exactly as written above.

## Type
- Headlines: **Source Serif 4**. Body: **Inter**. Both on Google Fonts.

## Shape
- Cards and panels: 5px corners. Buttons and chips: 999px.

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

## Tokens from the site's stylesheets

### Color ramps

- **Dox Color Blue** (`--dox-color-blue-N`): 100 `#DAEEFB` · 400 `#1670AD` · 500 `#00538A` · 900 `#003D6E`
- **Dox Color Green** (`--dox-color-green-N`): 100 `#5ADC70` · 500 `#26A53B` · 900 `#218231`
- **Dox Color Yellow** (`--dox-color-yellow-N`): 100 `#FFF9E6` · 200 `#FFEFB8` · 500 `#F4D058` · 700 `#E4B04A` · 900 `#9E7C00`
- **Dox Color Orange** (`--dox-color-orange-N`): 100 `#FFA17E` · 500 `#FC632A` · 900 `#E0511B`
- **Dox Color Red** (`--dox-color-red-N`): 100 `#FD8D8D` · 500 `#FF3B30` · 900 `#C80600`
- **Dox Color Gray** (`--dox-color-gray-N`): 100 `#FBFAF8` · 150 `#F8F7F5` · 200 `#F6F5F3` · 250 `#F1F0EE` · 300 `#EFEEEC` · 350 `#D5D4D2` · 400 `#BBBBBB` · 450 `#AAAAAA` · 500 `#999999` · 550 `#7F7F7F` · 600 `#666666` · 650 `#757575` · 700 `#585858` · 750 `#5C5C5C` · 800 `#333333` · 850 `#2A2A2A` · 900 `#121212`
- **Dox Shadow Color Ambient Elevation** (`--dox-shadow-color-ambient-elevation-N`): 1 `#999999` · 2 `#999999` · 3 `#999999`
- **Dox Dark Bg Surface** (`--dox-dark-bg-surface-N`): 400 `#3C4758` · 500 `#333E4F` · 600 `#273243` · 700 `#1F2937` · 750 `#1A2230` · 900 `#000000`

### Other named colors

- `--dox-color-black`: `#000000`
- `--dox-color-white`: `#FEFDFC`
- `--dox-color-london-fog`: `#F6F7FB`
- `--dox-color-manatee`: `#E7E9F0`
- `--dox-color-twitter`: `#1DA1F2`
- `--dox-color-facebook`: `#3B5998`
- `--dox-color-linkedin`: `#0077B5`
- `--dox-color-youtube`: `#FF0000`
- `--dox-color-instagram`: `#E4405F`
- `--dox-color-pinterest`: `#BD081C`
- `--dox-color-github`: `#333333`
- `--dox-color-google`: `#DD4B39`
- `--dox-color-whatsapp`: `#25D366`
- `--dox-color-vimeo`: `#1AB7EA`
- `--dox-color-tumblr`: `#35465C`
- `--dox-color-snapchat`: `#FFFC00`
- `--dox-color-skype`: `#00AFF0`
- `--dox-color-slack`: `#2EB57D`
- `--dox-color-reddit`: `#FF4500`
- `--dox-color-quora`: `#B92B27`
- `--dox-color-medium`: `#02B875`
- `--dox-color-dataviz-emerald`: `#93D888`
- `--dox-color-dataviz-tangerine`: `#F98970`
- `--dox-color-dataviz-skyblue`: `#81D3F9`
- `--dox-color-dataviz-lemon`: `#FDD854`
- `--dox-color-dataviz-steel-blue`: `#5F86D3`
- `--dox-color-dataviz-pink`: `#F95D9F`
- `--dox-color-dataviz-slate`: `#958D8D`
- `--dox-color-dataviz-cyan`: `#37D2E5`
- `--dox-color-dataviz-orchid`: `#B861D0`
- `--dox-color-dataviz-cadet-blue`: `#76A8B9`
- `--dox-color-dataviz-silver`: `#AFC0C7`
- `--dox-color-dataviz-coral`: `#ED727F`
- `--dox-color-dataviz-purple`: `#8570D4`
- `--dox-color-dataviz-teal`: `#30BBB6`
- `--dox-color-dataviz-goldenrod`: `#FBAD3D`
- `--dox-color-dataviz-olive`: `#789470`
- `--dox-color-dataviz-lime`: `#C9E658`
- `--dox-color-dataviz-turquoise`: `#3BE5C0`
- `--dox-color-dataviz-emerald-light`: `#CEEECD`
- `--dox-color-dataviz-tangerine-light`: `#FCCCC5`
- `--dox-color-dataviz-skyblue-light`: `#B2E4FB`
- `--dox-color-dataviz-lemon-light`: `#FFEDBA`
- `--dox-color-dataviz-steel-blue-light`: `#B6CAEB`
- `--dox-color-dataviz-pink-light`: `#FCBAD5`
- `--dox-color-dataviz-slate-light`: `#CFCECF`
- `--dox-color-dataviz-cyan-light`: `#92ECF3`
- `--dox-color-dataviz-orchid-light`: `#E0BDEA`
- `--dox-color-dataviz-cadet-blue-light`: `#C1D9E1`
- `--dox-color-dataviz-silver-light`: `#E9EEEF`
- `--dox-color-dataviz-coral-light`: `#FCCED8`
- `--dox-color-dataviz-purple-light`: `#C8C2EB`
- `--dox-color-dataviz-teal-light`: `#95E1DF`
- `--dox-color-dataviz-goldenrod-light`: `#FDCF89`
- `--dox-color-dataviz-olive-light`: `#B0C2AF`
- `--dox-color-dataviz-lime-light`: `#DDF1A1`
- `--dox-color-dataviz-turquoise-light`: `#71F0D7`
- `--dox-mobile-native-input-bg`: `#E9E9EA`
- `--dox-mobile-native-color-selected-ios`: `#34C759`
- `--dox-mobile-native-color-selected-android`: `#1976D2`
- `--dox-dark-bg`: `#111827`
- `--dox-dark-bg-hover`: `#354155`
- `--dox-dark-bg-pressed`: `#3A465A`
- `--dox-dark-bg-selected`: `#1E3350`
- `--dox-dark-bg-disabled`: `#343C4A`
- `--dox-dark-bg-card`: `#222D3C`
- `--dox-dark-bg-tooltip`: `#1C2535`
- `--dox-dark-bg-code`: `#0C121D`
- `--dox-dark-bg-code-highlight`: `#637BB8`
- `--dox-dark-bg-code-selection`: `#637BB8`
- `--dox-dark-bg-overlay`: `#000000`
- `--dox-dark-bg-overlay-heavy`: `#000000`
- `--dox-dark-bg-positive-subtle`: `#32D74B`
- `--dox-dark-bg-warning-subtle`: `#FFD60A`
- `--dox-dark-bg-caution-subtle`: `#FF9F0A`
- `--dox-dark-bg-negative-subtle`: `#FF453A`
- `--dox-dark-bg-info-subtle`: `#0A84FF`
- `--dox-dark-bg-default-subtle`: `#B4C8FF`
- `--dox-dark-bg-primary-subtle`: `#105F92`
- `--dox-dark-bg-neutral-subtle`: `#6E6E73`
- `--dox-dark-bg-diff-addition`: `#2EA043`
- `--dox-dark-bg-diff-addition-word`: `#2EA043`
- `--dox-dark-bg-diff-deletion`: `#F85149`
- `--dox-dark-bg-diff-deletion-word`: `#F85149`
- `--dox-dark-bg-scrollbar-track`: `#161E2B`
- `--dox-dark-bg-scrollbar-thumb`: `#4A5467`
- `--dox-dark-bg-scrollbar-thumb-hover`: `#5A6579`
- `--dox-dark-color-text`: `#F2F2F7`
- `--dox-dark-color-text-inverse`: `#121212`
- `--dox-dark-color-muted`: `#48484A`
- `--dox-dark-color-link`: `#45A1DE`
- `--dox-dark-color-link-hover`: `#66B5E8`
- `--dox-dark-color-link-visited`: `#8B7EC8`
- `--dox-dark-color-border-tooltip`: `#334155`
- `--dox-dark-color-border-positive`: `#32D74B`
- `--dox-dark-color-border-warning`: `#FFD60A`
- `--dox-dark-color-border-caution`: `#FF9F0A`
- `--dox-dark-color-border-negative`: `#FF453A`
- `--dox-dark-color-border-info`: `#0A84FF`
- `--dox-dark-color-focus`: `#70B3FF`
- `--dox-dark-color-primary`: `#105F92`
- `--dox-dark-color-primary-hover`: `#0E507C`
- `--dox-dark-color-primary-pressed`: `#0C446A`
- `--dox-dark-color-primary-selected`: `#136EAA`
- `--dox-dark-color-neutral`: `#48484D`
- `--dox-dark-color-neutral-hover`: `#3B3B3F`
- `--dox-dark-color-neutral-pressed`: `#323235`
- `--dox-dark-color-neutral-selected`: `#525258`
- `--dox-dark-color-neutral-alt`: `#5E7C95`
- `--dox-dark-color-neutral-alt-hover`: `#4E6C85`
- `--dox-dark-color-neutral-alt-pressed`: `#3E5C75`
- `--dox-dark-color-neutral-alt-selected`: `#6E8CA5`
- `--dox-dark-color-positive`: `#26A53B`
- `--dox-dark-color-positive-hover`: `#218231`
- `--dox-dark-color-positive-pressed`: `#1B6D29`
- `--dox-dark-color-positive-selected`: `#2DB044`
- `--dox-dark-color-warning`: `#FFD60A`
- `--dox-dark-color-warning-hover`: `#E6C000`
- `--dox-dark-color-warning-pressed`: `#CCAA00`
- `--dox-dark-color-warning-selected`: `#FFE033`
- `--dox-dark-color-caution`: `#FF9F0A`
- `--dox-dark-color-caution-hover`: `#E68F09`
- `--dox-dark-color-caution-pressed`: `#CC7F08`
- `--dox-dark-color-caution-selected`: `#FFB03D`
- `--dox-dark-color-negative`: `#FF453A`
- `--dox-dark-color-negative-hover`: `#E63329`
- `--dox-dark-color-negative-pressed`: `#CC2920`
- `--dox-dark-color-negative-selected`: `#FF5E55`
- `--dox-dark-bg-chat-outgoing`: `#005CE6`
- `--dox-dark-bg-chat-incoming`: `#38383A`
- `--dox-bg-page`: `#F9F8F6`
- `--dox-bg-item-selection`: `#DAEEFB`
- `--dox-bg-overlay`: `#000000`
- `--dox-bg-overlay-heavy`: `#000000`
- `--dox-bg-chat-outgoing`: `#E7F0FF`
- `--dox-bg-chat-outgoing-redacted`: `#D8E7FA`
- `--dox-color-text`: `#111827`
- `--dox-bg-code-highlight`: `#FFEB3B`
- `--dox-bg-code-selection`: `#2196F3`
- `--dox-layout-main-bg`: `#F6F7FB`
- `--text`: `#333333`
- `--string`: `#032F62`
- `--number`: `#5F86D3`
- `--title`: `#6F42C1`
- `--attr`: `#005CC5`
- `--keyword`: `#D73A49`
- `--function`: `#E552EA`
- `--params`: `#508BE5`
- `--comment`: `#6A737D`
- `--name`: `#22863A`
- `--class`: `#005CC5`
- `--text-dark`: `#E9EEEF`
- `--brackets-dark`: `#FBFBFE`
- `--name-dark`: `#93D888`
- `--dox-color-gray-dark`: `#333333`
- `--dox-color-gray-darkish`: `#585858`
- `--dox-color-gray`: `#666666`
- `--dox-color-gray-medium`: `#999999`
- `--dox-color-gray-light`: `#BBBBBB`
- `--dox-color-gray-lighter`: `#EEEEEE`
- `--dox-color-gray-lightest`: `#F9F9F9`
- `--dox-color-gray-ghost`: `#F6F7FB`
- `--dox-color-red`: `#EE032B`
- `--dox-color-red-dark`: `#C80600`
- `--dox-color-red-bright`: `#FF0008`
- `--dox-color-red-light`: `#FF4451`
- `--dox-color-orange`: `#FC632A`
- `--dox-color-orange-bright`: `#FF8D00`
- `--dox-color-yellow`: `#FAC917`
- `--dox-color-yellow-bright`: `#FCDD7B`
- `--dox-color-green`: `#26A53B`
- `--dox-color-green-dark`: `#1A7C2A`
- `--dox-color-green-bright`: `#7EB930`
- `--dox-color-green-light`: `#4CD964`
- `--dox-color-blue`: `#00538A`
- `--dox-color-blue-bright`: `#2E98FB`
- `--dox-button-disabled-background`: `#E1E1E1`
- `--dox-button-disabled-text`: `#C0C0C0`
- `--dox-bg-transparent`: `#000000`
- `--dox-bg-tab`: `#BBBBBB`
- `--dox-bg-gradient-default-fallback`: `#4B99CB`
- `--dox-bg-gradient-red-fallback`: `#BB3D53`
- `--dox-bg-gradient-orange-fallback`: `#EE495C`
- `--dox-bg-gradient-green-fallback`: `#45D093`
- `--dox-bg-gradient-blue-fallback`: `#00538A`
- `--dox-bg-gradient-black-fallback`: `#161616`
- `--dox-bg-gradient-gray-fallback`: `#999999`
- `--dox-bg-gradient-gray-light-fallback`: `#DDDDDD`
- `--dox-bg-gradient-gray-lighter`: `#EEEEEE`
- `--dox-bg-gradient-gray-lightest`: `#F9F9F9`
- `--dox-color-link`: `#00538A`
- `--dox-color-hover`: `#000000`
- `--dox-header-link-hover`: `#F5F5F5`
- `--dox-text`: `#000000`
- `--dox-tooltop-background-fallback`: `#222222`
- `--dox-tooltop-background`: `#000000`
- `--dox-color-social-twitter`: `#5AA9E0`
- `--dox-color-social-facebook`: `#4267B2`
- `--dox-color-social-google`: `#D93B2B`
- `--dox-color-social-linkedin`: `#0076B9`
- `--dox-color-social-youtube`: `#CD201F`
- `--dox-color-wcag-blue`: `#00538A`
- `--dox-color-wcag-gray`: `#666666`
- `--dox-input-checkbox-checked`: `#00538A`
- `--dox-input-background-color`: `#F6F6F6`
- `--dox-input-background-color-hover`: `#EEEEEE`
- `--dox-custom-follow-border-color`: `#FFFFFF`
- `--dox-custom-marketing-sections-border-color`: `#DDDDDD`
- `--dox-custom-mobile-app-download-hero-star-wrap-color`: `#FF9500`
- `--dox-custom-slider-border-color`: `#DDDDDD`
- `--dox-shadow-color-highlight-elevation-2`: `#FFFFFF`
- `--dox-shadow-color-highlight-elevation-3`: `#FFFFFF`

### Typefaces

- Inter (`--dox-font-family-base`) — on Google Fonts
- Roboto (`--dox-font-family-android`) — on Google Fonts
- Source Serif 4 (`--dox-font-family-serif`) — on Google Fonts
- left"]>span (`--dox-divider-content-align`)
- true"]>span:before (`--dox-divider-double-line`)
- · (`--dox-input-typeahead-actions-separator`)

### Type scale (most-used sizes)

`34px` · `32px` · `22px` · `19px` · `18px` · `17px` · `16px` · `15px` · `14px` · `13px` · `12px` · `11px`

### Letter-spacing

`-0.02em` (1) · `-0.015em` (1)

### Corner radii (most-used)

`5px` · `50%` · `10px` · `3px` · `20px` · `7px` · `15px` · `4px` · `24px` · `12px`

### Shadows

- `0 0 0 1px #fefdfc,0 0 0 3px #00538a`
- `inset 0 0 0 1px #000`
- `inset 0 0 0 1px #333`
- `inset 0 0 0 1px #666`
- `none!important`
- `0 0 0 1px white, 0 0 0 3px #00538A`

### Gradients

- `linear-gradient(to bottom right, #4B99CB, #91E1B9)`
- `linear-gradient(to bottom right, #BB3D53, #FF2F39)`
- `linear-gradient(to bottom right, #EE495C, #F09259)`
- `linear-gradient(to bottom right, #45D093, #B0CB80)`
- `linear-gradient(to bottom right, #00538A, #003457)`
- `linear-gradient(to bottom right, #161616, #444)`

### Breakpoints

360px · 480px · 640px · 667px · 680px · 768px · 780px · 860px · 900px · 960px · 1080px · 1100px · 1180px · 1260px · 1366px · 1440px · 1520px · 1680px