Design system v1.0
Hot Cup Factory
Brand tokens, components, and usage rules for hotcupfactory.com
Identity
Logo system
The full lockup is the primary logo. Use the correct version based on background color. Never alter fill colors, proportions, or font weights.
Tokens
Color palette
Full confirmed palette. Roasted, Brew, Iced, and Sale Red each have 4 tokens: dark, mid, light, and x-light. The Iced family is anchored to #9FDCED (mid) with all other stops derived from that hue.
Roasted — Primary
Brew — Secondary
Iced — Accent (cold products only)
Sale Red — Promotional only
Neutrals
Type system
Typography
Fraunces for display and emotional headlines. DM Sans for all UI, body copy, and functional text. Two fonts only — no exceptions.
Your brand on every cup.
Everything your café needs, nothing you don't.
Hot Cups & Sleeves
Shop by category
Cold Disposables & lids
Branded Disposables with your logo, or ready-to-ship Disposables for any café. Low minimums. Free design. Ships fast.
Hot Cups | Cold Cups | Custom Printing | Sleeves & Lids | Wholesale
Start your custom order →
Interactions
Buttons
All button variants with correct context. The background you're placing a button on determines which variant to use.
On white / light backgrounds
Solid variants
Small / default
Secondary / ghost
Text / link buttons
On Roasted mid (orange) background
Primary + secondary
On Roasted dark background
Primary + secondary
On Brew (yellow) background
Primary + secondary
On Iced dark (teal) background
Cold section CTA
Special states
Destructive / disabled
Labels
Badges & labels
Use soft (x-light bg) badges for persistent labels. Use solid fill badges for urgent or promotional callouts.
Soft badges (x-light fill)
Branded Disposables
Shop Disposables
On sale
Free design
In stock
Ships same day
Best seller
New arrival
Solid fill badges (urgent / promotional)
Branded
New
Cold
25% off
Best seller
Limited time
Category labels — Disposables hot / cold split
Latte · Cappuccino · Flat White
← Roasted orange — hot Disposables
Iced Latte · Cold Brew · Smoothies
← Iced dark — cold Disposables
Feedback
Alerts & notices
Inline notices for product pages, checkout, and system messages. Left border signals urgency — Sale Red for promotions/errors, Iced for info, Roasted for brand messages.
Same-day shipping cutoff
Order by 2pm to ship today. Orders placed after 2pm ship next business day.Free design service included
Upload your logo and our design team will prep it for print at no charge — any file format accepted.Shop Disposables — Cold
You're browsing cold Disposables. All products here use the Iced teal color system.Only 3 cases left at this price
Stock is limited. Order before Thursday to guarantee availability at the sale price.Minimum order for custom printing
Custom printed cups require a minimum of 500 units per design. Stock cups have no minimum.Input
Form elements
Roasted orange focus ring throughout the site. Iced teal focus ring on cold-product pages and search. Focus ring: 3px at 14% opacity.
Focus ring — #FD822C at 14% opacity
Focus ring — #2A7A8A at 14% opacity
Please enter a valid email address
Rules
Color pairings
Which button and text color goes on which background. These pairings are fixed — don't substitute.
White / light
White bg → Roasted CTA
Product pages, collection grids. Roasted orange (#FD822C) is the primary action color on white.
Roasted x-light
Cream bg → Roasted CTA
Branded Disposables feature sections, Disposables hot grid. Roasted orange on warm cream.
Roasted light
Roasted light bg → Roasted CTA
Reviews section. Warm peach background — Roasted orange primary button, ink body text.
Roasted primary
Orange bg → White CTA
Hero, banners on orange. White solid primary — clear contrast, clean hierarchy.
Roasted dark
Dark orange bg → White CTA
Header, footer, pre-footer on dark orange. White solid primary — same rule as orange mid.
Brew x-light
Free design
Brew x-light → callouts
Trust bar tint, feature highlight boxes. Never a primary section background at full width.
Brew primary
Brew primary → ink button
Promotional callout banners, trust bar CTAs. Ink text only — never white. Ink solid button primary.
Iced x-light
Iced x-light bg → Iced ghost
Cold product section background. Iced ghost button on x-light teal wash — clean and on-brand.
Iced dark
Iced bg → White CTA
Cold section cards, teal backgrounds. White button with Iced teal text reads cleanest.
Sale x-light
Low stock
Sale x-light → alert/badge
Inline notices, soft badges. Not for CTA buttons — use Sale mid for those.
Sale primary
Sale primary bg → White CTA
Promotional banners. White button with Sale dark red text for contrast.
Ink bg
Ink bg → Brew CTA
Footer accent elements, dark feature sections. Brew yellow CTA pops strongly against ink.
Layout
Section background map
Every homepage section has a confirmed background token. No two adjacent sections share the same background. The page leads with brand identity, showcases Branded Disposables first as the high-value offer, then flows into the Disposables category split by hot and cold.
Foundation
Spacing & radius
4px base grid using Canopy's
--space-unit (0.4rem). All HCF tokens are aliases of Canopy multiplier expressions — custom sections and Canopy stock sections share the same rhythm automatically.Spacing scale — HCF tokens (Canopy-compatible)
4px--sp1×1Tight gaps, icon padding
8px--sp2×2Badge padding, small gaps
12px--sp3×3Button gaps, form row spacing
16px--sp4×4Card padding (small), grid gap
20px--sp5×5Component internal padding — matches Canopy gutter-sm
24px--sp6×6Standard internal padding, drawer/header padding
32px--sp7×8Between sub-sections, card padding (large)
48px--sp8×12Section padding mobile — matches Canopy gutter-md
64px--sp9×16Section padding desktop — matches Canopy gutter-lg
Canopy layout tokens — theme-level settings
For custom sections, use
var(--gutter) for page-edge padding, var(--section-gap) for vertical rhythm, and calc(N * var(--space-unit)) or the --sp tokens for component-level spacing. Never hardcode px values for layout.Border radius — HCF scale → Canopy theme settings
4px
--r-sm · tags
6px
--r-md · btns, inputs
10px
--r-lg · cards, modals
14px
--r-xl · large panels
100px
--r-pill · badges
Strategy
Color proportion
HCF follows a 70-20-10 color ratio. 70% neutral surfaces — alternating between white (#FBFBFB) and Roasted x-light (#FDEEE3) — let products breathe and create page rhythm. 20% Roasted orange anchors brand identity at every key interaction point. 10% accent colors — Brew yellow, Iced teal, and Sale red — signal warmth, category context, and urgency without competing for attention.
Visual ratio
35% — White (#FBFBFB)
35% — Cream (#FDEEE3)
20% — Roasted family
3% — Brew yellow
4% — Iced teal
3% — Sale red
The three buckets
Where each bucket appears on the page
Orange anchors the brand at top and bottom. Branded Disposables gets white — clean and premium. Disposables splits into warm cream (hot) and cool teal (cold). Red interrupts once for the promo strip. This is the 70-20-10 ratio in practice.
Neutral — white + cream alternating
Roasted — header, hero, pre-footer, all CTAs
Brew — trust bar, price highlights, UI accents
Iced — Disposables cold section only
Sale red — promo banner only
Guidelines
Do's & don'ts
Non-negotiable rules for maintaining brand consistency across all touchpoints.
Always do
Use Brew (#FFCB1F) with black/ink text — always, no exceptions
Use white solid buttons as primary CTA on all Roasted orange and dark orange backgrounds
Use Roasted orange (#FD822C) as primary CTA on white and cream backgrounds
Use Iced teal for all Disposables cold sections, eyebrows, and cold-side UI
Use Roasted warm tones for all Branded Disposables sections and UI
Use white text on Roasted dark, Iced dark, and Sale mid backgrounds
Alternate section backgrounds — no two adjacent sections same bg
Use Roasted orange focus ring on all inputs site-wide
Use Iced teal focus ring on cold Disposables inputs and search
Never do
White text on Brew yellow — fails accessibility at 1.5:1 contrast
Roasted colors in a cold Disposables section — keep hot/cold separation
Iced colors in a Branded Disposables or hot Disposables section
Brew yellow as a large hero or full-section background — reads fast-food
Mix Roasted and Iced fills in the same section
More than 2 brand colors in the same section (neutrals don't count)
Large black (#161310) section backgrounds — use Roasted dark instead (footer excepted)
Inter, Roboto, system fonts — Fraunces + DM Sans only
Alter logo fill colors, proportions, or font weights