Gong Cha

Overview

Gong Cha is a premium bubble tea franchise brand that transforms the casual beverage category into a sophisticated, heritage-driven experience. The design system embodies 'Warm Minimalism with Entrepreneurial Confidence'—a visual language that combines earthy, natural warmth (cream, soft browns) with bold, energetic accents (deep crimson, vibrant yellow) that signal growth, opportunity, and success. The brand serves franchise entrepreneurs seeking a proven business model, positioning itself as a partner in building profitable ventures. The UI evokes trust through refined simplicity: generous whitespace, carefully weighted typography, and purposeful color hierarchy that guides users toward franchise opportunity without overwhelming them.

The voice is professional yet approachable, data-driven yet human. Gong Cha speaks in concrete outcomes: 'Monthly revenue up to ₩130 million,' 'Proven supply chain,' 'Franchise support from day one.' The tone avoids hype; instead, it presents facts with quiet confidence. Example sentence in brand voice: '공차의 객단가 구조는 경쟁사 대비 30% 높은 마진율을 보장합니다' (Gong Cha's unit price structure guarantees 30% higher margins than competitors).

Colors

The color system balances heritage warmth with modern entrepreneurial energy. Primary (#c10230, deep crimson) is the signature accent—deployed on all CTAs, franchise inquiry buttons, and key interactive states. This red is neither corporate nor aggressive; it signals confidence and opportunity without dominating the page. Secondary (#bf0b34, slightly darker crimson) provides depth for hover and active states, creating a tactile feedback loop. Tertiary (#ffe402, vivid yellow) is reserved for high-energy callouts, success badges, and the circular 'real-time consultation' button—it breaks the warm palette with optimistic energy, representing the franchise opportunity itself.

The surface stack anchors the design in natural warmth: surface (#fcf6ed) is a soft cream with brown undertones (RGB 2

Typography

The type system uses Pretendard and Noto Sans KR—contemporary Korean typefaces that balance geometric clarity with humanist warmth. Display (54px, 400 weight, -0.02em tracking) anchors hero sections with understated elegance; headline-lg (40px, 600 weight) drives section breaks; body-md (16px, 400 weight) ensures comfortable reading at 24px line-height. The weight progression (400 → 500 → 600 → 700) is deliberate: body copy remains light and open, while labels and CTAs gain authority through medium weight. Apply text-shadow 0 2px 4px rgba(0, 0, 0, 0.08) on small labels (label-sm, 12px) overlaid on photography to ensure legibility without harshness. Headline-md (28px, 600 weight) is used for section titles and card headers, creating visual rhythm without visual noise.

Layout

The page uses a 12-column fluid grid with a max-width of 1280px, ensuring responsive scaling from mobile to desktop. Container padding is 24px (md spacing) on tablet/desktop, reducing to 12px (sm spacing) on mobile. Section separation uses lg spacing (40px) vertically, creating breathing room between franchise benefits, testimonials, and application sections. The hero occupies full viewport height with a background image (feet in soil, symbolizing growth and grounding), overlaid with semi-transparent dark gradient to ensure text legibility. Below the fold, cards and content blocks use md spacing (24px) internally, with gutter spacing (24px) between columns. The design avoids centered layouts; instead, it uses asymmetric grids that align content to the left or right, creating visual tension

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than dramatic drop-shadows. Level 1 (Base): surface (#fcf6ed) with no shadow, representing the page foundation. Level 2 (Cards & Inputs): box-shadow 0 3px 8px rgba(0, 0, 0, 0.15) applied to cards, input fields, and standard buttons—this creates a soft, approachable lift without harshness. Level 3 (Modals, Popovers, Hover States): box-shadow 0 8px 24px rgba(0, 0, 0, 0.12) for elevated containers and button hover states. The shadow color is always black with 12–15% opacity, never pure black, maintaining warmth. Circular action buttons

Shapes

The shape philosophy is 'Soft-Technical Confidence'—rounded corners signal approachability while maintaining professional structure. Buttons and CTAs use full radius (9999px), creating pill-shaped forms that feel modern and friendly; this is the most prominent shape, appearing on every franchise inquiry button. Cards and containers use lg radius (1rem / 16px), balancing softness with definition. Input fields use full radius (9999px) to match button language, creating a cohesive interaction layer. Smaller UI elements (badges, tags) use full radius for consistency. The rationale: full-radius but

Components

Action Elements Buttons are the primary interaction pattern. Button-primary (#c10230, 48px height, 12px 24px padding, full radius) is used for all franchise inquiry CTAs and form submissions. On hover, the background shifts to #a00020 (darker crimson) with lg elevation shadow (0 8px 24px rgba(0, 0, 0, 0.12)), creating tactile feedback. Button-secondary (#bf0b34) is used for secondary actions like 'Learn More' or 'View Details'; it uses the same dimensions but a slightly darker red. Button-tertiary (#ffe402, black text) is reserved for high-energy callouts like 'Real-time Consultation' or 'Success Stories'—the yellow background with black text creates maximum contrast and draws attention. All buttons use label-md typography (14px, 500 weight, 0.01em tracking) for crisp, legible labels.

Do's and Don'ts

**Do**

• Do use primary (#c10230) exclusively for franchise inquiry CTAs and key interactive elements—it's the brand's signature and must remain distinctive.
• Do apply md elevation shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to all cards and containers to create subtle depth without visual noise.
• Do use full radius (9999px) on all buttons and input fields to reinforce the warm, approachable brand personality.
• Do maintain 24px (md spacing) as the default padding inside cards and containers; this creates breathing room and prevents visual clutter.
• Do use Pretendard or Noto Sans KR exclusively for all typography—these typefaces carry the Korean heritage and contemporary sophistication of the brand.

**Don't**

• Don't use secondary (#bf0b34) or tertiary (#ffe402) as primary CTAs—they are supporting accents and will dilute the brand signature if overused.
• Don't apply harsh shadows (box-shadow with opacity > 20%) or blur effects—the aesthetic is grounded and tactile, not ethereal or glassmorphic.
• Don't use sharp corners (0px radius) on interactive elements; all buttons, inputs, and cards must have rounded corners to maintain warmth.
• Don't mix typefaces—Pretendard and Noto Sans KR are the only approved fonts; Arial, system-ui, and generic sans-serif are forbidden.
• Don't exceed 40px (lg spacing) for internal card padding or 64px (xl spacing) for section separation—the design should feel intimate and focused, not sprawling.