Colors

Back to Top

Primary

$primary

#0D68A1

rgba(13,104,161,1)

$primary-dark

#132F50

rgba(18,46,81,1)

$primary-light

#DCE4EF

rgba(220,228,239,1)

$primary-lighter

#E2F3F8

rgba(226,243,248,1)

$primary-lightest

#F3F5F7

rgba(243,245,247,1)

Secondary

$secondary

#328443

rgba(51,133,67,1)

$secondary-dark

#256632

rgba(42,101,52,1)

Tertiary

$tertiary

#F8C54F

rgba(248,197,80,1)

$tertiary-dark

#E6B131

rgba(230,177,49,1)

Supporting Colors

$pure-black

#000000

rgba(0,0,0,1)

$pure-white

#FFFFFF

rgba(255,255,255,1)

$red-dark

#C31300

rgba(195,19,0,1)

$red

#EB1700

rgba(255,8,0,1)

$red-lightest

#FFF1F1

rgba(255,241,241,1)

Greys

$grey-darkest

#555555

rgba(85,85,85,1)

$grey-darker

#767676

rgba(118,118,118,1)

$grey-dark

#BBBBBB

rgba(187,187,187,1)

$grey

#CCCCCC

rgba(204,204,204,1)

$grey-light

#DDDDDD

rgba(221,221,221,1)

$grey-lighter

#E6E6E6

rgba(230,230,230,1)

Typography

Back to Top

Fonts

Source Sans Pro | Regular 400 | Semi-Bold 600 | Bold 700

ABCDEFGHIJKLMNOPQRSTUVWXWY
1234567890

Merriweather | Regular 400 | Bold 700

ABCDEFGHIJKLMNOPQRSTUVWXWY
1234567890

Styles

h1 Heading

h2 Heading

h3 Heading

h4 Patient Name

h4 Patient Info Section Headings

h4 Modal Title

h5 Applet Heading

This is paragraph text. Cras ac massa magna. Maecenas mollis consequat lectus. Nam ultrices, metus et gravida blandit, lectus elit pellentesque elit, eu sodales augue massa ac sapien. Donec eu lectus purus. Sed sapien felis, condimentum sit amet sagittis quis, viverra et nisi. Nunc tincidunt mauris volutpat ligula vulputate, in consectetur neque viverra. Maecenas in ante orci. Praesent sit amet neque et leo aliquam fringilla. Curabitur ut tincidunt nisl, vitae aliquet enim. Nam dignissim a purus a consectetur. Sed dapibus lectus ante, sit amet mollis ipsum tristique sit amet.

Buttons

Back to Top

Button Options

Button Sizes

Button with Icon

Buttons in Dialog Footer

Badges

Back to Top

109

Notifications 42

Labels

Back to Top
L*

H

Panel

Form Elements

Back to Top
Text Input
Drop Down Options
Drop Down List Multi-Select
Check Boxes and Radio Buttons
Textarea

Tables

Back to Top
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Name Last Name Username
1 Mark Otto @mdo
Mark Otto @TwBootstrap
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Icons

Back to Top

Action Icons (Universal)

  • Settings
  • Help
  • Maximize Frame
  • Minimize Frame
  • Add
  • Refresh
  • Filter
  • Edit
  • Close/Cancel/Dismiss Form
  • Remove
  • User
  • Comment
  • More Options
  • Save
  • Delete

Action Icons (Unique)

  • Add to Stacked Graphs
  • Tag for Concept-Invoked Workspace
  • Quick Look
  • Default Workspace
  • Set to Default Workspace
  • Workspace Editor
  • Alerts/Notifications
  • Workspace Manager
  • Break Patient Context
  • Non-local Site
  • External Link
  • Information Wiki
  • Details View
  • Patient Selection
  • Discontinue
  • Quick Orders
  • Order Sets
  • Lab Order
  • Bulk Edit User

Form Symbols

  • Date
  • Time
  • Encounter Location
  • Search
  • Table Expand
  • Table Collapse
  • Dropdown Expand
  • Dropdown Collapse
  • Drill Down

Alert/Status Symbols

  • Connection Stable | Successful
  • Warning
  • Error
  • Connection Error
  • Flagged