00

Navigation

Table of Contents

01

Foundation

Typography

Heading 1

Better Coffee, Better Mornings.

Heading 2

Featured Coffee

Heading 3

Ethiopia Light Roast

Heading 4

Roast Details

Heading 5

Shipping Information

Heading 6

Product Number

Paragraph

Our coffee is roasted in small batches and delivered fresh to your door.

Inline link

Learn more about this coffee

Heading font: Georgia, Times New Roman, serif. Body font: Arial, Helvetica, sans-serif.

02

Foundation

Color Palette

Espresso

#231A17

Header and footer

Coffee

#4A2F24

Buttons and headings

Latte

#D9B892

Accent color

Cream

#F3EADF

Section background

Leaf

#50624B

Success messages

Ink

#292421

Body text

03

Layout

Spacing and Grid

12 columns Desktop grid

24px Desktop gap

1200px Maximum width

80px Section spacing

8px Base spacing unit

8px Corner radius

Breakpoints: Mobile below 600px uses 4 columns. Tablet from 600px uses 8 columns. Desktop from 900px uses 12 columns.

04

Interface

Forms and Inputs

Basic Inputs

Form inputs are used to collect customer information during checkout.

Name

Email Address We will send your order confirmation to this email.

Shipping Address

Money Input

Gift Card Amount

$

Warning Input

Email Address Please enter a valid email address.

05

Interface

Buttons

Basic Buttons

Add to Cart Continue Shopping Light Button Text Link

Hero Button

Shop Coffee

Warning Button

Remove Item

06

Forms

Hotdog

A hotdog combines an input and button into one rounded form element.

Search

Join

07

Forms

Select

Coffee Size Select a size 12 oz 16 oz 20 oz

Quantity 1 2 3 4

08

Forms

Checkboxes

Save my information for next time Send me Morning Brew Coffee updates

09

Feedback

Alerts

Item successfully added to your cart.

Please check your payment information.

Payment could not be processed.

10

Components

Cards

Basic Card

A simple container for related content.

Soft Card

A low-contrast card for supporting information.

Ethiopia

Light Roast

Bright, fruity and smooth.

$18 View coffee

11

Components

Navigations

Basic Nav

Flex Nav

Stretch Nav

Pills Nav

Crumbs Nav

Material Nav

12

Components

Tables

Coffee roast comparison

Coffee	Roast	Flavor	Price
Ethiopia	Light	Floral and citrus	$18
Colombia	Medium	Chocolate and caramel	$16
Espresso Blend	Dark	Rich and bold	$17

13

Components

Figures

Light Roast

Espresso Blend

Medium Roast