Style Guide

Colors

Colors are designed to be clear and accessible. They come in different color themes. Each theme is constituted of grays, semantic colors (e.g., info, success, warning, danger), and accent colors.

Gray

The system uses 10 shades of gray. These grays are neutral (not tinted), which allow them to work alongside any brand color, and ensures that they don’t distract attention from the main focus on a task or workflow for color manipulation.

gray-900
#252525
gray-800
#363636
gray-700
#4D4D4F
gray-600
#7C7D7E
gray-500
#A6A7A8
gray-400
#C4C5C6
gray-300
#E6E7E8
gray-200
#F1F2F3
gray-100
#F5F6F7
gray-050
#FAFBFC

[Accent]

[Accent colors.]

accent-color-1
accent-color-2
accent-color-3
accent-color-4

Semantic colors

Semantic colors have an assigned meaning, and are used in the UI as a method of communicating with the user. Our design system uses color sparingly and intentionally, as a way of re-enforcing hierarchies and creating clear modes of communication with our users. Too much color can create a cognitive overload, affecting users’ ability to interact with our products efficiently.

primary
#C81F3E
secondary
#0D1D84
info
#0070BA
success
#44BA09
danger
#BA1413
warning
#BA7513
dark
#363636
light
#E6E7E8
muted
#7C7D7E
pseudo
#7FB7DC
white
#ffffff
black
#000000
sale
#D21F45

Typography

Typefaces

Typefaces are used to style text.

'Lato', sans-serif

Headings

Headings are used to create various levels of typographic hierarchies.

Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6

Lead

Primarily used as an introductory text in a content page or component.

Take your grocery to the next level

Body

Body is primarily used for components and for blocks of text.

You will find everything you need and more.

Paragraph

Paragraph

Small paragraph

Small paragraph

Extra small paragraph

Extra small paragraph

Price

Price is reserved for numbers and currency.

$9.99

Blockquote

You will find everything you need and more.

[PDP Product Name]

[Product Name]

[PDP Product Brand]

[Product Brand]

Iconography

We’ve put together a package of icons that are necessary for the platform. These icons are compiled in the font file. Each icon is designed on a 24px grid.

icon-arrow-down ("e900")
icon-arrow-right ("e901")
icon-calendar ("e902")
icon-address ("e951")
icon-caret ("e903")
icon-cart ("e904")
icon-cart-add ("e952")
icon-cart-check ("e953")
icon-cart-order ("e954")
icon-check ("e8fa")
icon-chevron-down ("e906")
icon-chevron-right ("e907")
icon-circle-add ("e908")
icon-circle-check ("e909")
icon-circle-close ("e90a")
icon-circle-info ("e90b")
icon-circle-minus ("e90c")
icon-clock ("e90d")
icon-credit-card ("e94a")
icon-departments ("e94c")
icon-direction ("e93e")
icon-duplicate ("e94e")
icon-edit ("e90e")
icon-email ("e90f")
icon-home-delivery ("e93c")
icon-export ("e910")
icon-favorite-empty ("e911")
icon-favorite-filled ("e912")
icon-filter ("e94f")
icon-import ("e913")
icon-list ("e914")
icon-location ("e915")
icon-lock ("e916")
icon-menu ("e917")
icon-message ("e918")
icon-minus ("e919")
icon-note ("e91a")
icon-pick-up ("e93d")
icon-plus ("e91b")
icon-password-hide ("e937")
icon-password-show ("e938")
icon-print ("e91c")
icon-remove ("e91d")
icon-scan ("e91e")
icon-search ("e91f")
icon-settings ("e940")
icon-share ("e920")
icon-sort ("e939")
icon-subcategories ("e93a")
icon-tag ("e93b")
icon-unlock ("e921")
icon-user ("e922")
icon-warning ("e923")
icon-zoom ("e924")
icon-facebook ("e991")
icon-instagram ("e992")
icon-linkedIn ("e993")
icon-medium ("e994")
icon-messenger ("e995")
icon-pinterest ("e996")
icon-twitter ("e997")
icon-yelp ("e998")
icon-youtube ("e999")

Buttons

Gray buttons

Gray buttons

Skins

Icon

Icon only

Disabled

Breadcrumb

The breadcrumb will show the different path elements in the current route.

Tables

Header cell Header cell Header cell
Body cell Body cell Body cell
Body cell Body cell Body cell
Body cell Body cell Body cell
Footer cell Footer cell Footer cell

Pagination

Product badges

Product badges are floating labels that will decorate a product image, to highlight a special message. They will show depending on product attribution.

Price Drop

Product Viewer

The product viewer will display a gallery of product thumbnails, and allow to view a large version of each thumbnail, and zoom into parts of the image for more details.

Forms

Checkboxes & Radio buttons

Tabs

Tabs is a generic component to show different panes under the same container.

Content For Tab 1
Content For Tab 2
Content For Tab 3

Product tile

Product tiles are small views of product information designed to show in a product grid or list.

Authentication UI settings

Use this section to customize the look and feel of the authentication flow.

Sample area
Fulfillment Method
Payment
Review & Submit
Fulfillment Method
Payment
Review & Submit
Fulfillment Method
Payment
Review & Submit

Back to top

Rich text

Content Block with Rich Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. Congue nisi vitae suscipit tellus. Volutpat commodo sed egestas egestas fringilla phasellus faucibus. A diam sollicitudin tempor id eu nisl. Egestas fringilla phasellus faucibus scelerisque eleifend donec pretium. Sagittis vitae et leo duis ut diam quam nulla porttitor. Tempor orci eu lobortis elementum nibh tellus molestie. Est pellentesque elit ullamcorper dignissim cras tincidunt.

Category Banner

Category Banner Title