Design Support

Build with the Cup Source Brand

A comprehensive guide for designers, developers, and partners. Access brand tokens, component standards, asset libraries, and implementation specs.

Download Assets View Color System

Brand Identity & Logo Usage

Maintain visual consistency across all touchpoints. Follow clear space, minimum size, and placement guidelines.

Primary Logo & Clear Space

Always maintain a minimum clear space equal to the height of the logo icon around all edges.

☕
Cup Source

Minimum Size & Variations

Never scale the logo below the specified minimum. Use the mono version on dark backgrounds.

☕
Min Width: 96px (Digital) / 25mm (Print)
Dark BG: Use white mono lockup
Light BG: Use full color or espresso mono

🚫 Logo Misuse Guidelines

  • • Do not stretch, skew, or rotate the logo
  • • Do not apply drop shadows, outlines, or gradients
  • • Do not change the color proportions or font weights
  • • Do not place on low-contrast or busy backgrounds

Color System & Tokens

Our palette is engineered for accessibility, brand recognition, and cross-platform consistency. Click to copy hex values.

#3B2315

Espresso

Primary / Text Dark

#E07B39

Accent Orange

Interactive / CTAs

#D4A053

Warm Gold

Highlights / Success

#FDF8F4

Cream Base

Background / Canvas

#6B5B50

Muted Text

Secondary / Captions

#E5DDD5

Border Light

Dividers / Strokes

Typography Scale

Consistent hierarchy improves readability and brand voice. Use the specified weights and line heights.

Display Heading
900 / 40px / 1.1
Section Heading
800 / 32px / 1.2
Card Title / H3
700 / 24px / 1.3
Button / Label
600 / 18px / 1.4
Body Text / Paragraph
400 / 16px / 1.6
Caption / Meta
500 / 14px / 1.5
Font Stack: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif
Code/Mono: 'SF Mono', 'Fira Code', 'Consolas', monospace
License: Inter (OFL) • System fallbacks included
Web Import: <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">

UI Component Standards

Pre-built patterns that follow our spacing, radius, and interaction tokens. Use these as reference for dashboards, portals, or partner sites.

Buttons

Form Inputs

Status & Badges

Active Pending Archived Featured
Card Padding: 24px • Radius: 12px • Shadow: 0 4px 16px rgba(59,35,21,0.08)

Asset Library & Downloads

Production-ready files for print, web, and development. Updated quarterly.

Logo Pack (SVG + PNG)

Primary, mono, icon, and favicon variations. Transparent backgrounds.

v2.4.1 • 2.8 MB Download

Figma UI Kit

Auto-layout components, color styles, text styles, and grid systems.

v3.1 • Community File Open in Figma

Brand Guidelines PDF

Full specification document for print, digital, and partnership usage.

2025 Ed. • 14.2 MB Download PDF

Need Custom Assets or Brand Guidance?

Our design team supports partners, agencies, and internal dev teams. Reach out for mockups, vector edits, or implementation reviews.

Email Design Team