Skip to main content
Doximity | Marketing Style Guide

Logos

Doximity

Other

Hospital Solutions

Talent Finder

Op-Med

Foundation

Colors

Primary Colors

$blue
#2C90ED
rgb(44,144,237)
$red
#FF3B30
rgb(238,3,42)
$orange
#FC632A
rgb(252,99,42)
$yellow
#FAC917
rgb(250,201,23)
$green
#26A53B
rgb(38,165,59)
$green-dark
#1A7C2A
rgb(26,124,42)

Neutrals

$black
#000000
rgb(0,0,0)
$gray-dark
#333333
rgb(51,51,51)
$text-color
#444444
rgb(68,68,68)
$gray-darkish
#585858
rgb(88,88,88)
$gray-text
#666666
rgb(102,102,102)
$gray
#999999
rgb(153,153,153)
$gray-ish
#BBBBBB
rgb(187,187,187)
$gray-light
#EEEEEE
rgb(238,238,238)
$whiteish
#F8F8F8
rgb(248,248,248)
$white
#FFFFFF
rgb(255,255,255)

Data Visualization Colors

For use only with charts, graphs, visualizations, etc.

Emerald
#93d888
rgb(147,216,136)
Tangerine
#f98970
rgb(249,137,112)
Skyblue
#81d3f9
rgb(129,211,249)
Lemon
#fdd854
rgb(253,216,84)
Steel Blue
#5f86d3
rgb(95,134,211)
Pink
#f95d9f
rgb(249,93,159)
Slate
#958d8d
rgb(149,141,141)
Cyan
#37d2e5
rgb(55,210,229)
Orchid
#b861d0
rgb(184,97,208)
Cadet Blue
#76a8b9
rgb(118,168,185)
Silver
#afc0c7
rgb(175,192,199)
Coral
#ed727f
rgb(237,114,127)
Purple
#8570d4
rgb(133,112,212)
Teal
#30bbb6
rgb(48,187,182)
Goldenrod
#fbad3d
rgb(251,173,61)
Olive
#789470
rgb(120,148,112)
Lime
#c9e658
rgb(201,230,88)
Turqoise
#3be5c0
rgb(59,229,192)
Emerald 2
#ceeecd
rgb(206,238,205)
Tangerine 2
#fcccc5
rgb(252,204,197)
Skyblue 2
#b2e4fb
rgb(178,228,251)
Lemon 2
#ffedba
rgb(255,237,186)
Steel Blue 2
#b6caeb
rgb(182,202,235)
Pink 2
#fcbad5
rgb(252,186,213)
Slate 2
#cfcecf
rgb(207,206,207)
Cyan 2
#92ecf3
rgb(146,236,243)
Orchid 2
#e0bdea
rgb(224,189,234)
Cadet Blue 2
#c1d9e1
rgb(193,217,225)
Silver 2
#e9eeef
rgb(233,238,239)
Coral 2
#fcced8
rgb(252,206,216)
Purple 2
#c8c2eb
rgb(200,194,235)
Teal 2
#95e1df
rgb(149,225,223)
Goldenrod 2
#fdcf89
rgb(253,207,137)
Olive 2
#b0c2af
rgb(176,194,175)
Lime 2
#ddf1a1
rgb(221,241,161)
Turqoise 2
#71f0d7
rgb(113,240,215)

Typography

Heading 1
HK Grotesk / 44px / weight: 600 / #000 / margin: 17px 0 / line-height: 1.3

The quick brown fox jumps over the lazy dog.

Heading 2
HK Grotesk / 34px / weight: 600 / #000 / margin: 17px 0 / line-height: 1.2

The quick brown fox jumps over the lazy dog.

Heading 3
HK Grotesk / 24px / weight: 600 / #000 / margin: 17px 0 / line-height: 1.5

The quick brown fox jumps over the lazy dog.

Heading 4
HK Grotesk / 20px / weight: 600 / #000 / margin: 17px 0 / line-height: 1.6

The quick brown fox jumps over the lazy dog.

Heading 5
HK Grotesk / 18px / weight: 600 / #000 / margin: 17px 0 / line-height: 1.7
The quick brown fox jumps over the lazy dog.
Heading 6
HK Grotesk / 17px / weight: 600 / #000 / margin: 17px 0 / line-height: 1.8
The quick brown fox jumps over the lazy dog.
Body
HK Grotesk / 17px / weight: 400 / #000 / margin: 17px 0 / line-height: 1.5

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Interdum velit euismod in pellentesque massa placerat duis. Nibh sed pulvinar proin gravida.

