Logos
Doximity
Other
Hospital Solutions
Talent Finder
Op-Med
Foundation
Colors
Neutrals
Data Visualization Colors
For use only with charts, graphs, visualizations, etc.
Typography
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.
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.
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.
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.
- 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.
- 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.
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.
Fonts
Inter
Google Fonts CDN:
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');If you need to, you may download the fonts:
Links
Form Elements
Example Form
Select
label.newselect = select_tag(name, option_tags = nil, options = {})
Radio
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
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
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
| Date | Title |
|---|---|
| May 1, 2021 | Lorem 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, 2021 | Elementum 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, 2021 | Sit amet porttitor eget dolor morbi non arcu risus. Sodales neque sodales ut etiam sit amet. |
| August 4, 2021 | Odio aenean sed adipiscing diam donec adipiscing. Ac turpis egestas maecenas pharetra convallis posuere morbi. Nec ultrices dui sapien eget. |
| September 5, 2021 | Mauris 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
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.
- Download and install Siteimprove Accessibility Checker for Chrome
- Choose conformance level: A/AA
- Uncheck "Review"
- Check every page and make changes to conform