01.

Colors

Primary Colors

Primary colors used across ZOOM+Care products. The brand color is used for primary buttons and text links. The secondary color is used for headings, paragraphs, and secondary buttons. Use the accent color sparingly for assets such as icons.

Brand

#1ebee7
#76d2ee
#a0dff4

Navy

#2e424a
#8f8e8e
#97a1a6

Accent

#8dba40
#b0cf7e
#c7dda4

Opacity (%)

100%

70%

50%

Grayscale

Grayscale colors are used for outlined button styles, divider lines, backgrounds and disabled states.

gray dark

#5f5d5d

gray

#dbdbdb

gray light

#f2f2f2

white

#ffffff

02.

Typography

The ZOOM+Care brand uses the Gotham font for all font styles.

Fonts
Gotham Bold - 700
Gotham Medium - 500
Gotham Book - 400
Font Colors
Aa
Brand

Color: Brand

Aa
Base

Color: Navy

Aa
Reversed

Color: White

Aa
Light

Color: Gray Dark

Aa
Disabled

Color: Gray

Styles

Heading 1

Gotham - 500; font-size: 2.875em; line-height: 125%;

Heading 2

Gotham - 500; font-size: 2.25em; line-height: 125%;

Heading 3

Gotham - 500; font-size: 1.625em; line-height: 125%;

Heading 4

Gotham - 500; font-size: 1.25em; line-height: 125%;

Heading 5

Gotham - 500; font-size: 1em; line-height: 125%;

Heading 6

Gotham - 700; font-size: 0.75em; line-height: 125%; letter-spacing: 0.5;

large paragraph text

Gotham - 400; font-size: 1.125em; line-height: 145%;

paragraph text

Gotham - 400; font-size: 1em; line-height: 145%;

small paragraph text

Gotham - 400; font-size: 0.95em; line-height: 145%;

03.

Buttons

Primary Buttons

Primary button styles for all ZOOM+Care products. The brand and dark button can be used interchangeably, but never together. If more than one button is needed in a section, use the small button style or a secondary style with a primary.

Style

Default

Hover

Disabled

Small

Secondary Buttons

Secondary button styles for all ZOOM+Care products. Multiple secondary buttons can be used together, or combined with one primary style.

For dark backgrounds, use the Outlined-Light button style. The Light button style can be used on both light or dark backgrounds.

Style

Default

Hover

Disabled

Small

Icon Buttons

Icon buttons should use the same styles for spacing and text as regular buttons. For disabled and hover states, refer to the regular button styles.

Spacing for the icon is 24px from the left and 8px between the icon and text. All icons are from the Font Awesome library.

Icons are not used with the small button style.

Clinic Icon

fas fa-clinic-medical

Style

Primary

Dark

Light

Outlined

05.

Spacing

8px grid

All spacing between elements should follow an 8px grid. The smallest spacing unit is 8px, and largest is 96px.

8px - Small (SM)

Smallest unit of spacing between elements for padding or margins if more spacing outside of text line-height is needed.

Examples include: 
• padding for text and small headings
• top + bottom padding for small buttons

16px - Base

Default spacing between most elements such as a heading or label and paragraph. Unless an element requires tighter spacing, use 16px as a base.

Examples include:
• UI icons
• left + right spacing on small buttons
• top + bottom padding on buttons
• spacing between buttons and paragraphs

24px - Medium (MD)

Limit this spacing to paragraphs of content or elements that are related, but need more space to visually separate.

Examples include:
• spacing between paragraphs within a section that are related, should be separated by a heading.
• spacing between an image and description

48px - Large (LG)

Limit this spacing to the end of sections to separate different content on a page.

Examples include:
• Spacing at the end of a card
• Spacing at the beginning or end of a section

96px - x-large (XL)

This spacing should be used sparingly to allow room between the first or last elements on a page.

Examples include:
• between the last section on a page and the footer
• top + bottom padding of a hero section
• dimensions of avatars or empty state illustrations

Dividers

Divider lines are primarily used to separate sections of content or between rows in a list.

Light Backgrounds

On white or light backgrounds, the divider line should be Gray, #dbdbdb

Dark Backgrounds

On navy or dark backgrounds, the divider line should be a 20% opacity of white,
rgba(255, 255, 255, 0.2)

06.

Forms

Input

Inputs allow users to enter and edit text within forms.

Input States

Placeholder text for fields are optional. Should be used if specific formatting or information is required.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Input Status

All field types use the below styles for status: disabled, focused, valid, and invalid

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Error message for invalid input
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Error message for invalid input

Input Formatting

Password fields should use a secure text field. Phone number fields should show the format accepted and auto-format the numbers as they're typed.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Checkboxes

All checkbox fields have a bottom margin of 16px and left padding of 24px. There is an 8px margin between the checkbox and the label.

The checkbox is 18px with a 2px border radius. To increase visibility, the unfilled checkbox has a 1px gray border. The disabled state should use gray as the border and background color and change the text to dark gray.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Select Dropdowns

Dropdowns should show the "select.." description when no option has been selected. After a selection has been made, the label is then shown in the dropdown menu.

Dropdown Title

Select an option...

Dropdown Title

Select an option...

Dropdown Label

Selected Dropdown Label

Disabled Dropdown Label

Button Groups

Button groups are used within selection or drop down menus. Only one option can be selected at a time. They must include a minimum of two selections, otherwise a single button or link style should be used.

Below are styles for both light and dark backgrounds.

07.

Tables

Standard Table

This table style is used with plain text. Can have one or two columns within each row. Each row is separated by a divider.

Footnotes are added in an additional row at the bottom with no bottom border divider line.

Column Label*
Column Label
Column Label
(label note)
Column Label
Column Label
(label note)
Column Label
(label note)
*Footnote for labels added to the bottom of the table with no divider underneath.

Table with Icons

This table style uses the same spacing and layout as the standard table.

For this style, the table layout changes on smaller screens, and the row label is bolded instead of the column headers. See example below.

Column Header
Column
Column
Column
Column
Row Label
gray X icon
Row Label
gray X icon
Row Label
Column
Column
Column
Column
Row Label
Column
Column
Column
Column