Visual style
A typography suite and color palette designed to meet usability and accessibility standards, while setting a consistent visual voice of credibility, warmth, and ease-of-use across the FreshDirect website.
Typography
Roboto
Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.
This is the regular family, which can be used alongside the Roboto Condensed family and the Roboto Slab family.
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
Text Accessibility
WCAG (Web Content Accessibility Guidelines) ensure that content is accessible by everyone, regardless of disability or user device. To meet these standards, text and interactive elements should have a color contrast ratio of at least 4.5:1. This ensures that viewers who cannot see the full color spectrum are able to read the text.
Colors
A flexible, yet distinctly vibrant palette designed to communicate warmth and trustworthiness while meeting 508 color contrast requirements.
Palette
This palette is designed to support a range of distinct visual styles that continue to feel connected. These colors — combined with clear hierarchy, good information design, and ample white space — should leave users feeling welcomed and in good hands.
This is a simple, minimalist color palette. Shades of green dominate, providing a neutral backdrop on which brighter shades, clean type treatment, and bright white content areas "pop" on the page.
Primary colors
These are accent colors to provide additional lightness and style to pages looking for a more modern flair. These colors should be used to highlight important features on a page, such as buttons, or for visual style elements, such as illustrations. They should be used sparingly and never draw the eye to more than one piece of information at a time.
#4FA157
primary-green
Dark
#458D4E
primary-green-dark
#098A1E
primary-green-darker
#096D19
primary-green-darkest
Light
#4FA157
primary-green-light
#5FB067
primary-green-lighter
#EDF5EE
primary-green-fade
#F68139
primary-orange
Dark
#E77630
primary-orange-dark
#D04A0A
primary-orange-darker
#AF3D08
primary-orange-darkest
Light
#F68139
primary-orange-light
#FC8E46
primary-orange-lighter
#FDF2EC
primary-orange-fade
Secondary colors
Used less often, usually for very specific interactions or sections of the web store.
#9E5EA6
secondary-purple
#855086
secondary-purple-dark
#7C4884
secondary-purple-darker
#AF7BB6
secondary-purple-light
#F7F2F8
secondary-purple-fade
#B93D3F
red
#F8EBEB
red-fade