Vitae congue mauris rhoncus aenean vel elit scelerisque mauris. Netus et malesuada fames ac turpis egestas sed tempus. Risus nullam eget felis eget. Luctus accumsan tortor posuere ac ut consequat semper. Porttitor rhoncus dolor purus non enim praesent elementum. Ornare arcu odio ut sem nulla. Sagittis eu volutpat odio facilisis mauris sit amet massa. Dictumst quisque sagittis purus sit amet volutpat.

Egestas quis ipsum suspendisse ultrices. Faucibus purus in massa tempor nec feugiat nisl pretium. Quisque id diam vel quam elementum pulvinar etiam.

Body, Secondary
HK Grotesk / 17px / weight: 400 / #666 / margin: 17px 0 / line-height: 1.5

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Interdum velit euismod in pellentesque massa placerat duis. Nibh sed pulvinar proin gravida.

Vitae congue mauris rhoncus aenean vel elit scelerisque mauris. Netus et malesuada fames ac turpis egestas sed tempus. Risus nullam eget felis eget. Luctus accumsan tortor posuere ac ut consequat semper. Porttitor rhoncus dolor purus non enim praesent elementum. Ornare arcu odio ut sem nulla. Sagittis eu volutpat odio facilisis mauris sit amet massa. Dictumst quisque sagittis purus sit amet volutpat.

Egestas quis ipsum suspendisse ultrices. Faucibus purus in massa tempor nec feugiat nisl pretium. Quisque id diam vel quam elementum pulvinar etiam.

Unordered Lists
HK Grotesk / 17px / weight: 400 / #000 / margin: 17px 0 / line-height: 1.5
  • The quick brown fox jumps over the lazy dog.
  • The quick brown fox jumps over the lazy dog.
  • The quick brown fox jumps over the lazy dog.
Ordered Lists
HK Grotesk / 17px / weight: 400 / #000 / margin: 17px 0 / line-height: 1.5
  1. The quick brown fox jumps over the lazy dog.
  2. The quick brown fox jumps over the lazy dog.
  3. The quick brown fox jumps over the lazy dog.

Type/Markup Tester

This is the current markup test page, it'll show you how the default styling is rendered. Some tag styles remain undefined.

Type/Markup Render Tester

Fonts

HK Grotesk

Load fonts with our CDN by applying this CSS (preferred):

@font-face { font-display: swap; font-family: 'HK Grotesk'; src: url('https://res.cloudinary.com/dcnbtqcvb/raw/upload/v1/fonts/hk-grotesk/HKGrotesk-Regular.woff2') format("woff2"); font-weight: 400; font-style: normal; } @font-face { font-display: swap; font-family: 'HK Grotesk'; src: url('https://res.cloudinary.com/dcnbtqcvb/raw/upload/v1/fonts/hk-grotesk/HKGrotesk-Italic.woff2') format("woff2"); font-weight: 400; font-style: italic; } @font-face { font-display: swap; font-family: 'HK Grotesk'; src: url('https://res.cloudinary.com/dcnbtqcvb/raw/upload/v1/fonts/hk-grotesk/HKGrotesk-Medium.woff2') format("woff2"); font-weight: 450; font-style: normal; } @font-face { font-display: swap; font-family: 'HK Grotesk'; src: url('https://res.cloudinary.com/dcnbtqcvb/raw/upload/v1/fonts/hk-grotesk/HKGrotesk-MediumItalic.woff2') format("woff2"); font-weight: 450; font-style: italic; } @font-face { font-display: swap; font-family: 'HK Grotesk'; src: url('https://res.cloudinary.com/dcnbtqcvb/raw/upload/v1/fonts/hk-grotesk/HKGrotesk-SemiBold.woff2') format("woff2"); font-weight: 500; font-style: normal; } @font-face { font-display: swap; font-family: 'HK Grotesk'; src: url('https://res.cloudinary.com/dcnbtqcvb/raw/upload/v1/fonts/hk-grotesk/HKGrotesk-SemiBoldItalic.woff2') format("woff2"); font-weight: 500; font-style: italic; } @font-face { font-display: swap; font-family: 'HK Grotesk'; src: url('https://res.cloudinary.com/dcnbtqcvb/raw/upload/v1/fonts/hk-grotesk/HKGrotesk-Bold.woff2') format("woff2"); font-weight: 600; font-style: normal; } @font-face { font-display: swap; font-family: 'HK Grotesk'; src: url('https://res.cloudinary.com/dcnbtqcvb/raw/upload/v1/fonts/hk-grotesk/HKGrotesk-BoldItalic.woff2') format("woff2"); font-weight: 600; font-style: italic; }

