Skip to content
DesignMunkDesignMunk Submit a site

Terry Ho Products

terryhoproducts.com
They Drizzle, They Dunk, They Devour.
Ecommerce Food & Drinks Shopify Tailwind Homepage Mosafin Romic
Share Visit site
terryhoproducts.com DESKTOP · 1440
Terry Ho Products

AI Breakdown

Design export

---
version: alpha
name: Terry Ho Products
description: They Drizzle, They Dunk, They Devour.
colors:
  primary: "#fffcf7"
  secondary: "#b53e38"
  tertiary: "#eeac02"
  neutral: "#121212"
  border: "#374151"
  brand-nightingale: "#5c452b"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Romic
    fontSize: 85px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: -0.007em
  headline-md:
    fontFamily: Romic
    fontSize: 58px
    fontWeight: 600
    lineHeight: 1.17
    letterSpacing: -0.044em
  headline-sm:
    fontFamily: Romic
    fontSize: 39px
    fontWeight: 600
    lineHeight: 1.21
  headline-xs:
    fontFamily: Mosafin
    fontSize: 27px
    fontWeight: 600
    lineHeight: 1.19
  body-md:
    fontFamily: Mosafin
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.5
rounded:
  sm: 8px
  full: 9999px
spacing:
  xs: 8px
  sm: 16px
  md: 28px
  lg: 36px
  xl: 70px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "#000000"
    rounded: "{rounded.full}"
    padding: 9.28px 21.6px
    height: 40px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: 9.28px 21.6px
    height: 40px
  button-link:
    textColor: "#010000"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 16px
---

# Terry Ho Products: Cream Serif Headlines on Charcoal

## Overview

A bold, food-first dark UI built for DTC. The tone is friendly and confident: big display headlines, straightforward copy, and appetizing photography. The interface should feel flavorful and energetic, not precious—use strong contrast, clear CTAs, and rhythmic spacing. When in doubt, set cream text on charcoal, accent with hibachi red and mustard gold, and keep motion purposeful (carousels, marquees).

## Colors

