[Design systems](/design-systems/) / Doximity # 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: ![Doximity homepage](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fthumbs%2F101497514.jpg?alt=media) ## Palette - Ground \#F7F9FC - Ink \#0B1B2B - Accent on the ground \#00538A - Primary \#00538A \--dox-color-blue-500 - On primary \#FFFFFF \--dox-custom-follow-border-color - Dark \#0B1B2B - Site background \#F7F9FC ## 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 - \--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 ## Type Headings Source Serif 4 Doximity at a glance Body Inter Clear, readable paragraphs for clinicians, buyers and patients alike. - 34pxDoximity - 32pxDoximity - 22pxDoximity - 19pxDoximity - 18pxDoximity - 17pxDoximity - 16pxDoximity - 15pxDoximity ## Shape & depth Cards and panels: 5px corners · buttons and chips: 999px. ### Corner radii - 5px used in 29 rules - 50% used in 18 rules - 10px used in 13 rules - 3px used in 12 rules - 20px used in 5 rules - 7px used in 4 rules - 15px used in 4 rules - 4px used in 3 rules - 24px used in 3 rules - 12px used in 3 rules ### Shadows - 0 0 0 1px #fefdfc,0 0 0 3px #00538a used in 10 rules - inset 0 0 0 1px #000 used in 5 rules - inset 0 0 0 1px #333 used in 5 rules - inset 0 0 0 1px #666 used in 5 rules - none!important used in 4 rules - 0 0 0 1px white, 0 0 0 3px #00538A used in 3 rules ### Gradients - linear-gradient(to bottom right, #4B99CB, #91E1B9) used in 2 rules - linear-gradient(to bottom right, #BB3D53, #FF2F39) used in 2 rules - linear-gradient(to bottom right, #EE495C, #F09259) used in 2 rules - linear-gradient(to bottom right, #45D093, #B0CB80) used in 2 rules - linear-gradient(to bottom right, #00538A, #003457) used in 2 rules - linear-gradient(to bottom right, #161616, #444) used in 2 rules 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](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fmd%2F101497514.md?alt=media). ``` --- 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 ```