Terry Ho's Original Yum Yum!

Overview

Terry Ho's Original Yum Yum! is a vibrant, heritage-driven food brand that celebrates the iconic hibachi sauce beloved by Japanese steakhouse enthusiasts. The design system embraces "Bold Culinary Warmth"—a movement that combines energetic primary reds (#e9232c) and golden accents (#eeac02) with clean, approachable typography to evoke authenticity, joy, and the sensory pleasure of dining. The UI conveys confidence and tradition through saturated colors and playful geometric shapes, creating an emotional connection between the product and the user's memories of steakhouse experiences.

The brand voice is enthusiastic yet grounded: conversational, celebratory, and never pretentious. Vocabulary leans into food culture ("sauce," "steakhouse," "dipping," "marinade") and casual warmth ("good on everything," "yum yum"). The tone balances heritage storytelling with modern accessibility. Example sentence in brand voice: "Our Yum Yum Sauce has been the secret ingredient at hibachi tables for generations—now it's yours to take home."

Colors

The color palette is rooted in the brand's signature red (#e9232c, primary) and golden yellow (#eeac02, secondary), which appear prominently on packaging, CTAs, and hero sections. Primary red (#e9232c) is the dominant accent used on all call-to-action buttons, active states, and brand-critical interactive elements; it conveys energy, appetite, and brand authority. Secondary gold (#eeac02) supports the primary as a highlight color for badges, accent text, and promotional banners, evoking warmth and premium quality. The neutral foundation is a warm off-white (#fffcf7, surface) that mimics the color of the sauce itself, creating visual harmony with product photography. Supporting neutrals include light grays (#f7f7f7, surface-dim) for subtle backgrounds and deep charcoal (#010000, on-surface)

Typography

The type system pairs Romic (a bold, geometric display font) for all headings with Mosafin (a warm, friendly sans-serif) for body and UI text. This pairing communicates heritage (Romic's structured strength) paired with approachability (Mosafin's rounded, welcoming forms). Display sizes (60px, 700 weight, -0.025em letter-spacing) anchor hero sections and product names with dramatic presence. Headline-lg (40px, 700 weight) and headline-md (32px, 700 weight) establish section hierarchy and product titles. Body text uses Mosafin at 16–18px with 600 weight and 24–28px line-height, ensuring readability over product photography and busy backgrounds. All button labels use label-md (14px, 600 weight, 0.01em letter-spacing) in uppercase with bold font-weight to signal interactivity. On small labels

Layout

The layout uses a 12-column fluid grid with a max-width of 1280px, allowing responsive scaling from mobile (single column) to desktop (full grid). The gutter spacing is 20px (md spacing token), applied consistently between grid items and section edges. Page rhythm is established through lg spacing (40px) for major section separation (hero to product grid, product grid to testimonials) and md spacing (24px) for subsection breaks. Container max-width of 1280px ensures content remains readable on ultra-wide displays while maintaining visual focus. White-space philosophy prioritizes breathing room around product imagery and CTAs: product cards use md padding (24px) internally, and hero sections use xl spacing (64px) for top/bottom margins. The header is fixed at 69px height with a warm off-whi

Elevation & Depth

Depth is conveyed through a three-level shadow system combined with subtle vertical translation on hover. Level 1 (Base/Cards): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), applied to product cards and standard containers, creating a soft lift from the surface. Level 2 (Elevated/Modals): box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), used for overlays, expanded product details, and modal dialogs. Level 3 (Buttons/Interactive): box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.15), a playful offset shadow that reinforces the brand's bold, tactile personality and creates a "pressed" effect. On button hover, the

Shapes

The shape philosophy is "Playful Precision"—combining sharp, geometric forms (reflecting the brand's bold confidence) with rounded corners (evoking warmth and approachability). Buttons use full border-radius (9999px) to create pill-shaped CTAs that feel friendly and clickable, reinforcing the "good on everything" brand promise. Cards and containers use sm border-radius (0.25rem / 4px) for a subtle, modern edge that avoids softness while maintaining legibility. Input fields use DEFAULT border-radius (0.375rem / 6px) for a balanced, neutral appearance. Product image containers use no border-radi

Components

Action Elements Buttons are the primary interaction driver and use the offset shadow technique to reinforce the brand's tactile, energetic personality. Primary buttons (button-primary) use the signature red (#e9232c) background with white text, 9999px border-radius, 12px 24px padding, and 3px 3px 0 rgba(0, 0, 0, 0.15) box-shadow. On hover, the background darkens to #d1131c, shadow increases to 3px 3px 0 rgba(0, 0, 0, 0.2), and the button translates -1px -1px to simulate a lift. All button text is uppercase (text-transform: uppercase) with bold font-weight (700) and label-md typography (14px, 600 weight). Secondary buttons (button-secondary) use a white background with a 2px primary red border, maintaining the same padding and radius. Ghost buttons (button-ghost) use transparent backgro

Do's and Don'ts

**Do**

• Do use the primary red (#e9232c) on all CTAs and interactive elements to maintain brand recognition and drive conversion.
• Do apply the offset shadow (3px 3px 0 rgba(0, 0, 0, 0.15)) to buttons and interactive components to reinforce the brand's bold, tactile personality.
• Do pair Romic headings with Mosafin body text to balance heritage strength with modern warmth and approachability.
• Do use full border-radius (9999px) on buttons and badges to create friendly, inviting interactive elements that feel clickable.
• Do maintain the warm off-white background (#fffcf7) as the primary surface to echo the sauce color and create visual harmony with product photography.
• Do apply uppercase text-transform to all button labels and badges to reinforce the brand's confident, energetic voice.

**Don't**

• Don't use the primary red (#e9232c) for body text or large background areas; reserve it exclusively for CTAs, active states, and brand-critical accents.
• Don't apply blur-based shadows (box-shadow with blur-radius) to buttons; use only the offset shadow technique (3px 3px 0) to maintain the brand's playful, graphic quality.
• Don't mix Romic and Mosafin weights arbitrarily; use Romic at 700 weight for all headings and Mosafin at 600 weight for body and UI text.
• Don't use border-radius values between 0.375rem and 9999px on buttons; stick to either DEFAULT (0.375rem) for inputs or full (9999px) for CTAs to maintain visual consistency.