If you need to, you may download the fonts:

Buttons

Default

Colors

Sizes

Form Elements

Example Form


Select

label.newselect = select_tag(name, option_tags = nil, options = {})


Radio

Inline

Stacked in a list

/ default

input> name='name' type='radio'

/ active

input> name='name' type='radio' checked='true'

/ disabled

input> name='name' type='radio' disabled='true'

Checkbox

Inline

Stacked in a list

/ default

input name='name' type='checkbox'

/ active

input name='name' type='checkbox' checked='true'

/ disabled

input name='name' type='checkbox' disabled='true'

Range

input.full name='name' type='range'

Text Fields

Email

input.full type='email' placeholder='you@provider.com'

Search

input.full type='search' placeholder='Search'

Phone Number

input.full type='tel' placeholder='1-808-000-0000'

URL

input.full type='url' placeholder='url'

Text Area

textarea.full name='name' placeholder='textarea' rows='4' resize="none"

File Chooser

input.full type='file'

Month/Date/Year Selection

input.full name='name' type='date' placeholder='12-31-1999'

Time Selection

input.full name='name' type='time' placeholder='time'

Date Picker

input.full name='name' type='week' placeholder='week'

Month Picker

input.full name='name' type='month' placeholder='month'

Tables

DateTitle
May 1, 2021Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Egestas diam in arcu cursus euismod quis.
June 2, 2021Elementum sagittis vitae et leo duis ut diam quam. Pretium nibh ipsum consequat nisl vel. Semper auctor neque vitae tempus quam pellentesque nec nam.
July 3, 2021Sit amet porttitor eget dolor morbi non arcu risus. Sodales neque sodales ut etiam sit amet.
August 4, 2021Odio aenean sed adipiscing diam donec adipiscing. Ac turpis egestas maecenas pharetra convallis posuere morbi. Nec ultrices dui sapien eget.
September 5, 2021Mauris a diam maecenas sed enim ut sem. Lorem sed risus ultricies tristique nulla aliquet.

Pagination


= will_paginate(@foo)

// or

= paginate(@foo)

Loaders


.load.large



.load



.load.small


Illustrations

TBD...

Icons