- **primary (#fffcf7):** Cream for body text, buttons, and key surfaces on dark backgrounds.
- **secondary (#b53e38):** Hibachi red for brand panels, emphasis blocks, and promotional sections.
- **tertiary (#eeac02):** Mustard gold for the announcement bar, cart pill, and high-attention accents.
- **neutral (#121212):** Charcoal base for the dark mode canvas and card backgrounds.
- **border (#374151):** Slate lines for dividers, input outlines, and subtle card delineation.
- **brand-nightingale (#5c452b):** Warm brown accent for food-adjacent moments and supporting UI flourishes.
- **surface ({colors.neutral}):** Alias to charcoal; default background for sections and cards.
- **on-surface ({colors.primary}):** Alias to cream; default text and icon color atop dark surfaces.

## Typography

- Headline LG — Romic, 85px/1.2, weight 700, tight letter-spacing. Used for hero claims and major section headlines.
- Headline MD — Romic, 58px/1.17, weight 600. Secondary section headers and large promotional copy.
- Headline SM — Romic, 39px/1.21, weight 600. Card headings and slide titles.
- Headline XS — Mosafin, 27px/1.19, weight 600. Subheads, marquee text, and pull-quotes.
- Body MD — Mosafin, 18px/1.5, weight 600. Default paragraph text, list items, and controls.
Availability: Romic and Mosafin are custom/self-hosted; an agent cannot fetch them from Google. Suggested substitutes—Romic: Fraunces (Google), DM Serif Display (Google), Bree Serif (Google). Mosafin: Inter (Google), Work Sans (Google), Nunito Sans (Google). Use similar sizes/weights to preserve rhythm.

## Layout

Spacing follows an 8-based scale with expressive jumps: 8, 16, 28, 36, 70. Use xl (70px) for section padding, lg (36px) for major gutters and hero splits, md (28px) for card grids and carousel gutters, sm (16px) for internal component padding, xs (8px) for tight stacks. A responsive 12-column fluid grid suits the split hero, product cards, and recipe sliders; collapse to a single column on mobile with preserved spacing ratios.

## Elevation & Depth

Depth is minimal. Only a small shadow is measured (rgba(0,0,0,0.25) 0 4px 4px) for raised pills or overlays; larger elevations are none. Hierarchy comes from tonal contrast (charcoal vs cream), strong color blocks (red, gold), 1px slate borders, and whitespace. Reserve the shadow for interactive elements that need lift over photography.

## Shapes

Two radii define the language: 8px corners for cards, inputs, and images; 9999px for fully pill-shaped buttons and badges. Choose the pill for primary actions to feel generous and appetizing; keep structural surfaces at 8px to stay crisp.

## Components

Buttons
- Primary: background #fffcf7, text #000000, pill radius 9999px, 40px height, 9.28px/21.6px padding. Use as the main CTA on dark or red panels.
- Secondary: text #fffcf7 on transparent or red panels, pill radius 9999px, 40px height. Add a 1px #374151 border when extra separation is needed.
- Link: text #010000, no radius; use sparingly on light surfaces only.

Card
- Background #121212, text #fffcf7, 8px radius, 16px padding. Add a 1px #374151 border for grid clarity.

### Announcement Bar
Full-width strip using #eeac02 with Mosafin 18/600 and emojis; top/bottom padding 8px; links in #121212.

### Header & Cart Pill
Compact nav with 16px link gaps. Cart as a pill using #eeac02 fill, #121212 text, radius 9999px, height 40px.

### Split Hero (Bottle + Plate)
Two-column layout: left panel in #b53e38 with product image; right photo panel. Headline uses Romic 85/1.2 in #fffcf7; primary CTA below.

### Best Sellers Carousel
Horizontal slider of sauce cards (8px radius, 16px padding). Prev/Next controls use cream text on charcoal; gutter 28px between cards.

### Story Feature Block
Copy left, image right. Heading in Romic 39/600; action uses Secondary button. Section padding 70px.

### Recipes Slider
Recipe cards with photography, Mosafin 18 body, Romic 27 subheads. Use 28px gutters and a thin #374151 divider on captions.

### Review Quotes Stack
Short testimonials in Mosafin 18 with select phrases emphasized in Romic 27. Max-width 720px, 36px vertical rhythm.

### Newsletter Signup Banner
Charcoal background, cream text. Email input with 8px corners and a Primary pill button; section padding 70px.

## Do's and Don'ts

Do
- Use cream (#fffcf7) text on charcoal (#121212) as the default; switch to black text only on light pills.
- Reserve mustard gold (#eeac02) for the announcement bar, cart, or a single promotional accent per view.
- Keep primary CTAs pill-shaped at 40px height; pair with Romic headlines for hierarchy.
- Add a 1px slate border (#374151) to cards over dark backgrounds to avoid merging into the canvas.

Don't
- Place the white primary pill over very light photo areas without a border or repositioning.
- Mix more than one accent panel color (red and gold) in the same fold.
- Introduce heavy shadows; use the measured small shadow only when an element must lift.
- Downgrade body text to thin weights; Mosafin (or substitutes) should stay semi-bold for legibility on dark.

## Agent Prompt Guide

Quick color reference
- Text: #fffcf7 on dark surfaces; #000000 on the white primary button.
- Background: #121212 (surface), optional panels #b53e38.
- Border: #374151.
- Accent: #eeac02 (announcement/cart), #b53e38 (brand panels).

1) Split hero with product panel and photo
- Canvas #121212. Left column 50% width, background #b53e38 with bottle image; right column photo.
- Headline set in Romic, fallback 'Fraunces', 'DM Serif Display', serif — 85px, weight 700, line-height 1.2, color #fffcf7, letter-spacing -0.007em.
- Primary CTA pill: background #fffcf7, text #000000, radius 9999px, height 40px, padding 9.28px 21.6px.
- Section padding 70px, column gap 36px.

2) 3-up product card grid
- Background #121212. Each card: background #121212, 1px border #374151, radius 8px, padding 16px.
- Title in Romic/Fraunces 39px, weight 600, color #fffcf7. Price in Mosafin/Inter 18px, weight 600.
- Add a primary button inside each card with the exact pill specs above. Grid gap 28px.

3) Announcement bar + cart pill
- Full-width bar at page top: background #eeac02, text #121212 in Mosafin/Inter 18px 600; vertical padding 8px.
- Cart button at right: background #eeac02, text #121212, radius 9999px, height 40px, horizontal padding 21.6px.

4) Newsletter footer
- Section background #121212, text #fffcf7. Heading in Romic/Fraunces 39px 600.
- Email input: 8px radius, 1px border #374151, height 40px. Submit button uses the primary pill specs.

## Similar Brands

- Heinz: bold product photography and strong red accents; less dark-mode, more classic white backgrounds.
- Cholula: warm palette and heritage serif headlines; lighter, parchment-like surfaces vs. this site's charcoal base.
- Sir Kensington's: playful serif display and editorial recipe content; uses softer pastels where Terry Ho opts for high contrast.
- Frank's RedHot: aggressive red and direct CTAs; relies on flames and texture rather than the restrained, pill-based UI here.

More like this

Browse Ecommerce →
wizcommerce.com
WizCommerce AI
WizCommerce
Built for Wholesale. Powered by AI.
Homepage · 3 days ago
checkoutpage.com
Checkout Page Ecommerce
Checkout Page
One platform for everything you sell
Homepage · 4 days ago
rodeo-labs.com
Rodeo Adventure Labs Ecommerce
Rodeo Adventure Labs
Ride. Explore. Create.
Homepage · 5 days ago
auntfannies.com
Aunt Fannie’s Ecommerce
Aunt Fannie’s
Cleaning differently: no harsh chemicals, plant-based, pet-friendly goodness
Homepage · 5 days ago