Welcome to the Cafe

This design system captures the warmth of your favorite coffee shop - rich espresso browns, creamy lattes, and that cozy chalkboard menu aesthetic. Perfect for cafes, bakeries, artisan brands, and anywhere that values warmth and craftsmanship.

Warm & Inviting

Rich coffee tones create a cozy, welcoming atmosphere.

Aa

Hand-Crafted Feel

Handwritten fonts and chalkboard textures add artisan charm.

Sweet Accents

Caramel and honey highlights add warmth and energy.

01

Color Palette

From deep espresso to creamy latte foam, our palette mirrors the perfect pour. Warm browns anchor the design, while caramel and honey accents add sweetness.

Coffee Roasts

Espresso #2C1810
Dark Roast #3D2314
Medium Roast #5D3A1A
Light Roast #8B5A2B
Crema #C4A574
Latte #D4B896

Cream & Milk

Milk Foam #FDFBF7
Cream #F5F0E6
Steamed Milk #F0E6D8
Oat Milk #E8DFD0

Sweet Accents

Honey #EB9605
Caramel #C68E17
Cinnamon #D2691E
Maple #BB6528

Chalkboard Colors

Chalkboard #2A3B36
Chalk White #E8E4DC
Chalk Yellow #E8D4A5
Chalk Pink #D4A5A5
Chalk Blue #A5C4D4
Chalk Green #A5D4B4
02

Typography

A blend of handwritten warmth and refined elegance. Chalk-style fonts for menus and headlines, flowing scripts for personal touches, and clean sans-serifs for readability.

Amatic SC - Chalkboard Headlines

DAILY SPECIALS

Fresh Baked Pastries

Perfect for menu boards, signage, and attention-grabbing headlines. Captures that authentic hand-lettered cafe feel.

Caveat - Handwritten Script

Made with love, served with care

Thank you for visiting our little corner of the world

Warm and personal. Great for messages, labels, and adding a human touch to any design.

Playfair Display - Elegant Headings

Artisan Coffee Roasters

Our Story Begins Here

Sourced from the Best Farms

Every Cup Tells a Story

Crafted with Passion
Small Batch Excellence

Sophisticated and refined. Ideal for brand names, section headers, and establishing credibility.

Cabin - Body Text

The quick brown fox jumps over the lazy dog. ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

We believe that great coffee is more than just a beverage - it's an experience. Each cup we serve represents our commitment to quality, sustainability, and the art of the perfect brew.

Clean, humanist sans-serif. Highly readable for body copy, descriptions, and extended text.

Type Scale

Element Font Size Sample
Chalk Display Amatic SC 4rem MENU
Handwritten Caveat 2rem Welcome!
H1 Playfair Display 2.5rem Heading One
H2 Playfair Display 2rem Heading Two
H3 Playfair Display 1.5rem Heading Three
Body Cabin 1rem Body text sample
Small Cabin 0.875rem Small text sample
03

Buttons

Warm, inviting buttons that feel as comfortable as your favorite cafe chair. Rounded edges and subtle shadows create depth without being harsh.

Button Variants

Button Sizes

Block Button

Usage Notes

Use Primary (espresso) for main actions like ordering. Secondary (cream) for alternative options. Ghost for tertiary actions. Caramel for promotional or highlighted actions. Chalk for menu-related buttons.

04

Form Elements

Clean, friendly form elements that invite interaction. Soft borders, warm focus states, and handwritten labels create a personal touch.

How should we call your order?
Customize Your Order
Cup Size

Toggle Switches

Join our loyalty program
Receive promotional emails
Remember my order
Sorry, this promo code has expired
05

Cards

Content containers that feel like cafe menu boards and recipe cards. Warm backgrounds, rounded corners, and inviting shadows.

Standard Card

A warm, inviting container for content. Perfect for product displays, blog posts, or any grouped information.

Menu Board

Chalkboard style for authentic cafe menus and daily specials.

Today's Menu
Product Card

House Blend Coffee

Our signature blend featuring notes of chocolate, caramel, and a hint of citrus.

Medium Roast Best Seller
$14.99

Menu Items

06

Data Tables

Clean, readable tables for menus, orders, and data display. Warm headers and alternating rows make scanning easy and pleasant.

Order Summary

Item Size Customizations Qty Price
Caffe Latte Large Oat Milk 1 $5.50
Cappuccino Medium Extra Shot 2 $10.00
Croissant - Butter 2 $7.00
Cold Brew Large Vanilla Sweet Cream 1 $5.75
Subtotal $28.25

Coffee Menu

07

Badges

Small labels for categorization, status, and highlighting. Warm colors keep them inviting rather than alarming.

Badge Variants

Espresso Latte Caramel In Stock Limited New Coming Soon

Usage Examples

Best Seller House Blend - Our signature medium roast

New Oat Milk Latte - Now available with house-made oat milk

Organic Fair Trade Ethiopian Yirgacheffe - Single origin

Seasonal Pumpkin Spice Latte - Available through November

08

Alerts & Notifications

Friendly messages that inform without alarming. Soft colors and handwritten titles keep the cozy atmosphere.

Did you know?

Our beans are roasted fresh every morning! Order before 2pm for same-day roasting.

Order Confirmed!

Your order #1234 is being prepared. We'll have it ready in about 5 minutes.

Heads up!

We're running low on oat milk today. Consider trying our house-made almond milk as an alternative!

Oops!

We couldn't process your payment. Please check your card details and try again.

Today's Special

Buy any large drink and get a fresh-baked muffin for just $2! Valid until 11am.