Style Guide highlights

  • Typography
  • Accessibility
  • Logos
  • Color

Logos

DearlyCare’s logo word mark is a combination of Roboto Regular for “Dearly” and Arial Rounded MT Bold for “Care”. Although both fonts are sans serif, each typeface has a unique history and use.

Roboto is a neo-grotesque sans-serif typeface family developed by Google as the system font for its mobile operating system in 2011. It is a versatile font with many forms from condensed narrow to black italic. Its legibility on screen is part of its very modern design history.

Arial Rounded MT, does not have other attributes, as it is a “rounded edge” variation of Arial, a san serif font humanist font used by Microsoft in the late 20th Century. Since “Humanist” is a reference to letterforms designed by handwriting scribes, Arial Rounded MT is well connected to the human experience. Its rounded edges convey ideas like “comfort, feminine, beautiful, sweet, friendly and approachable”.

These fonts are a perfect combination for a caregiver medication management logo.

Colors

All colors evaluated for accessibility and color contrast WCAG compliance on AccessibilityChecker.org page. (see also CTA and other design guide pages for actual contrast background/text ratio).

*can be used for either text on white background or as background color for white text.

Typography

DearlyCare’s most common font is Roboto.
Attributes are used in specific settings:

  • Condensed for labels, banner and card titles.
  • Semibold for screen titles
  • Bold for text links and CTAs.

DearlyCare is designed as mobile first. Most font sizes are shared between mobile and desktop except for page title size.

Body Text is has variable leading depending on the screen. 16px over 26px is the minimum.

For an explanation of the minimal use of Arial Rounded MT, see the logo page.

Current DearlyCare Roboto typeface attributes used in design are listed on the right.

Accessibility

Dearly Care is designed for older adults who need quick access to essential information, prioritizing accessibility.

DearlyCare brand colors were evaluated for color contrast WCAG compliance available on AccessibilityChecker.org page. They can be used for either text on white background or as background color for white text.