Skip to content
Octane Design
Library
Librarydark
brand referencedark

Hungry Tiger

Your browser does not support the preview video.
Export
---
name: "Hungry Tiger"
mode: "dark"
---

# Hungry Tiger

## Visual theme and atmosphere
Hungry Tiger is a fire-roasted condiment brand rendered as a maximalist typographic poster: a deep rust-brown canvas, a single searing Tiger Gold accent, and an absurdly oversized custom display face that swallows the viewport. The system behaves like a spice label — confident, warm, slightly aggressive — with pill-shaped controls, dotted horizontal rules, and dense botanical watermarks that suggest Indian heat without literal illustration. Text is the hero; product photography is small and isolated against the dark. Every surface shares the same warm brown family, and contrast is driven by the gold against charred browns, not by adding new hues.

Turmeric-bright graffiti on a tandoor wall. A single gold-on-rust palette with display type so large it reads as a spice market sign, not a webpage.

## Color palette and roles
- **Tiger Gold (#faae33)**: Primary action, filled buttons, active nav, heading strokes, key icon accents — the only chromatic color permitted to leave the warm-brown monochrome.
- **Ember Rust (#823513)**: Dominant page canvas and hero backdrop — the color that defines every viewport.
- **Saffron Glow (#9f531b)**: Secondary heading accent, decorative borders, mid-tone text — softens Tiger Gold without competing.
- **Chili Red (#d1255c)**: Saturated accent reserved for badge fills and alert-level highlights — appears sparingly to signal heat.
- **Charred Clove (#281006)**: Deepest surface — innermost cards, modal scrim, background behind the deepest contrast pairs.
- **Dark Spice (#402011)**: Card surfaces, input fields, badge fills, button ghost backgrounds, body text — the workhorse dark-brown.
- **Cardamom Brown (#6b2e12)**: Input borders, subtle dividers, muted inline elements — a step between Dark Spice and Ember Rust.

## Typography rules
- **Display**: Salmond, 700, 213px. Poster-scale hero headlines, line-height clamped 0.80–0.90. Fallback: Druk Wide, Antonio, Bebas Neue..
- **Body**: Graphikx, 500, 13px. Body micro-copy, button labels, inline meta where Salmond would feel too loud. Fallback: Inter, Geist, Untitled Sans..

## Spacing and shape
- Base unit: 10px.
- Default gap: 10px.
- Card padding: 16px.
- Section padding: 96px.
- Card corners: 6px.
- Control corners: 6px.
- Pills: 999px.

## Motion
Use expressive motion. Fast feedback lasts 160ms; composed transitions last 500ms; easing is cubic-bezier(0.22, 1, 0.36, 1).

## Guardrails
- Keep the warm-brown monochrome dominant across every viewport.
- Reserve Tiger Gold for the few elements that must interrupt the field.
- Use dense uppercase display type with generous body spacing.
- Avoid adding cool colors or polished corporate surfaces.
---
name: "Hungry Tiger"
mode: "dark"
---

# Hungry Tiger

## Visual theme and atmosphere
Hungry Tiger is a fire-roasted condiment brand rendered as a maximalist typographic poster: a deep rust-brown canvas, a single searing Tiger Gold accent, and an absurdly oversized custom display face that swallows the viewport. The system behaves like a spice label — confident, warm, slightly aggressive — with pill-shaped controls, dotted horizontal rules, and dense botanical watermarks that suggest Indian heat without literal illustration. Text is the hero; product photography is small and isolated against the dark. Every surface shares the same warm brown family, and contrast is driven by the gold against charred browns, not by adding new hues.

Turmeric-bright graffiti on a tandoor wall. A single gold-on-rust palette with display type so large it reads as a spice market sign, not a webpage.

## Color palette and roles
- **Tiger Gold (#faae33)**: Primary action, filled buttons, active nav, heading strokes, key icon accents — the only chromatic color permitted to leave the warm-brown monochrome.
- **Ember Rust (#823513)**: Dominant page canvas and hero backdrop — the color that defines every viewport.
- **Saffron Glow (#9f531b)**: Secondary heading accent, decorative borders, mid-tone text — softens Tiger Gold without competing.
- **Chili Red (#d1255c)**: Saturated accent reserved for badge fills and alert-level highlights — appears sparingly to signal heat.
- **Charred Clove (#281006)**: Deepest surface — innermost cards, modal scrim, background behind the deepest contrast pairs.
- **Dark Spice (#402011)**: Card surfaces, input fields, badge fills, button ghost backgrounds, body text — the workhorse dark-brown.
- **Cardamom Brown (#6b2e12)**: Input borders, subtle dividers, muted inline elements — a step between Dark Spice and Ember Rust.

## Typography rules
- **Display**: Salmond, 700, 213px. Poster-scale hero headlines, line-height clamped 0.80–0.90. Fallback: Druk Wide, Antonio, Bebas Neue..
- **Body**: Graphikx, 500, 13px. Body micro-copy, button labels, inline meta where Salmond would feel too loud. Fallback: Inter, Geist, Untitled Sans..

## Spacing and shape
- Base unit: 10px.
- Default gap: 10px.
- Card padding: 16px.
- Section padding: 96px.
- Card corners: 6px.
- Control corners: 6px.
- Pills: 999px.

## Motion
Use expressive motion. Fast feedback lasts 160ms; composed transitions last 500ms; easing is cubic-bezier(0.22, 1, 0.36, 1).

## Guardrails
- Keep the warm-brown monochrome dominant across every viewport.
- Reserve Tiger Gold for the few elements that must interrupt the field.
- Use dense uppercase display type with generous body spacing.
- Avoid adding cool colors or polished corporate surfaces.
---
name: "Hungry Tiger"
mode: "dark"
---

# Hungry Tiger

## Visual theme and atmosphere
Hungry Tiger is a fire-roasted condiment brand rendered as a maximalist typographic poster: a deep rust-brown canvas, a single searing Tiger Gold accent, and an absurdly oversized custom display face that swallows the viewport. The system behaves like a spice label — confident, warm, slightly aggressive — with pill-shaped controls, dotted horizontal rules, and dense botanical watermarks that suggest Indian heat without literal illustration. Text is the hero; product photography is small and isolated against the dark. Every surface shares the same warm brown family, and contrast is driven by the gold against charred browns, not by adding new hues.

Turmeric-bright graffiti on a tandoor wall. A single gold-on-rust palette with display type so large it reads as a spice market sign, not a webpage.

## Color palette and roles
- **Tiger Gold (#faae33)**: Primary action, filled buttons, active nav, heading strokes, key icon accents — the only chromatic color permitted to leave the warm-brown monochrome.
- **Ember Rust (#823513)**: Dominant page canvas and hero backdrop — the color that defines every viewport.
- **Saffron Glow (#9f531b)**: Secondary heading accent, decorative borders, mid-tone text — softens Tiger Gold without competing.
- **Chili Red (#d1255c)**: Saturated accent reserved for badge fills and alert-level highlights — appears sparingly to signal heat.
- **Charred Clove (#281006)**: Deepest surface — innermost cards, modal scrim, background behind the deepest contrast pairs.
- **Dark Spice (#402011)**: Card surfaces, input fields, badge fills, button ghost backgrounds, body text — the workhorse dark-brown.
- **Cardamom Brown (#6b2e12)**: Input borders, subtle dividers, muted inline elements — a step between Dark Spice and Ember Rust.

## Typography rules
- **Display**: Salmond, 700, 213px. Poster-scale hero headlines, line-height clamped 0.80–0.90. Fallback: Druk Wide, Antonio, Bebas Neue..
- **Body**: Graphikx, 500, 13px. Body micro-copy, button labels, inline meta where Salmond would feel too loud. Fallback: Inter, Geist, Untitled Sans..

## Spacing and shape
- Base unit: 10px.
- Default gap: 10px.
- Card padding: 16px.
- Section padding: 96px.
- Card corners: 6px.
- Control corners: 6px.
- Pills: 999px.

## Motion
Use expressive motion. Fast feedback lasts 160ms; composed transitions last 500ms; easing is cubic-bezier(0.22, 1, 0.36, 1).

## Guardrails
- Keep the warm-brown monochrome dominant across every viewport.
- Reserve Tiger Gold for the few elements that must interrupt the field.
- Use dense uppercase display type with generous body spacing.
- Avoid adding cool colors or polished corporate surfaces.
---
name: "Hungry Tiger"
mode: "dark"
---

# Hungry Tiger

## Visual theme and atmosphere
Hungry Tiger is a fire-roasted condiment brand rendered as a maximalist typographic poster: a deep rust-brown canvas, a single searing Tiger Gold accent, and an absurdly oversized custom display face that swallows the viewport. The system behaves like a spice label — confident, warm, slightly aggressive — with pill-shaped controls, dotted horizontal rules, and dense botanical watermarks that suggest Indian heat without literal illustration. Text is the hero; product photography is small and isolated against the dark. Every surface shares the same warm brown family, and contrast is driven by the gold against charred browns, not by adding new hues.

Turmeric-bright graffiti on a tandoor wall. A single gold-on-rust palette with display type so large it reads as a spice market sign, not a webpage.

## Color palette and roles
- **Tiger Gold (#faae33)**: Primary action, filled buttons, active nav, heading strokes, key icon accents — the only chromatic color permitted to leave the warm-brown monochrome.
- **Ember Rust (#823513)**: Dominant page canvas and hero backdrop — the color that defines every viewport.
- **Saffron Glow (#9f531b)**: Secondary heading accent, decorative borders, mid-tone text — softens Tiger Gold without competing.
- **Chili Red (#d1255c)**: Saturated accent reserved for badge fills and alert-level highlights — appears sparingly to signal heat.
- **Charred Clove (#281006)**: Deepest surface — innermost cards, modal scrim, background behind the deepest contrast pairs.
- **Dark Spice (#402011)**: Card surfaces, input fields, badge fills, button ghost backgrounds, body text — the workhorse dark-brown.
- **Cardamom Brown (#6b2e12)**: Input borders, subtle dividers, muted inline elements — a step between Dark Spice and Ember Rust.

## Typography rules
- **Display**: Salmond, 700, 213px. Poster-scale hero headlines, line-height clamped 0.80–0.90. Fallback: Druk Wide, Antonio, Bebas Neue..
- **Body**: Graphikx, 500, 13px. Body micro-copy, button labels, inline meta where Salmond would feel too loud. Fallback: Inter, Geist, Untitled Sans..

## Spacing and shape
- Base unit: 10px.
- Default gap: 10px.
- Card padding: 16px.
- Section padding: 96px.
- Card corners: 6px.
- Control corners: 6px.
- Pills: 999px.

## Motion
Use expressive motion. Fast feedback lasts 160ms; composed transitions last 500ms; easing is cubic-bezier(0.22, 1, 0.36, 1).

## Guardrails
- Keep the warm-brown monochrome dominant across every viewport.
- Reserve Tiger Gold for the few elements that must interrupt the field.
- Use dense uppercase display type with generous body spacing.
- Avoid adding cool colors or polished corporate surfaces.
---
name: "Hungry Tiger"
mode: "dark"
---

# Hungry Tiger

## Visual theme and atmosphere
Hungry Tiger is a fire-roasted condiment brand rendered as a maximalist typographic poster: a deep rust-brown canvas, a single searing Tiger Gold accent, and an absurdly oversized custom display face that swallows the viewport. The system behaves like a spice label — confident, warm, slightly aggressive — with pill-shaped controls, dotted horizontal rules, and dense botanical watermarks that suggest Indian heat without literal illustration. Text is the hero; product photography is small and isolated against the dark. Every surface shares the same warm brown family, and contrast is driven by the gold against charred browns, not by adding new hues.

Turmeric-bright graffiti on a tandoor wall. A single gold-on-rust palette with display type so large it reads as a spice market sign, not a webpage.

## Color palette and roles
- **Tiger Gold (#faae33)**: Primary action, filled buttons, active nav, heading strokes, key icon accents — the only chromatic color permitted to leave the warm-brown monochrome.
- **Ember Rust (#823513)**: Dominant page canvas and hero backdrop — the color that defines every viewport.
- **Saffron Glow (#9f531b)**: Secondary heading accent, decorative borders, mid-tone text — softens Tiger Gold without competing.
- **Chili Red (#d1255c)**: Saturated accent reserved for badge fills and alert-level highlights — appears sparingly to signal heat.
- **Charred Clove (#281006)**: Deepest surface — innermost cards, modal scrim, background behind the deepest contrast pairs.
- **Dark Spice (#402011)**: Card surfaces, input fields, badge fills, button ghost backgrounds, body text — the workhorse dark-brown.
- **Cardamom Brown (#6b2e12)**: Input borders, subtle dividers, muted inline elements — a step between Dark Spice and Ember Rust.

## Typography rules
- **Display**: Salmond, 700, 213px. Poster-scale hero headlines, line-height clamped 0.80–0.90. Fallback: Druk Wide, Antonio, Bebas Neue..
- **Body**: Graphikx, 500, 13px. Body micro-copy, button labels, inline meta where Salmond would feel too loud. Fallback: Inter, Geist, Untitled Sans..

## Spacing and shape
- Base unit: 10px.
- Default gap: 10px.
- Card padding: 16px.
- Section padding: 96px.
- Card corners: 6px.
- Control corners: 6px.
- Pills: 999px.

## Motion
Use expressive motion. Fast feedback lasts 160ms; composed transitions last 500ms; easing is cubic-bezier(0.22, 1, 0.36, 1).

## Guardrails
- Keep the warm-brown monochrome dominant across every viewport.
- Reserve Tiger Gold for the few elements that must interrupt the field.
- Use dense uppercase display type with generous body spacing.
- Avoid adding cool colors or polished corporate surfaces.

Overview

Turmeric-bright graffiti on a tandoor wall. A single gold-on-rust palette with display type so large it reads as a spice market sign, not a webpage.

Hungry Tiger is a fire-roasted condiment brand rendered as a maximalist typographic poster: a deep rust-brown canvas, a single searing Tiger Gold accent, and an absurdly oversized custom display face that swallows the viewport. The system behaves like a spice label — confident, warm, slightly aggressive — with pill-shaped controls, dotted horizontal rules, and dense botanical watermarks that suggest Indian heat without literal illustration. Text is the hero; product photography is small and isolated against the dark. Every surface shares the same warm brown family, and contrast is driven by the gold against charred browns, not by adding new hues.

Color palette

7 semantic roles

Tiger Gold

#faae33

Ember Rust

#823513

Saffron Glow

#9f531b

Chili Red

#d1255c

Charred Clove

#281006

Dark Spice

#402011

Cardamom Brown

#6b2e12

Specification

Type scale · Fonts · Spacing & Shape · Guidelines

  1. 213px213px · 700 · 0.8

    The quick brown fox jumps

  2. display195px · 700 · 1

    The quick brown fox jumps

  3. 144px144px · 700 · 0.9

    The quick brown fox jumps

  4. heading-lg101px · 700 · 0.88

    The quick brown fox jumps

  5. 72px72px · 700 · 0.9

    The quick brown fox jumps

  6. heading65px · 700 · 0.9

    The quick brown fox jumps

  7. 43px43px · 500 · 0.7

    The quick brown fox jumps

  8. 42px42px · 700 · 0.95

    The quick brown fox jumps

Display

Salmond

Weight
400, 500, 700
Sizes
11–213px · 16 values
Line height
0.70–1.43 (tight 0.70–0.95 for display 65px+, generous 1.20–1.43 for 11–18px UI)
Letter spacing
-0.02em at 213px down to 0.02em at 11px — scales inversely with size
Fallback
Druk Wide, Antonio, Bebas Neue (display); Inter or Untitled Sans (small sizes)

Universal typeface: display headlines at 130–213px weight 700 with line-height clamped to 0.80–0.90 create the poster-scale hero, while the same family drops to 11–18px for nav, badges, and body. This single-font-everywhere choice is the brand's strongest signature.

Body

Graphikx

Weight
500
Sizes
13px
Line height
1.00–1.30
Letter spacing
-0.02em to 0.01em
Fallback
Inter, Geist, Untitled Sans

Restricted to 13px weight 500 for body micro-copy, button labels, and inline meta where Salmond would feel too loud. Acts as a quiet functional voice against Salmond's shout.

Spacing

Density
comfortable
Max width
1440px
Section gap
80–120px
Card padding
12–16px
Element gap
10px

Border Radius

cards
6px
  • Use Salmond at 130–213px weight 700 with line-height 0.80–0.90 for all hero and section display headlines — this is the brand's voice and must never be downsized into body territory.
  • Set all buttons, badges, inputs, and icon containers to full pill radius — sharp corners break the spice-label personality.
  • Use only #faae33 as the chromatic accent against the brown monochrome; never introduce additional bright colors except the reserved #d1255c for heat-level badges.
  • Step surface depth through three browns: #823513 (page) → #402011 (card) → #281006 (deepest) — never use box-shadow to imply elevation.
  • Apply dotted #faae33 horizontal rules as section dividers between major viewports instead of relying on whitespace alone.
  • Tighten letter-spacing inversely to size: -0.02em at display sizes, 0.01–0.02em at 11–18px — Salmond's tracking is load-bearing.
  • Crown every viewport with massive type first, then position product photography as a small anchored element below — the page is a poster, not a storefront.
  • Do not introduce a secondary display typeface — Salmond owns the entire type system, and adding a different heading face dilutes the brand voice.
  • Do not use box-shadow, drop-shadow, or glow effects on any component — the flat tandoor-wall aesthetic is non-negotiable.
  • Do not place product photography in large rectangular frames, cards, or with rounded edges — the bottle should sit raw on the canvas.
  • Do not use the 6px card radius for anything other than cards — buttons, badges, inputs, and icon containers must all be full pills.
  • Do not dilute the gold-on-brown palette with white, blue, green, or cool neutrals — the system is intentionally monochromatic-warm.
  • Do not let body copy exceed 18px or sit at more than 1.4 line-height — the design is poster-first and any comfortable reading block will feel out of place.
  • Do not use solid color blocks for section backgrounds — every section is Ember Rust; depth comes from type scale and surface color shifts, not from alternating bands.

Templates

5 page patterns

Storefront3 patterns

Faithful rebuild of the eathungrytiger.com homepage anatomy from the captured screen recording: pill nav, dotted section rules, poster-scale BOLD FLAVOR headline, tilted jar hero, and a split What's Inside panel with ingredient icons over a chili-red art panel.

navigationproduct heropromo grid

Related systems

sweetgreen website with forest green and cream canvas

sweetgreen

Farm-stand-meets-modern-typography — deep forest on cream canvas with lime glow accent.

light
Gigantic candy brand website preview

Gigantic

A punk-rock candy wrapper with bold display type and saturated contrast.

light
Claude AI interface with warm parchment tones

Claude

Warm parchment printed artifact — ink on bone paper, clay as the only chromatic breath.

light