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

Default Hover Active/Pressed Disabled

Button Sizes

Small

Regular

Large

Form Elements

Input Fields

Standard Text Input

Required Field*

Email Input

Password Input

Input States

Default State

Focus State

Error State This is an error message

Disabled State

Special Input Types

Masked Input (Phone)

Masked Input (SSN)

Password with Strength Indicator

Strong

Selects & Checkboxes

Select Dropdown

Checkbox

Checkbox label

Radio Buttons

Radio option 1

Radio option 2

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:

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.

Sent on: April 22, 2025 at 3:45 PM

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

Left Column

Content for the left column goes here.

Right Column

Content for the right column goes here.

Button

Four-Column Layout

Column 1

Content for column one.

Column 2

Content for column two.

Column 3

Content for column three.

Column 4

Content for column four.

Logos & Icons

Primary Logo

Color Logo

Payment Method Icons

Visa

Mastercard

Discover

American Express

Interface Icons

Add Bank Account

Add Card

Security