---
title: "Hungry Tiger design system"
variant: extended
source: https://www.eathungrytiger.com/
captured_at: 2026-10-12
theme: dark
industry: food-beverage
generator: Design DNA (https://four.wiralomi.com/style/eathungrytiger-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Hungry Tiger · Design System

> Bold flavor, wrapped in warm editorial energy

**Theme:** dark · **Industry:** food-beverage · **Source:** https://www.eathungrytiger.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Hungry Tiger presents Indian-inspired sauce with a vivid, high-impact homepage built around oversized typography and warm, spice-toned color. A centered jar, ingredient storytelling, and a contrasting final amber section make the product feel bold and tactile.

## North star

Let oversized saffron typography and the terracotta field establish the mood, then use product imagery and deliberate negative space to tell the story.

## Overview

The page builds its identity from a warm terracotta canvas (#823513) and a bright saffron-orange (#faae33) used for oversized headlines, navigation pills, dotted dividers, and primary calls to action. Deep brown (#402011) provides contrast for small text and button labels, while the near-black brown surface (#281006) marks the ingredient-story panel. A muted burnt orange (#9f531b) appears as a secondary accent rather than a dominant structural color. Salmond carries the display system: heavy, uppercase, tightly tracked headlines that sometimes blend into the background for atmospheric emphasis. Compact Graphikx navigation keeps utility links legible. The layout alternates vast open color fields and product-led moments, then introduces a sharp bright-yellow section with offset documentary food photographs. The jar is the central visual anchor, treated like a hero object against the textured backdrop.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Saffron Signal | `#faae33` | `--color-saffron-signal` | brand | Headline and body emphasis, navigation pills, dotted rules, and the primary CTA fill. |
| Spice Terracotta | `#823513` | `--color-spice-terracotta` | brand | Dominant page canvas and the warm backdrop for the opening product story. |
| Roasted Cacao | `#402011` | `--color-roasted-cacao` | neutral | Small supporting text and dark lettering on saffron CTA buttons. |
| Molten Umber | `#281006` | `--color-molten-umber` | surface | Near-black brown surface for the ingredients storytelling panel. |
| Burnt Spice | `#9f531b` | `--color-burnt-spice` | accent | Minor secondary text accent; not a dominant page surface. |

### Semantic aliases

`--color-canvas` → `#823513` (Spice Terracotta) · `--color-surface` → `#281006` (Molten Umber) · `--color-text` → `#faae33` (Saffron Signal) · `--color-text-muted` → `#402011` (Roasted Cacao) · `--color-border` → `#faae33` (Saffron Signal) · `--color-accent` → `#faae33` (Saffron Signal) · `--color-accent-2` → `#823513` (Spice Terracotta) · `--color-accent-3` → `#9f531b` (Burnt Spice) · `--color-on-accent` → `#402011` (Roasted Cacao)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#faae33` | `#823513` | 4.53:1 | AA |
| `#faae33` | `#281006` | 9.57:1 | AAA |
| `#402011` | `#823513` | 1.72:1 | fail |
| `#402011` | `#281006` | 1.23:1 | fail |
| `#faae33` | `#823513` | 4.53:1 | AA |
| `#faae33` | `#281006` | 9.57:1 | AAA |

### Gradients

- `repeating-radial-gradient(circle, rgb(247, 172, 50) 0px, rgb(247, 172, 50) 2px, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0) 10px)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Salmond | `--font-body` | webfont | 500, 700, 400 | Display headlines, section titles, body copy, and captions | Archivo Black |
| Graphikx | `--font-graphikx` | webfont | 500 | Navigation and compact utility labels | DM Sans |

- **Salmond:** Use bold uppercase display lettering with tight tracking; keep supporting copy compact and mostly uppercase.
- **Graphikx:** Medium-weight uppercase utility text with restrained positive tracking.

### Type scale — Golden Ratio (ratio ≈ 1.639, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 213px | 700 | 0.8 | -0.02em | uppercase | Salmond | Hero-scale uppercase slogan spanning the opening canvas. |
| h1 | 144px | 700 | 0.9 | -0.02em | uppercase | Salmond | Primary hero title and the strongest page-level message. |
| h2 | 129.5px | 700 | 0.9 | -0.016em | uppercase | Salmond | Large uppercase titles introducing major story sections. |
| h3 | 101px | 700 | 0.88 | -0.016em | uppercase | Salmond | Secondary story headlines and ingredient statements. |
| h4 | 72px | 700 | 0.9 | -0.02em | uppercase | Salmond | Compact subsection titles in product and editorial panels. |
| body | 18px | 500 | 1 | 0 | — | Salmond | Short product storytelling and supporting explanatory copy. |
| caption | 11.5px | 500 | 1.3 | 0.02em | uppercase | Salmond | Small uppercase flavor notes and image-adjacent details. |
| nav | 13px | 500 | 1.3 | 0.01em | uppercase | Graphikx | Compact uppercase links and utility navigation. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 2, 4, 6, 8, 9, 10, 12, 16, 17, 20, 24, 26, 28, 32, 115 px.
- Section rhythm 115px · element gap 12px · card padding — · max content width 1384px.

A spacious, single-column page uses a measured maximum width of 1384px, with much of the opening design running nearly full bleed. The navigation sits across the top, the hero centers its headline and jar, and later story content shifts between left-aligned titles, centered display text, and offset imagery. Large section gaps create a slow editorial pace; the ingredients section is the main split-panel interruption. Keep smaller copy close to its related product or image, rather than filling the open canvas.

## Shape & elevation

- Radius: button `9999px` · xs `6px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.4s ease` on interactive elements.

The measured interface is predominantly flat, with no recorded shadows. Use color fields, scale, and image overlap to create hierarchy rather than card elevation. Dotted saffron rules provide decorative separation, while pill-shaped controls and the dark ingredients panel define the few strong component boundaries.

## Imagery

Product photography gives the sauce jar a central, almost floating hero presence against the textured terracotta field. Later imagery mixes product-in-hand shots with food and process photographs, including tilted documentary-style frames on the bright final section. Use the palette and image composition to make the jar legible; vivid pink backdrops and food colors belong to photography, not the core brand palette.

## Components

### Pill navigation

Compact uppercase links sit in saffron rounded pills along the top, balanced around a centered brand mark.

### Primary buy button

Use a saffron pill with Roasted Cacao lettering; the measured BUY NOW control is uppercase and bold.

### Hero product display

Pair a giant uppercase slogan with a centered sauce jar, secondary product title, and compact supporting copy.

### Dotted divider

A fine, saffron dotted horizontal rule separates the navigation and hero headline bands.

### Ingredients panel

A near-black brown content panel carries a saffron title, compact copy, and ingredient details beside product imagery.

### Editorial photo sequence

Offset, slightly rotated food and process photographs sit with short captions across a bright saffron section.

### Measured component styles

- **Primary button** (“SAUCE”): background #faae33 · text #402011 · radius 1296px · padding 0px 17.5px · 500 12.96px Graphikx · uppercase
- **Card** (“WHAT'S INSIDE OUR TIKKA MASALA SAUCE IS ”): background #281006 · text #faae33 · radius 0px · padding 0px · 500 14.4px Salmond
- **Navigation item** (“SAUCE ABOUT RECIPES GAME CONTACT BUY NOW”): transparent background · text #faae33 · radius 0px · padding 0px · 500 14.4px Salmond

## Do

- Use #823513 as the dominant canvas.
- Reserve #faae33 for high-contrast emphasis and controls.
- Set major headlines in bold uppercase Salmond-style typography.
- Let the hero jar remain the visual focal point.
- Use generous open space between story moments.
- Keep utility copy compact and subordinate.

## Don't

- Do not introduce cool corporate blues or greens.
- Do not fill the open canvas with unnecessary cards.
- Do not use soft shadows to create hierarchy.
- Do not make small copy compete with display headlines.
- Do not treat photographic pink as a core brand color.
- Do not replace the bold, warm palette with muted neutrals.

## Agent prompt

Build a new Hungry Tiger page with the same bold, warm editorial character. Use Spice Terracotta (#823513) as the main canvas and Saffron Signal (#faae33) for oversized uppercase headings, navigation pills, dotted separators, and primary actions. Use Roasted Cacao (#402011) for concise supporting text and button labels; reserve Molten Umber (#281006) for a strong content panel, with Burnt Spice (#9f531b) as a minor accent. Choose a heavy, tightly tracked display face similar to Salmond and a clean compact sans like Graphikx for navigation. Favor full-width color fields, spacious section pacing, and one clear product-photo focal point. Keep cards flat, copy short, and imagery tactile and documentary. Avoid generic shadows and unrelated palette colors.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width terracotta hero with top navigation, giant headline, and centered jar. | brand navigation, primary buy action | saffron pill links, dotted divider, oversized uppercase type |
| 2 | other | Continues the terracotta canvas with minimal visible content and generous open space. | visual breathing room | uninterrupted color field |
| 3 | feature-split | Left-aligned oversized heading with small supporting copy across a spacious single-column field. | story introduction | low-contrast display type, compact uppercase copy |
| 4 | product-showcase | Centered display headline and small carousel-like markers on the terracotta canvas. | product storytelling, slide indicators | textured headline treatment, centered composition |
| 5 | product-showcase | Open terracotta section with supporting copy, CTA, and a large lower-left display headline. | purchase prompt, brand storytelling | saffron CTA pill, oversized uppercase title |
| 6 | feature-split | Dark text panel alongside vivid product imagery, with ingredient notes and a large section title. | ingredient education, product reassurance | dark brown surface, contrasting image panel, compact ingredient labels |
| 7 | other | Continues the ingredients story with product imagery and a concise no-shortcuts statement. | brand reassurance | short emphatic copy, product photograph |
| 8 | gallery | Full-width saffron field with staggered, angled documentary food photographs. | process storytelling, visual exploration | bright color field, offset photo frames, small image captions |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/eathungrytiger-com