icon-alert-alt
icon-alert
icon-arrow-action-left
icon-arrow-action-right
icon-arrow-down-outline
icon-arrow-down
icon-arrow-left-outline
icon-arrow-left
icon-arrow-right-outline
icon-arrow-right
icon-arrow-stem-down-circle
icon-arrow-stem-down
icon-arrow-stem-download
icon-arrow-stem-left-circle
icon-arrow-stem-left
icon-arrow-stem-right-circle
icon-arrow-stem-right
icon-arrow-stem-up-circle
icon-arrow-stem-up
icon-arrow-top-outline
icon-arrow-up-outline
icon-arrow-up
icon-arrow-updown
icon-badge-appstore
icon-badge-googleplay
icon-bar-graph
icon-bed
icon-bell-alt
icon-bell-right-alt
icon-bell-right
icon-bell
icon-book
icon-bookmark-alt
icon-bookmark-circle-alt
icon-bookmark-circle
icon-bookmark-outline
icon-bookmark
icon-bookmarks-menu
icon-books-vertical
icon-books
icon-box-inbox
icon-box-outbox
icon-box
icon-briefcase-medical
icon-briefcase
icon-bulb
icon-calendar-alt
icon-calendar
icon-camera
icon-cards
icon-caution-alt
icon-caution
icon-ce-outline
icon-ce-plus
icon-ce
icon-certificate
icon-chart-bar-arrow
icon-chat-ekg-alt
icon-chat-ekg-outline
icon-chat-ekg
icon-chat-lock
icon-chat-square-plus-alt
icon-chat-square-plus
icon-chat-square
icon-chat
icon-check-alt
icon-check-approved-alt
icon-check-approved
icon-check-filled
icon-check
icon-circle
icon-clipboard
icon-clock-rewind
icon-clock-simple
icon-clock
icon-cme-outline
icon-cme-plus
icon-cme-ribbon
icon-cme-square
icon-cme
icon-collections-menu
icon-compose
icon-cursor
icon-cv
icon-dialpad
icon-dna
icon-dollar
icon-dollars
icon-dots-horizontal
icon-dots-vertical
icon-draggable
icon-envelope-alt
icon-envelope-delivered
icon-envelope-lock
icon-envelope-minus
icon-envelope-open
icon-envelope-plus
icon-envelope
icon-excluded-page
icon-expand-light
icon-eye-alt
icon-eye
icon-fax-alt
icon-fax
icon-file-pdf
icon-file
icon-filter-alt
icon-filter
icon-fire
icon-gear-alt
icon-gear
icon-gears
icon-globe
icon-graduation-cap
icon-graph-ekg
icon-graph
icon-h
icon-handshake
icon-heart-alt
icon-heart-slash
icon-heart
icon-help
icon-home
icon-hospital
icon-house
icon-image
icon-info-alt
icon-info
icon-journal
icon-license
icon-like
icon-link
icon-list-alt
icon-list-phone-alt
icon-list-pin
icon-list-rank
icon-list
icon-location-arrow
icon-locations
icon-lock-alt
icon-lock-unlock
icon-lock
icon-logo-ambassador
icon-logo-amion-logomark
icon-logo-amion
icon-logo-d
icon-logo-doxconnect
icon-logo-doximity
icon-logo-fellow
icon-logo-residency-navigator-alt
icon-logo-upmc
icon-mail-gmail
icon-mail-hotmail
icon-mail-outlook
icon-mail-yahoo
icon-map-pin-alt
icon-map-pin
icon-map
icon-megaphone
icon-menu
icon-minus-alt
icon-minus
icon-multiple-pages
icon-network-outline
icon-network
icon-newspaper-find
icon-newspaper
icon-paperclip
icon-pen-write
icon-pencil
icon-people-alt
icon-people-two
icon-people-wave
icon-people
icon-person-alt
icon-person-chat
icon-person-check
icon-person-circle
icon-person-plus
icon-person-podium
icon-person-who
icon-person
icon-phone-alt
icon-phone
icon-photos
icon-physician
icon-pi
icon-pig
icon-pin
icon-platform-android
icon-platform-apple
icon-plus-alt
icon-plus
icon-podium
icon-pop-out
icon-poster
icon-printer
icon-radio-checked
icon-radio
icon-refer
icon-ribbon
icon-search-eye
icon-search-person
icon-search-reverse
icon-search
icon-secure-message
icon-share-alt
icon-share
icon-signature
icon-snake-cup
icon-snake-stick
icon-social-doximity
icon-social-email
icon-social-facebook-alt
icon-social-facebook
icon-social-google-alt
icon-social-google
icon-social-linkedin-alt
icon-social-linkedin
icon-social-pinterest
icon-social-reddit
icon-social-twitter-alt
icon-social-twitter
icon-social-youtube
icon-specialty-am
icon-specialty-an
icon-specialty-bg
icon-specialty-ca
icon-specialty-cm
icon-specialty-de
icon-specialty-em
icon-specialty-en
icon-specialty-fd
icon-specialty-fm
icon-specialty-ga
icon-specialty-gm
icon-specialty-he
icon-specialty-ho
icon-specialty-hp
icon-specialty-mb
icon-specialty-md
icon-specialty-mg
icon-specialty-mp
icon-specialty-ms
icon-specialty-nc
icon-specialty-ne
icon-specialty-ng
icon-specialty-nm
icon-specialty-nn
icon-specialty-np
icon-specialty-ns
icon-specialty-pa
icon-specialty-pd
icon-specialty-pe
icon-specialty-ph
icon-specialty-pl
icon-specialty-pm
icon-specialty-ps
icon-specialty-pu
icon-specialty-py
icon-specialty-ra
icon-specialty-rc
icon-specialty-rh
icon-specialty-rn
icon-specialty-rt
icon-specialty-rx
icon-specialty-sg
icon-specialty-sw
icon-specialty-th
icon-specialty-tm
icon-specialty-ts
icon-specialty-tt
icon-specialty-ty
icon-specialty-ur
icon-specialty-vs
icon-specialty-wim
icon-star-alt
icon-star-half
icon-star
icon-stethoscope
icon-target
icon-test-tube
icon-text-tool
icon-toolbox
icon-tractor
icon-trash-can
icon-trees
icon-undo
icon-upload
icon-video-cam-alt
icon-video-cam
icon-video
icon-wrench
icon-x-alt
icon-x-circle-alt
icon-x

Hero Images

TBD...

WCAG

For WCAG compliance, please ensure that all pages are accessible and are WCAG 2.1 A and AA compliant.

The following tools will help with spotting and fixing WCAG issues:

Browser Extension

Using the browser extension, you can check validations on-page.

  1. Download and install Siteimprove Accessibility Checker for Chrome
  2. Choose conformance level: A/AA
  3. Uncheck "Review"
  4. Check every page and make changes to conform

Doximity WCAG Styles

Default

Focused