Theme Page
Naming site theme elements
Site color and element class names need to support web-specific usability concerns like color contrast ratios. To support this need, the "primary" CSS theme color is not linked to a brand guide's "primary" color. Sometimes brand guides name colors based on the organization's Logo, print needs, or other palettes. The terms primary, secondary, and tertiary should match how commonly a color or element is used on the site. Some examples:
Colors
- primary color = most common color on site
- secondary color = second most common color on site
- tertiary color = third most common color on site
Buttons
- primary button = most common button on site
- secondary button = second most common button on site
- tertiary button = third most common button on site
Performance Considerations
For performance reasons, it is important to keep the site theme as minimal as possible. The CSS for sitewide theme elements is inlined into every page on the site. Each additional item slows down the performance of every page just a little bit.
This needs to be balanced against the need to have consistent rendering of every element on the site. Here are some guidelines to achieve the ideal balance.
- Components should re-use primary, secondary, and tertiary theme elements as much as possible.
- Colors or buttons beyond these use cases are often component-specific. If that is the case, define/configure them in the component(s) that use them.
- If a site needs additional sitewide elements (examples: speciality theme colors or a fourth sitewide button type), those theme items can be include in the extended site theme file.
- Color variables are defined using rgb in order to support rgba-dependent utility classes in the Tailwind CSS framework (ex .opacity-75).
Primary
--brand-color-primary-dark: 0, 92, 95;
.bg-brand-primary-dark
--brand-color-primary: 0, 132, 135;
.bg-brand-primary
--brand-color-primary-light: 26, 166, 183;
.bg-brand-primary-light
Secondary
--brand-color-secondary-dark: 0, 31, 95;
.bg-brand-secondary-dark
--brand-color-secondary: 0, 31, 95;
.bg-brand-secondary
--brand-color-secondary-light: 0, 31, 95;
.bg-brand-secondary-light
Tertiary
--brand-color-tertiary-dark: 97, 162, 37;
.bg-brand-tertiary-dark
--brand-color-tertiary: 97, 162, 37;
.bg-brand-tertiary
--brand-color-tertiary-light: 97, 162, 37;
.bg-brand-tertiary-light
Quaternary
--brand-color-qyarternary-dark: 100, 170, 250;
.bg-brand-quaternary-dark
--brand-color-quaternary: 100, 170, 250;
.bg-brand-quaternary
--brand-color-quaternary-light: 100, 170, 250;
.bg-brand-quaternary-light
Sitewide Element & Status Colors
--brand-color-link: 0, 132, 135;
.bg-brand-link
--brand-color-success: 0, 132, 135;
.bg-brand-success
--brand-color-warning: 255, 0, 0;
.bg-brand-warning
--brand-color-header: 54, 54, 54;
.bg-brand-color-header
--brand-color-rating-stars: 0, 132, 135;
.bg-brand-color-rating-stars
Grayscale Pallet
0
--brand-color-neutral-0: 0, 0, 0;
.bg-brand-neutral-0
10
--brand-color-neutral-10: 54, 54, 54;
.bg-brand-neutral-10
20
--brand-color-neutral-20: 72, 70, 76;
.bg-brand-neutral-20
30
--brand-color-neutral-30: 83, 83, 83;
.bg-brand-neutral-30
40
--brand-color-neutral-40: 178, 178, 178;
.bg-brand-neutral-40
50
--brand-color-neutral-50: 201, 201, 201;
.bg-brand-neutral-50
60
--brand-color-neutral-60: 203, 203, 203;
.bg-brand-neutral-60
70
--brand-color-neutral-70: 229, 231, 235;
.bg-brand-neutral-70
80
--brand-color-neutral-80: 236, 236, 236;
.bg-brand-neutral-80
90
--brand-color-neutral-90: 243, 243, 243;
.bg-brand-neutral-90
95
--brand-color-neutral-95: 252, 252, 252;
.bg-brand-neutral-95
99
--brand-color-neutral-99: 255, 251, 254;
.bg-brand-neutral-99
100
--brand-color-neutral-100: 255, 255, 255;
.bg-brand-neutral-100
Typography
Display Font (h1s and titles)
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius ea, sunt in debitis illum perspiciatis, optio quas, ipsam rem repellat ratione atque adipisci doloremque commodi et accusantium architecto porro vero! Neque, itaque illum assumenda repellat, nobis perferendis vel explicabo, vero molestiae dicta mollitia id perspiciatis. Fugiat itaque ex modi cum iure, quis illum necessitatibus alias molestias, dicta nobis labore error.
.font-brand-display
Body Font
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius ea, sunt in debitis illum perspiciatis, optio quas, ipsam rem repellat ratione atque adipisci doloremque commodi et accusantium architecto porro vero! Neque, itaque illum assumenda repellat, nobis perferendis vel explicabo, vero molestiae dicta mollitia id perspiciatis. Fugiat itaque ex modi cum iure, quis illum necessitatibus alias molestias, dicta nobis labore error.
.font-brand-body
Typography Utility Classes
Base Sizes:
.text-10
.text-20
.text-30
.text-40
.text-50
.text-body
.text-input
Weight Modifiers:
.text-normal
.text-medium
.text-bold
Examples:
Page Header
.text-10
Care Tile Clinician Name
.text-20.text-medium
Accordion Title
.text-30
Search Card Title
.text-30.text-medium.text-brand-primary
Clinician Specialty
.text-30.text-medium.text-brand-neutral-20
CARE TILE SUBHEAD
.text-40.text-medium
Address Text
.text-50
Body text
.text-body
Phone Number555-555-5555
.text-body.text-bold.text-brand-primary
Distance Text
.text-body.uppercase.lg:text-semibold
.select.text-medium.block
.searchInput.inputText.flex.truncate.pl-5.pr-10
Links
Form Elements
Buttons
Global Button CSS Properties
--brand-button-border-radius: 0
--brand-button-border-width: 1px
Button Base Class
.btn
Button Primary
.btn.btn-primary
Button Secondary
.btn.btn-secondary
Button Tertiary
.btn.btn-tertiary
Button Group
.btn-group
Scroll to Target
Inputs
Global Input CSS Properties
--brand-input-border-radius: 0
--brand-input-border-width: 1px
.searchInput.inputText.flex.truncate.pl-5.pr-10
Selects
Global Select CSS Properties
--brand-select-border-radius: 0
--brand-select-border-width: 1px
.select
Checkboxes
Global Checkbox CSS Properties
--brand-checkbox-border-radius: 4px
--brand-checkbox-border-width: 1px
Search Facet Modal Check Box
Images
SVGs
SVGs with wi class
.wi
Color derived from font-color of parent
.text-brand-primary>.wi
Size derived from font-size of parent
.text-10>.wi
SVGs without wi class
Size passed to the component
.h-10.w-10
Color derived from the font-color of parent
.text-brand-primary>.h-10.w-10
Size derived from the width of parent
.w-10>svg
Core SVGs
SvgBuilding
SvgChat
SvgCheckCircle
SvgCheckShield
SvgCheck
SvgChevron
SvgChevronThick
SvgClock
SvgClose
SvgDot
SvgFiveStar
SvgIdCard
SvgInfo
SvgMap
SvgMapMarker
SvgMenu
SvgPhone
SvgPin
SvgProfile
SvgReviewMenu
SvgVideoChat
SvgDirections
SvgEdit
SvgModalClose
SvgSearchPaginationArrow
Site SVGs
Add site specific svgs here
Target
.scrollToTarget