Design Guidelines

Version: 2.1.0
Last Updated: October 2025
Maintainer: Brand Team

Introduction

Welcome to the Cup Source Design Guidelines. This document defines the visual language, components, and interaction patterns used across all Cup Source digital touchpoints. It serves as the single source of truth for designers, developers, and partners.

Goal: To ensure a consistent, professional, and user-friendly experience that reinforces Cup Source's position as a reliable, premium wholesale supplier of eco-friendly drinkware.

Brand Identity

Cup Source represents reliability, sustainability, and premium quality. Our visual identity reflects the warmth of coffee culture combined with the efficiency of B2B supply chains.

Primary Logo

☕
Cup Source

Used for primary branding, marketing materials, and app icons. Always use the vector SVG file.

Favicon & App Icon

☕
☕
☕

The standalone coffee cup icon represents the brand in small contexts. Ensure high contrast against backgrounds.

Color Palette

Our colors are chosen to evoke warmth, earthiness, and professionalism. They support accessibility standards and provide clear hierarchy.

Primary Orange
#E07B39
CTAs, links, active states, highlights
Espresso Brown
#3B2315
Headings, secondary buttons, dark backgrounds
Warm Cream
#FDF8F4
Page backgrounds, subtle section dividers
Surface White
#FFFFFF
Cards, modals, inputs, elevated surfaces
Body Text
#2C1810
Paragraphs, labels, primary content
Muted Text
#6B5B50
Captions, helper text, secondary info

Accessibility Notes

  • ✓ Primary Orange on White meets WCAG AA contrast (4.6:1)
  • ✓ Espresso Brown on White exceeds WCAG AAA contrast (12.4:1)
  • ⚠️ Avoid using Primary Orange for text on light backgrounds at sizes smaller than 18px bold

Typography

We use a modern sans-serif font family for readability and a serif font for brand headings to convey premium quality.

Font Families

Inter (Sans)

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
Used for UI, body text, buttons, and navigation.

Playfair Display (Serif)

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
Used for H1 headings, marketing banners, and brand statements.

Type Scale

H1 (3rem)
Playfair, 800

Premium Cup Supply

H2 (1.875rem)
Playfair, 700

Our Product Catalog

H3 (1.25rem)
Inter, 700

Wholesale Pricing

Body (1rem)
Inter, 400

Our eco-friendly cups are made from 100% recycled materials and are suitable for hot and cold beverages. Available in multiple sizes.

Caption (0.75rem)
Inter, 500

Free Shipping on Orders Over $500

Buttons

Buttons indicate interactive elements. Use clear, action-oriented labels and appropriate visual weights to guide users.

Primary Button

class="btn btn-primary"
States: Default, Hover, Focus, Disabled

Use for main actions, form submissions, and high-priority CTAs.

Secondary Button

class="btn btn-secondary"
States: Default, Hover, Focus, Disabled

Use for important but secondary actions, or as a dark alternative to primary.

Outline Button

class="btn btn-outline"
States: Default, Hover, Focus, Disabled

Use for tertiary actions, ghost buttons on dark backgrounds, or "Back" links.

Inputs & Forms

Forms should be clean, accessible, and provide clear feedback. Use labels above inputs and helper text below.

Text Input

As it appears on your tax documents. 
<label class="label">...</label>
<input type="text" class="input" />
<span class="helper-text">...</span>

Input States

Focus: Primary ring. Error: Red border + message. Success: Green border (optional).

Cards

Cards container related content and actions. They should have a clear hierarchy and hover state.

🥤
Best Seller

Paper Coffee Cups

Double-wall insulated cups in 8oz–20oz sizes. Custom printing available. Bulk discounts apply.

$0.12 /unit
🥣
Eco-Friendly

Soup Bowls

Leak-proof takeaway bowls with vented lids. Made from biodegradable materials. FDA compliant.

$0.18 /unit

Badges

Badges provide supplementary information or status indicators. Use them sparingly to avoid visual clutter.

New In Stock Low Stock Out of Stock Custom 
<span class="badge badge-primary">New</span>
<span class="badge badge-success">In Stock</span>

Logo Usage

Proper logo usage is critical for brand consistency. Follow these rules to maintain brand integrity.

Clear Space