Primary colors used across ZoomCare 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.
#1ebee7
#76d2ee
#a0dff4
#2e424a
#8f8e8e
#97a1a6
#8dba40
#b0cf7e
#c7dda4
100%
70%
50%
Grayscale colors are used for outlined button styles, divider lines, backgrounds and disabled states.
#5f5d5d
#dbdbdb
#f2f2f2
#ffffff
Color: Brand
Color: Navy
Color: White
Color: Gray Dark
Color: Gray
The ZoomCare brand uses the Gotham font for all font styles.
Gotham - 500; font-size: 2.875em; line-height: 125%;
Gotham - 500; font-size: 2.25em; line-height: 125%;
Gotham - 500; font-size: 1.625em; line-height: 125%;
Gotham - 500; font-size: 1.25em; line-height: 125%;
Gotham - 500; font-size: 1em; line-height: 125%;
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%;
In place of a button, a primary link with an icon may be used. Icon links should never be used in groups of more than two. If two or more links are needed, used a secondary link style or group with a primary button style.
Secondary links are to be used within paragraphs or as a group of links.
Default
Hover
All spacing between elements should follow an 8px grid. The smallest spacing unit is 8px, and largest is 96px.
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
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
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
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
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
Divider lines are primarily used to separate sections of content or between rows in a list.
On white or light backgrounds, the divider line should be Gray, #dbdbdb
On navy or dark backgrounds, the divider line should be a 20% opacity of white,
rgba(255, 255, 255, 0.2)
Inputs allow users to enter and edit text within forms.
Placeholder text for fields are optional. Should be used if specific formatting or information is required.
All field types use the below styles for status: disabled, focused, valid, and invalid
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.
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.
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.
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.
This table style follows the same designs as the standard table for spacing and layout, but there is divider line between rows in a group.
If more than one group (separated by a heading), dividers should be used to separate the two groups.
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.
