Typography

Font Families

Exo: Primary Heading Font

Roboto: Body Text Font

Heading Styles

H1: Main Headings (36px)

H2: Section Headings (28px)

H3: Content Headings (22px)

H4: Sub-content Headings (18px)

Body Text Styles

Body Text (16px): This is the standard paragraph text used throughout the website. It should maintain a comfortable reading size and line height for readability.

Small Text (14px): Used for secondary information, captions, and supporting details that don't require as much emphasis.

Label Text: Used for section labels and badges like "patient portal" above headings.

Description Text: Slightly larger body text used for introductory paragraphs and important information.

Color Palette

Primary Colors

Dark Gray

#333333

Blue

#4099f5

White

#FFFFFF

Secondary Colors

Light Gray

#999999

Red

#d9534f

Alert Colors

Error/Danger

#d9534f

Warning

#f0ad4e

Info

#5bc0de

Success

#5cb85c

Buttons

Primary Buttons

Primary Button Submit Button

Secondary Buttons

Navigation Buttons

Action Buttons

Button States

Button Sizes

Form Elements

Input Fields

Input States

This is an error message

Special Input Types

Strong

Selects & Checkboxes

Components

Alerts & Notifications

This is an error alert notification.
This is a warning alert notification.
This is an information alert notification.
This is a success alert notification.

Cards & Content Blocks

Feature Heading:

Feature description paragraph with supporting text.

Another Feature:

More feature description content here.

Third Feature:

Final feature description paragraph.

Navigation Elements

Panels

Basic Panels

Standard Panel
This is a standard panel with primary styling. Use this for most content containers.
Warning Panel
This is a warning panel. Use for important notices and alerts.

Panel Heading Sizes

Small Heading
Panel with a smaller heading size.
Standard Heading
Panel with standard heading size.
Large Heading
Panel with larger heading size.

Panel Types

Primary Panel
Primary panel for general information.
Warning Panel
Warning panel for alerts.
Success Panel
Success panel for confirmations.
Info Panel
Info panel for helpful information.
Danger Panel
Danger panel for critical alerts.
Default Panel
Default panel style with minimal styling.

Panel with List Content

Please note:
  • Your email address is also used as your username
  • When you change your email address, please remember to use your new email address the next time you log in
Information
  • This panel contains a bulleted list of information
  • Lists are properly spaced and aligned within panels
  • The panel-content-list class ensures proper spacing

Panel with Footer

Payment Information

Main content of the panel goes here. This can include any type of content.

Message Details

Your message has been sent successfully to the recipient.

Panel with Icons in Heading

Security Settings
Panel content with action icons in the heading.
Notifications
Panel with multiple action icons in the heading.

Panel Implementation Notes

  • Panel structure follows a consistent pattern: container > heading > body (and optional footer)
  • Use appropriate panel types based on the content context (primary, info, warning, etc.)
  • Panel heading sizes can be adjusted using panel-heading, panel-heading-small, or panel-heading-large classes
  • Icons can be added to panel headings for additional visual information
  • The panel-content-list class is available for panels that contain lists

Layout Examples

Two-Column Layout

Four-Column Layout

Flexibility

Column 1

Content for column one.

Convenience

Column 2

Content for column two.

Visibility

Column 3

Content for column three.

Stress Reduction

Column 4

Content for column four.

Logos & Icons

Primary Logo

Color Logo

Payment Method Icons

Visa

Visa

Mastercard

Mastercard

Discover

Discover

American Express

American Express

Interface Icons

Add Bank Account

Add Bank Account

Add Card

Add Card

Padlock

Security

Check Mark

Success