Design System

Coffee

Warm, inviting, perfectly brewed

Rich tones.
Cozy atmosphere.
Artisan quality.

01

Color

A rich palette inspired by the colors of coffee, from dark espresso to creamy foam.

Coffee Roasts

Espresso #2C1810
Dark Roast #3D251E
Mocha #5D3A2E
Coffee #6F4E37
Cappuccino #8B6B5D

Cream & Milk

Latte #C4A484
Oat Milk #D4C4A8
Cream #F5F0E8
Foam #FAF8F5

Sweet Accents

Caramel #C68E17
Cinnamon #B5651D
Honey #EB9605

02

Typography

Nunito for warm, rounded friendliness. Caveat for handwritten personality and charm.

Display

64px / ExtraBold

Aa

H1

40-64px / ExtraBold

Freshly Brewed

H2

36px / ExtraBold

Morning Blend

H3

24px / Bold

Single Origin

Body

16px / Regular

The aroma of freshly ground coffee beans fills the air, promising warmth and comfort in every sip.

Handwritten

Caveat / Variable

Made with love & care

Small

14px / Regular

Captions, labels, and secondary information

Life is too short for bad coffee

03

Spacing

A comfortable spacing scale that gives elements room to breathe, like the perfect pour.

4px
xs
8px
sm
12px
md-
16px
md
24px
lg
32px
xl
48px
2xl
64px
3xl
96px
4xl

04

Buttons

Soft, rounded buttons that invite interaction. Warm gradients and comfortable padding.

Button Variants

Button Sizes

Interactive States

05

Forms

Friendly, approachable form elements with generous padding and clear focus states.

We will send your order confirmation here

Iced
Hot

06

Cards

Cozy content containers with soft shadows and warm hover effects.

01

Fresh Beans

Sourced from the finest farms, roasted to perfection for maximum flavor.

03

Cozy Space

Comfortable seating, warm lighting, and the perfect atmosphere to relax.

Cards with Icons

House Blend

Our signature medium roast with notes of chocolate and caramel.

🍰

Pastries

Freshly baked croissants, muffins, and artisan breads daily.

📚

Free WiFi

Stay connected while you enjoy your coffee. Work remotely in comfort.

07

Data Table

Clean tables with warm accents for displaying menus and information.

Drink Size Calories Availability Price
E
Espresso
Single 5 In Stock $3.50
C
Cappuccino
Medium 120 In Stock $4.50
L
Caramel Latte
Large 250 Seasonal $5.75
M
Mocha
Medium 290 In Stock $5.25
P
Pumpkin Spice Latte
Large 380 Low Stock $6.25

Progress Indicators

Order Progress: Brewing

Daily Sales Goal

08

Badges

Compact status indicators in warm, coffee-inspired tones.

Coffee Badges

Espresso Latte Caramel Cream

Status Badges

Available Low Stock Sold Out

Tags

Single Origin x Fair Trade x Organic x Dark Roast x

Alert Messages

New Seasonal Menu

Check out our fall-inspired drinks, available for a limited time.

Order Confirmed

Your order is being prepared and will be ready in 5 minutes.

Limited Availability

Our Pumpkin Spice Latte is running low. Order soon!

09

Design Principles

The core values that guide our warm and inviting aesthetic.

🏡

Warmth & Comfort

Every element should feel welcoming and cozy, like walking into your favorite coffee shop on a cold morning. Use warm browns, soft shadows, and rounded corners.

Artisan Quality

Attention to detail matters. Like a well-crafted latte, every component should show care and craftsmanship. Small touches make a big difference.

🙌

Approachability

Design should be friendly and inviting, never intimidating. Rounded shapes, generous spacing, and warm colors create a comfortable experience.

🌱

Natural & Organic

Draw inspiration from natural materials and textures. Coffee beans, cream, caramel, and wood inform our color palette and visual language.

Good design, like good coffee, is about the perfect balance