Style Guide
Typography
| Style/Tag | Font Name | Desktop Size | Mobile Size | Use Cases |
|---|---|---|---|---|
H1 |
Recia - Semibold |
64 | 40 | |
H2 |
Recia - Semibold | 48 | 30 | |
H3 |
Recia - Semibold | 40 | 30 | |
H4 |
Recia - Semibold | 32 | 24 | |
H5 |
Recia - Semibold | 24 | 24 | |
H6 |
Recia - Semibold | 22 | 22 | |
|
Paragraph Large |
Helveica Neue - Regular | 20 | 18 | |
|
Paragraph Medium |
Helvetica Neue - Medium | 16 | 15 | |
|
Paragraph Small |
Helvetica Neue - Regular | 14 | 13 | |
|
Stat Copy |
Helvetica Neue - Medium | 16 | 15 | |
|
Stat Heading
|
Recia - Bold | 64 | 40 | |
|
Eyebrow Label
|
Helvetica Neue - Bold | 16 | 13 | |
|
Quote Attribution
|
Recia - Regular | 18 | 18 | |
|
Quote Heading
|
Recia Medium | 40 | 30 | |
| Fine Print | Recia Regular | 12 | 12 |
Buttons & Links
| Button Style | Active State | Hover State | Font Color |
|---|---|---|---|
| #003A70 | #33618D | #FFFFFF | |
| #FFFFFF | #F2F4F5 | #003A70 | |
| #A4DBE5 | #D2EDF2 | #003A70 | |
| #FF810A | #FFC084 | #003A70 | |
| #6DCD9F | #BBE8D2 | #003A70 | |
| #FFFFFF | N/A (transparent) | #003A70, Flexible | |
| N/A (transparent) | #FFFFFF | Flexible, #003A70 | |
| Inline Link | #003A70 | #33618D | N/A |
COLOR
Usage
Accessibility
For all users, including those with visual disabilities, it’s imperative that they’re able to easily discern content on a page. Color and contrast are the two most critical components to consider when providing accessibility at the highest level. Using Web Content Accessibility Guidelines (WCAG) 2, the full color palette for [BRAND] has been tested to determine which color pairings are most suitable for all users. The chart on the right should be should be used when selecting color combinations that pass all accessibility requirements for both print and digital applications.
BACKGROUND COLORS
Variable Colors
primary txt:
primary txt
primary bg:
secondary txt:
secondary txt
secondary bg:
tertiary txt:
tertiary txt
tertiary bg:
quaternary txt:
quaternary txt
quaternary bg:
dark txt:
dark txt
light bg:
white txt:
white txt
gray bg:
light txt:
light txt
dark bg:
alt txt:
alt txt
alt bg:
altone txt:
altone txt
altone bg:
alttwo txt:
alttwo txt
alttwo bg:
altthree txt:
altthree txt
altthree bg:
black txt:
black txt
white bg:
white txt:
white txt
black bg:
palette-001 txt:
palette-001 txt
palette-001 bg:
palette-002 txt:
palette-002 txt
palette-002 bg:
palette-003 txt:
palette-003 txt
palette-003 bg:
palette-004 txt:
palette-004 txt
palette-004 bg:
palette-005 txt:
palette-005 txt
palette-005 bg:
palette-006 txt:
palette-006 txt
palette-006 bg:
palette-007 txt:
palette-007 txt
palette-007 bg:
palette-008 txt:
palette-008 txt
palette-008 bg:
palette-009 txt:
palette-009 txt
palette-009 bg:
palette-010 txt:
palette-010 txt
palette-010 bg:
palette-011 txt:
palette-011 txt
palette-011 bg:
palette-012 txt:
palette-012 txt
palette-012 bg:
palette-013 txt:
palette-013 txt
palette-013 bg:
palette-014 txt:
palette-014 txt
palette-014 bg:
palette-015 txt:
palette-015 txt
palette-015 bg:
palette-016 txt:
palette-016 txt
palette-016 bg:
palette-017 txt:
palette-017 txt
palette-017 bg:
palette-018 txt:
palette-018 txt
palette-018 bg:
palette-019 txt:
palette-019 txt
palette-019 bg:
palette-020 txt:
palette-020 txt
palette-020 bg:
palette-021 txt:
palette-021 txt
palette-021 bg:
palette-022 txt:
palette-022 txt
palette-022 bg:
palette-023 txt:
palette-023 txt
palette-023 bg:
palette-024 txt:
palette-024 txt
palette-024 bg:
palette-025 txt:
palette-025 txt
palette-025 bg:
palette-026 txt:
palette-026 txt
palette-026 bg:
palette-027 txt:
palette-027 txt
palette-027 bg:
palette-028 txt:
palette-028 txt
palette-028 bg:
palette-029 txt:
palette-029 txt
palette-029 bg:
palette-030 txt:
palette-030 txt
palette-030 bg:
palette-031 txt:
palette-031 txt
palette-031 bg:
palette-032 txt:
palette-032 txt
palette-032 bg:
palette-033 txt:
palette-033 txt
palette-033 bg:
palette-034 txt:
palette-034 txt
palette-034 bg:
palette-035 txt:
palette-035 txt
palette-035 bg:
palette-036 txt:
palette-036 txt
palette-036 bg:
palette-037 txt:
palette-037 txt
palette-037 bg:
palette-038 txt:
palette-038 txt
palette-038 bg:
palette-039 txt:
palette-039 txt
palette-039 bg:
palette-040 txt:
palette-040 txt
palette-040 bg:
palette-041 txt:
palette-041 txt
palette-041 bg:
palette-042 txt:
palette-042 txt
palette-042 bg:
palette-043 txt:
palette-043 txt
palette-043 bg:
palette-044 txt:
palette-044 txt
palette-044 bg:
palette-045 txt:
palette-045 txt
palette-045 bg:
palette-046 txt:
palette-046 txt
palette-046 bg:
palette-047 txt:
palette-047 txt
palette-047 bg:
palette-048 txt:
palette-048 txt
palette-048 bg:
palette-049 txt:
palette-049 txt
palette-049 bg:
palette-050 txt:
palette-050 txt
palette-050 bg:
palette-051 txt:
palette-051 txt
palette-051 bg:
palette-052 txt:
palette-052 txt
palette-052 bg:
palette-053 txt:
palette-053 txt
palette-053 bg:
palette-054 txt:
palette-054 txt
palette-054 bg:
palette-055 txt:
palette-055 txt
palette-055 bg:
palette-056 txt:
palette-056 txt
palette-056 bg:
palette-057 txt:
palette-057 txt
palette-057 bg:
palette-058 txt:
palette-058 txt
palette-058 bg:
palette-059 txt:
palette-059 txt
palette-059 bg:
palette-060 txt:
palette-060 txt
palette-060 bg:
palette-061 txt:
palette-061 txt
palette-061 bg:
palette-062 txt:
palette-062 txt
palette-062 bg:
palette-063 txt:
palette-063 txt
palette-063 bg:
palette-064 txt:
palette-064 txt
palette-064 bg:
palette-065 txt:
palette-065 txt
palette-065 bg:
palette-066 txt:
palette-066 txt
palette-066 bg:
palette-067 txt:
palette-067 txt
palette-067 bg:
palette-068 txt:
palette-068 txt
palette-068 bg:
palette-069 txt:
palette-069 txt
palette-069 bg:
palette-070 txt:
palette-070 txt
palette-070 bg:
palette-071 txt:
palette-071 txt
palette-071 bg:
palette-072 txt:
palette-072 txt
palette-072 bg:
palette-073 txt:
palette-073 txt
palette-073 bg:
palette-074 txt:
palette-074 txt
palette-074 bg:
palette-075 txt:
palette-075 txt
palette-075 bg:
palette-076 txt:
palette-076 txt
palette-076 bg:
palette-077 txt:
palette-077 txt
palette-077 bg:
palette-078 txt:
palette-078 txt
palette-078 bg:
palette-079 txt:
palette-079 txt
palette-079 bg:
palette-080 txt:
palette-080 txt
palette-080 bg:
palette-081 txt:
palette-081 txt
palette-081 bg:
palette-082 txt:
palette-082 txt
palette-082 bg:
palette-083 txt:
palette-083 txt
palette-083 bg:
palette-084 txt:
palette-084 txt
palette-084 bg:
palette-085 txt:
palette-085 txt
palette-085 bg:
palette-086 txt:
palette-086 txt
palette-086 bg:
palette-087 txt:
palette-087 txt
palette-087 bg:
palette-088 txt:
palette-088 txt
palette-088 bg:
palette-089 txt:
palette-089 txt
palette-089 bg:
palette-090 txt:
palette-090 txt
palette-090 bg:
palette-091 txt:
palette-091 txt
palette-091 bg:
palette-092 txt:
palette-092 txt
palette-092 bg:
palette-093 txt:
palette-093 txt
palette-093 bg:
palette-094 txt:
palette-094 txt
palette-094 bg:
palette-095 txt:
palette-095 txt
palette-095 bg:
palette-096 txt:
palette-096 txt
palette-096 bg:
palette-097 txt:
palette-097 txt
palette-097 bg:
palette-098 txt:
palette-098 txt
palette-098 bg:
palette-099 txt:
palette-099 txt
palette-099 bg:
Icon Library
| Home | User | Tag | Eye | ||||
| Calendar | Envelope | Apply | Female | ||||
| Book | Clipboard | Hospital | Heart | ||||
| Info Seminar | Live Chat | Location Pin | Microscope | ||||
| More Info | Ambulance | Brain | Pulse | ||||
| Coin | Cash | Credit Card | Stethoscope | ||||
| Syringe | User 2 | User 3 | Users | ||||
| Chevron Left | Chevron Right | Chevron Down | Chevron Up | ||||
| Application | Bookmark finger | Brain 2 | Click Screen | ||||
| DNA Helix | Grad Book | Hands | Health Marker | ||||
| Health MSG | Health News | Health Phone | Health Ribbon | ||||
| Health Thinking | Throat | heart Shield | Lungs | ||||
| Med Clipboard | Med Home | Medical Call | Nurse | ||||
| Online Agreement | Online MSG | Personal Interview | Pill Bottle | ||||
| Prescription Note | Resume Check | Resume | Stethoscope 2 | ||||
| Virtual Grad | Virtual Speaker | Virtual Health | Watch Webinar | ||||
| Office |