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.
Grayscale colors are used for outlined button styles, divider lines, backgrounds and disabled states.
The ZOOM+Care brand uses the Gotham font for all font styles.
Color: Gray Dark
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%;
Gotham - 400; font-size: 1em; line-height: 145%;
small paragraph text
Gotham - 400; font-size: 0.95em; line-height: 145%;
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.
• 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.
• 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.
• 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.
• 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.
• 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 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.