---
version: alpha
name: Hungry Tiger
description: "Chili-brick ground, amber type at billboard scale, a jar tumbling through it"
colors:
  surface: "#823513"
  outline: "#D99923"
  on-surface: "#FAAE33"
  primary: "rgba(247, 172, 50, 0.25)"
  roast-brown: "#402011"
  char: "#281006"
  saffron: "#F7AC32"
  masala-pink: "#D1255C"
  arcade-field: "#111111"
  root-black: "#000000"
  hairline-brown: "rgba(64, 32, 17, 0.35)"
  image-scrim: "rgba(0, 0, 0, 0.14)"
typography:
  meta-tag:
    fontFamily: Salmond
    fontSize: 14.4px
    fontWeight: 400
    lineHeight: 14.4px
    letterSpacing: 0.144px
  label-button:
    fontFamily: Salmond
    fontSize: 15.36px
    fontWeight: 400
    lineHeight: 15.36px
    letterSpacing: -0.3072px
  body:
    fontFamily: Salmond
    fontSize: 16.32px
    fontWeight: 400
    lineHeight: 22.848px
    letterSpacing: 0.1632px
  nav-label:
    fontFamily: Salmond
    fontSize: 17.28px
    fontWeight: 400
    lineHeight: 22.464px
    letterSpacing: 0.1728px
  numeral-chip:
    fontFamily: Salmond
    fontSize: 24px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0em
  card-subhead:
    fontFamily: Salmond
    fontSize: 38.4px
    fontWeight: 400
    lineHeight: 38.4px
    letterSpacing: -0.384px
  card-heading:
    fontFamily: Salmond
    fontSize: 48px
    fontWeight: 400
    lineHeight: 52.8px
    letterSpacing: 0.48px
  cta-heading:
    fontFamily: Salmond
    fontSize: 55.68px
    fontWeight: 400
    lineHeight: 52.896px
    letterSpacing: -0.5568px
  section-heading:
    fontFamily: Salmond
    fontSize: 86.4px
    fontWeight: 400
    lineHeight: 77.76px
    letterSpacing: -0.432px
  display:
    fontFamily: Salmond
    fontSize: 172.8px
    fontWeight: 400
    lineHeight: 155.52px
    letterSpacing: -2.7648px
  wordmark:
    fontFamily: Salmond
    fontSize: 260.16px
    fontWeight: 400
    lineHeight: 260.16px
    letterSpacing: -2.6016px
  hero:
    fontFamily: Salmond
    fontSize: 284.16px
    fontWeight: 400
    lineHeight: 227.328px
    letterSpacing: -5.6832px
rounded:
  nav-pill-cart-button-subscribe-button: 1728px
  input-field-ingredient-chip: 1632px
  primary-button: 1536px
  score-readout: 1500px
  recipe-meta-tag: 1440px
  game-canvas: 12px
  recipe-card: 6px
  card-image-well: 5px
  full-bleed-bands: 0px
spacing:
  hairline: 2px
  cluster: 4px
  inline: 6px
  tight: 10px
  snug: 12px
  card-inset: 14px
  grid: 16px
  control-inset: 20px
  list: 20px
  wide: 28px
  section-short: 96px
  section-mid: 112px
  section: 153.6px
  section-tall: 192px
---
# Hungry Tiger — Style Reference
> Chili-brick ground, amber type at billboard scale, a jar tumbling through it

**Theme:** dark

The site runs one palette in two directions. The sauce, about and recipes pages stand on a fire-brick ground with amber ink and amber pills; the arcade page turns the same idea over — a saffron field, roast-brown type, roast-brown controls — so the split falls at the game and nowhere else. Salmond does nearly all the talking: headlines are set at display sizes with tracking pulled hard negative and line-height squeezed under the cap height, so a headline reads as a slab, not a line of words. Everything a finger could touch is a pill — nav links, buttons, form fields, meta tags all carry radii far larger than their own height — and rectangular geometry is held back for the full-bleed bands and the recipe cards. Depth is handled without shadow: it arrives as a drop in luminance to the charred brown of the footer, or as a single translucent hairline.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Tiger Amber | `#FAAE33` | `--color-amber` | The ink and the interface. It paints nearly all type on the brick ground and fills every pill control (`.h-link.w-inline-block`, `.button.w-inline-block`, `.cart_button`); when it fills, the label on it flips to Roast Brown. |
| Ember Brick | `#823513` | `--color-brick` | The canvas. Its carriers `.mac`, `.hero_section` and `.background_hero` paint it as fill, as does `.tag_recipe` behind the recipe meta label; the painted census records no text observation for it. |
| Roast Brown | `#402011` | `--color-roast` | The reverse ink — type on any amber field — and the fill of the dark controls (`.subscribe_button.w-button`, `.back_link.w-inline-block`, `.arrow-left`). |
| Char | `#281006` | `--color-char` | The deepest plane. Carried by `.footer`, `.left_side` and `.fullsize.dark_brown`; it is a band colour, not a card colour. |
| Saffron | `#F7AC32` | `--color-saffron` | A half-step off Tiger Amber, reserved for the arcade canvas (`body.body_game.mac`), the dotted rule and the "Score: 0" readout. Do not substitute it for `--color-amber` in UI. |
| Masala Pink | `#D1255C` | `--color-pink` | Editorial accent. Its carriers are the three ingredient chips `.tag_one.ff`, `.tag_one.ss` and `.tag_one.tt`, all of which paint it as fill — no control row and no text row carries it. |
| Arcade Field | `#111111` | `--color-field` | The near-black behind the game: its single carrier is the `canvas` on the game page, so it belongs to the arcade and not to the marketing bands. |
| Arcade Edge | `#D99923` | `--color-field-edge` | The 1px border on that same game `canvas` — a dimmer amber, used to keep the play field from cutting a hole in the saffron page. |
| Root Black | `#000000` | `--color-root` | The document default, carried as a text colour by `html.w-mod-js.w-mod-ix` and inherited from there — keep it in the reset, out of the design. |
| Ghost Amber | `rgba(247, 172, 50, 0.25)` | `--color-amber-ghost` | Display type that sits back into the brick: `.h2_middle.text-textured` and its `.char` spans. The signature move — a headline that recedes instead of a headline that is smaller. |
| Hairline Brown | `rgba(64, 32, 17, 0.35)` | `--color-hairline` | The only **translucent** line — 8 border observations, on `.field_input…w-input` (×6) and `.cms_item.w-dyn-item` (×2). Opaque hairlines: `1px #FAAE33` (11 — `.circle_inside`, `.circle_highlight`, `.tag_one.ff/.ss/.tt`), `1px #402011` (3 — `.circle_inside.dark_brown`), `#D99923` on the game `canvas` (1). Both carriers sit on amber; it is not a divider for the brick ground. |
| Image Scrim | `rgba(0, 0, 0, 0.14)` | `--color-scrim` | A single wash on `.overlay_image` — just enough to hold amber type over photography. |
| Dotted Rule | `linear-gradient(#F7AC32, #F7AC32)` | `--gradient-rule` | A flat two-stop gradient on `.dotted_line`, repeated across the width as dots. A gradient used as a texture, not as a shade. |

## Tokens — Typography

### Salmond — the whole voice: display, headings, body, labels and form ink, heavy at the top of the scale and medium at the bottom · `--font-salmond`
- **Substitute:** Founders Grotesk, Neue Haas Grotesk Display, Archivo Black
- **Weights:** 400, 500, 700
- **Sizes:** 14.4, 15.36, 16.32, 17.28, 19.2, 23.04, 24, 38.4, 48, 55.68, 57.6, 72, 86.4, 90.24, 96, 124.8, 134.4, 172.8, 192, 222.72, 260.16, 284.16px
- **Line height:** 0.8 at the top (227.328px on 284.16px) rising to 1.6 at the bottom (24.576px on 15.36px)
- **Letter spacing:** negative and proportional above the subhead — −5.6832px on 284.16px, −2.7648px on 172.8px, −0.384px on 38.4px — and positive below it: +0.3072px on 15.36px, +0.1632px on 16.32px, +0.144px on 14.4px
- **Role:** display, headings, body, labels and form ink; weight 700 for every heading row the census measures, weight 500 for body, tags and input text

### Graphikx — the header's own label face, measured at a single size and weight · `--font-graphikx`
- **Substitute:** Graphik, Söhne, Inter
- **Weights:** 500
- **Sizes:** 17.28px
- **Line height:** 22.464px on `.txt_header`, the nav label row; 17.28px on a 45-element amber row the census leaves unclassed (div ×42 + span ×3, p1 p2 p3)
- **Letter spacing:** +0.1728px on the nav labels, −0.3456px on `.buynow_mobile.w-inline-block`
- **Role:** the header micro-labels `.txt_header` and `.buynow_mobile.w-inline-block`, plus a 45-element unclassed amber row — every one of which the census measures at 17.28px/500

### sans-serif — the stack fallback · `--font-fallback`
- **Substitute:** system-ui, Helvetica Neue, Arial
- **Weights:** 400
- **Sizes:** not measured
- **Line height:** not measured
- **Letter spacing:** not measured
- **Role:** carried by `html.w-mod-js.w-mod-ix` with `#000000` — the browser default beneath the two real faces, visible nowhere in the tiles

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Meta tag | 14.4px | 14.4px | 0.144px | `--text-tag` |
| Label / button | 15.36px | 15.36px | −0.3072px | `--text-label` |
| Body | 16.32px | 22.848px | 0.1632px | `--text-body` |
| Nav label | 17.28px | 22.464px | 0.1728px | `--text-nav` |
| Numeral chip | 24px | 24px | normal | `--text-numeral` |
| Card subhead | 38.4px | 38.4px | −0.384px | `--text-subhead` |
| Card heading | 48px | 52.8px | 0.48px | `--text-heading` |
| CTA heading | 55.68px | 52.896px | −0.5568px | `--text-cta` |
| Section heading | 86.4px | 77.76px | −0.432px | `--text-section` |
| Display | 172.8px | 155.52px | −2.7648px | `--text-display` |
| Wordmark | 260.16px | 260.16px | −2.6016px | `--text-wordmark` |
| Hero | 284.16px | 227.328px | −5.6832px | `--text-hero` |

## Tokens — Spacing & Shapes

**Base unit:** 2px   **Density:** comfortable

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| Hairline | 2px | `--space-1` |
| Cluster | 4px | `--space-2` |
| Inline | 6px | `--space-3` |
| Tight | 10px | `--space-4` |
| Snug | 12px | `--space-5` |
| Card inset | 14px | `--space-6` |
| Grid | 16px | `--space-7` |
| Control inset | 20px | `--space-8` |
| List | 20px | `--space-9` |
| Wide | 28px | `--space-10` |
| Section, short | 96px | `--space-section-sm` |
| Section, mid | 112px | `--space-section-md` |
| Section | 153.6px | `--space-section` |
| Section, tall | 192px | `--space-section-lg` |

### Border Radius

| Element | Value |
|---------|-------|
| Nav pill, cart button, subscribe button | 1728px |
| Input field, ingredient chip | 1632px |
| Primary button | 1536px |
| Score readout | 1500px |
| Recipe meta tag | 1440px |
| Circles: icon buttons, numerals, social link | 100% |
| Game canvas | 12px |
| Recipe card | 6px |
| Card image well | 5px |
| Full-bleed bands (`.footer`, `.left_discount`, `.mac`) | 0px |

### Layout

- **Page max-width:** none. The `.mac` body box measures 1920px at the captured viewport and the horizontal-inset census finds no side padding of 48px or more on any section, so bands run edge to edge.
- **Section gap:** 153.6px is the dominant rhythm (`.wrapper_hero`, `.wrapper`, `.wrapper_hero.bottom_side`), with 192px on `.wrapper_base`, 112px on `.wrapper_base.tradition_creation` and 96px on `.wrapper.sticky_spec`.
- **Card padding:** 14px on `.recipe_card`.
- **Element gap:** 16px across the recipe grid (`.grid_recipes.w-dyn-items`), 12px in the CTA stack (`.container_cta`, `.left_cta`), 4px between link clusters (`.left_links`, `.right_links`, `.fixed_icons`), 2px between the dots of `.dotted_line`.

## Components

### Pill Nav Link
**Role:** The primary wayfinding control in the header — sauce, about, recipes, game, each in its own capsule.
Built from `.h-link.w-inline-block`: an `a` filled `#FAAE33`, padding `0px 23.328px`, radius `1728px`, no border, no shadow, box 79–99×48px — width tracks the word, height is fixed. The label belongs to the `.txt_header` text row: Graphikx 17.28px/500, line-height 22.464px, tracking +0.1728px, ink `#402011`. The current-page twin `.h-link.w-inline-block.w--current` measures identically at box 84–94×48px, so the active state is not signalled by the capsule — it is signalled by the page. Set them in a 4px cluster and let the gaps, not outlines, do the separating.

### Header Cart Button
**Role:** The buy action pinned to the top right, label plus basket glyph.
`.w-commerce-commercecartopenlink.cart_button.w-inline-block` is an `a` filled `#FAAE33`, padding `0px 23.328px`, radius `1728px`, no border, no shadow, box 126×50px, type 17.28px/500 with line-height 17.28px and tracking −0.3456px. The icon sits beside the label on a 6px gap — that row names this class, and 6px is the whole spacing idea here: glyph and word read as one object. It is two pixels taller than a nav pill and the same amber, so it reads as a sibling that happens to be first among equals rather than a coloured exception.

### Primary Button
**Role:** The standing call to action in body content — "buy now" under a paragraph.
`.button.w-inline-block` is an `a` filled `#FAAE33`, padding `20px 32px`, radius `1536px`, no border, no shadow, with the label at 15.36px/700, tracking −0.3072px and ink `#402011` from the `.button_txt` row. It measures two ways: box 134×51px with line-height 15.36px, and box 134×54px with line-height 18.432px — same padding, same radius, three pixels of difference. Weight 700 at 15.36px is the only place in the system where small type goes bold; that is what makes it read as an action. The sibling `.button.recipes_spec.w-inline-block` carries "all recipes": same fill, padding `20px 32px`, radius `1536px` and 15.36px/700 label, but its own box — 155–262×51px across 2 anchors on p1 and p2.

### Hero Display Heading
**Role:** The first and largest statement on a page — the line you read from across the room.
The home hero `"bold flavor" .h1` is Salmond 284.16px/700, line-height 227.328px, tracking −5.6832px, ink `#FAAE33`. Line-height at 0.8 of the size means a two-word line overlaps its own leading; tracking at −0.02em closes the words into a single mass. The about page runs the same construction one step down at 222.72px with −4.4544px on `.h1.about_hh`. Set it flush left against the edge of the band, cap-height to cap-height, and never letterspace it back out to "readable" — the crowding is the design.

### Ghost Display Heading
**Role:** A headline that sits behind the product shot instead of in front of it.
`.h2_middle.text-textured` is Salmond 192px/700, line-height 172.8px, tracking −3.84px, ink `rgba(247, 172, 50, 0.25)` — Saffron at a quarter strength over the brick ground, split into per-character `.char` and `.word` spans for animation. In the tiles the same class also carries a leaf-pattern fill clipped inside the letterforms, so the word can be pattern or ghost. Use it once per band as the quiet half of a two-tone headline; at full opacity it would compete with the hero and the composition collapses.

### Meta Tag
**Role:** The recipe card's two facts — what it is, how long it takes.
`.tag_recipe` is a `div` filled `#823513` with ink `#FAAE33`, type 14.4px/500, line-height 14.4px, tracking +0.144px, padding `12px 12px`, radius `1440px`, no border, no shadow, box 64–95×34px. It is the one place the canvas colour becomes a foreground fill, and that is exactly why it works: on the amber card, a brick chip reads as a hole punched back to the page. Keep the pair on one row and let the width float with the word — the row's gap is `not measured`.

### Recipe Card
**Role:** The repeating unit of the recipes grid — image, two tags, title, one line of description.
`.recipe_card` is a `div` filled `#FAAE33`, padding `14px 14px`, radius `6px`, no border, no shadow, box 611×722px, nine of them across the capture. Inside, `.recipe_image` is an unfilled well at radius `5px`, box 583×461px — a one-pixel radius difference from its parent, which is what keeps the photograph looking inset rather than pasted on. The title comes from `.h4.recipe_heading` at 38.4px/700, tracking −0.384px, ink `#402011`, and the body line from `.desc_recipe` at 16.32px/500, line-height 22.848px. Three across on a 16px gap.

### Dotted Rule
**Role:** The one horizontal divider the system owns — under the header, under the hero line, above the legal row.
`.dotted_line` paints a two-stop gradient from `#F7AC32` to `#F7AC32` — a flat colour expressed as a gradient — repeated along a 2px gap, fourteen of them across the marketing pages. Height is `not measured`. It is a dotted rule rather than a solid one because a solid amber line at this width would read as a second nav bar; the dots hold the same brightness and lose the weight. Never thicken it into a border, and never use it to divide cards.

### Newsletter Field
**Role:** Name and email capture in the subscribe band.
`.field_input.w-node-_3663edf5-75b3-a610-5de9-ee4580a4a8aa-80a4a89d.w-input` is an unfilled `input`, ink `#402011`, type 16.32px/500 with line-height 23.3143px and tracking +0.1632px, padding `16px 20px`, radius `1632px`, border `1px rgba(64, 32, 17, 0.35)`, no shadow, box 450×54px. Its sibling row `…a8ab…` measures identically, so the pair sits as equals side by side. Transparent fill on the amber panel plus a 35 % brown hairline is the whole treatment — the field is drawn by its outline, never by a lighter box.

### Subscribe Button
**Role:** The submit control under those two fields, and the only dark button on the marketing pages.
`.subscribe_button.w-button` is an `input` filled `#402011` with ink `#FAAE33`, type 17.28px/500, line-height 17.28px, tracking −0.1728px, padding `16px 42px`, radius `1728px`, no border, no shadow, box 904×54px — full width of both fields combined, the same 54px height. The inversion is deliberate: on an amber panel an amber button would disappear, so the system flips ink and fill rather than introducing a new colour. Keep the 42px horizontal inset even at full width; it centres the label inside the capsule.

### Footer Band
**Role:** The closing plane — wordmark, four link columns, address, social.
`.footer` is a `section` filled `#281006`, padding `0px 0px`, radius `0px`, no border, no shadow, box 1920×857px: full bleed, square, and the darkest surface in the capture. The wordmark above the columns is `.footer_txt` at Salmond 260.16px/700, line-height 260.16px, tracking −2.6016px, ink `#FAAE33`. The social control is `.instagram_link.w-inline-block`, an `a` filled `#FAAE33`, padding `10px 10px`, radius `100%`, box 48×48px.

### Arcade Chrome
**Role:** The control set of the game page — leave, score, and four directional pads.
The exit is `.back_link.w-inline-block`: an `a` filled `#402011` with label `#FAAE33` at 15.36px/500, padding `14px 16px`, radius `1536px`, no border, no shadow; box `not measured`. The readout beside it is a `div` filled `#402011`, padding `10px 16px`, radius `1500px`, no border, no shadow, carrying the text "Score: 0" in `#F7AC32`. Both are the marketing system's pill geometry with fill and ink exchanged, which is how the arcade page stays recognisable while running the palette backwards. Beside them sit four circular `.arrow-left` pads — `div`s filled `#402011`, padding `12px 12px`, radius 100%.

## Do's and Don'ts

### Do
- Set headlines in Salmond 700 and let size carry hierarchy: 284.16px, 222.72px, 172.8px, 134.4px, 124.8px, 86.4px are all one weight.
- Pull tracking negative at display sizes and positive at body sizes — a tendency, not a rule: `.card_heading` runs +0.48px at 48px, and `.button_txt`, `.buynow_mobile.w-inline-block`, `.subscribe_button.w-button`, `.tag_one.ff` and `.number_chapter` all run negative under 38.4px.
- Fill controls with `--color-amber` and set their labels in `--color-roast`; invert to a `--color-roast` fill only where the panel is already amber, as `.subscribe_button.w-button` does.
- Use `--color-brick` as a foreground fill only where it reads as a hole in an amber surface, the way `.tag_recipe` does on `.recipe_card`.
- Draw inputs with the `rgba(64, 32, 17, 0.35)` hairline and no fill, as both `.field_input…w-input` rows do.
- Let bands run edge to edge — the inset census records no side padding of 48px or more on any section.
- Keep the vertical rhythm at 153.6px between bands — `.wrapper_hero`, `.wrapper` and `.wrapper_hero.bottom_side` all carry it — and step to 192px on the product bands `.wrapper_base` and `.wrapper_base.special_jar`.

### Don't
- Don't add a shadow. The shadow column reads `none` on every measured row — `.recipe_card`, `.subscribe_button.w-button`, `.footer`, `.tag_recipe` included — and a lift would break a system that separates planes by luminance alone.
- Don't round a card like a control. Cards sit at 6px and their image wells at 5px; controls round fully at 1440–1728px.
- Don't spend `--color-pink` on a button or a headline: its carriers are the chips `.tag_one.ff`, `.tag_one.ss` and `.tag_one.tt`, and that scarcity is the effect.
- Don't set body copy in Graphikx — that family measures at 17.28px/500 and nowhere else.
- Don't letterspace the display sizes back toward zero, and don't raise their line-height above the cap height; the overlap is the brand's posture.
- Don't introduce a mid-tone grey. The neutral ladder is brick, roast and char, and every one of them is warm.

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#823513` | `body.mac` on the sauce, about and recipes pages, plus `.hero_section` and `.background_hero` |
| 0 (inverted) | Arcade canvas | `#F7AC32` | `body.body_game.mac` — the game page ground |
| 1 | Amber panel | `#FAAE33` | `.left_discount` (960×1200px) and `.recipe_card` — the lit half of a split band, and the card |
| 2 | Char band | `#281006` | `.footer` (1920×857px), `.left_side` (1056×1292px) and `.fullsize.dark_brown` (box `not measured`) |
| 3 | Dark control | `#402011` | `.subscribe_button.w-button`, `.circle_inside.dark_brown`, `.image_why`, `.traditional_number` |
| — | Play field | `#111111` | The game `canvas`, radius 12px, edged `1px #D99923` |

## Elevation

There is no elevation, in the shadow sense. Every row in the component and layout census measures `shadow none`, and the shadow block records none across the capture — so depth is entirely luminance and outline. The ladder is a step down, not up: the brick canvas drops to `#281006` for the footer and the "what's inside" panel, and rises to `#FAAE33` for cards and the newsletter half-band. Separation inside a surface is a single hairline — `1px rgba(64, 32, 17, 0.35)` on the inputs and on `.cms_item.w-dyn-item`, or `1px #FAAE33` on the outlined circles `.circle_inside` (52×52px) and `.circle_highlight` (42×42px and 73×73px). A 6px radius on `.recipe_card` against a 5px well is the only "lift" the system allows itself.

## Imagery

Photography is the second voice and it is doing the heavy lifting. The product jar is cut out against the brick field and rotated through the scroll — upright in the hero, lid-on to camera, tipped, inverted, base-forward — so the same object choreographs the whole page without a single new layout. Food photography is bright, close and un-styled inside `.recipe_image` wells at radius 5px. The about page opens on hands holding the jar, warm-lit and cropped at the wrists. The right half of the newsletter band is a magenta-washed sauce photograph; note that it is imagery, not a painted fill — the census carries `#D1255C` on the three `.tag_one` chips only. The brick ground itself carries a fine engraved botanical texture, darker than the field and never announced *(inferred — sampled from the tiles; the census records no second fill on `.mac`)*. Icons are single-colour glyphs inside circles at radius 100%.

## Layout

Full bleed: `.footer` measures 1920×857px, the full width of the `.mac` body box, and the horizontal-inset census records `(none)`, so bands reach both edges rather than sitting inside a gutter. The header is a single row of amber capsules at the left, a small wordmark centred, contact and cart at the right, with a dotted rule beneath it. Hero sections are stacked full-viewport statements — eyebrow, display line, dotted rule, product shot, a short paragraph anchored bottom-left. The recipes grid is three `.recipe_card` columns on a 16px gap. The subscribe band splits down the middle: `.left_discount` at 960×1200px in amber carrying `.discount_txt` at 55.68px/700, photography filling the other half. The footer closes with the wordmark over four link columns, then a dotted rule and a legal row. Two circular icon buttons stay fixed at the lower right of the home page, filled `#FAAE33` at radius 100% (`.icon_circle.w-inline-block`).

## Typography Voice

Two modes, and the split is mostly a sign change — with a measured exception at each end. Above the subhead, Salmond 700 runs negative tracking that scales with size — −5.6832px at 284.16px, −3.84px at 192px, −2.7648px at 172.8px — against line-heights of 0.8 to 0.9, so display lines pack into rectangles with almost no air between them. Below it, Salmond 500 opens back up: +0.3072px on 15.36px, +0.1632px on 16.32px, +0.144px on 14.4px, line-heights from 1.2 up to 1.6 on `.txt_base`. One family, two opposite instructions. The copy is set in caps through the hero paragraphs and the labels, which is what lets 15.36px hold its own beneath a 284px headline. Two grace notes sit inside the small end: Devanagari numerals twice over, inverted — `"१" .number_txt` at 24px/500 in `#FAAE33`, inside the roast-brown `.traditional_number` (fill `#402011`, radius 100%, box 45×45px, 3 divs on p1); and `"१" .number_chapter` at 23.04px/700 in `#402011`, inside the amber `.circle_chapter` (fill `#FAAE33`, padding `4px 0px`, radius 100%, box 52×52px, 3 divs on p2), and the one 500-weight display row at 57.6px on `.char` — a heading that deliberately steps out of the bold.

## Agent Prompt Guide

## Quick Color Reference

- background: `#823513`
- text: `#FAAE33`
- surface: `#FAAE33`
- border: `rgba(64, 32, 17, 0.35)`
- accent: `#D1255C`
- primary action: `#FAAE33` with `#402011` label

## Example Component Prompts

1. **Pill Nav Link**: An inline anchor filled `#FAAE33`, padding `0 23.328px`, height 48px, border-radius `1728px`, no border, no shadow. Label in Graphikx 17.28px weight 500, line-height 22.464px, letter-spacing 0.1728px, colour `#402011`, uppercase. Width hugs the word (79–99px). Lay four of them in a row with a 4px gap on a `#823513` ground.
2. **Recipe Card**: A 611×722px `div` filled `#FAAE33`, padding 14px, border-radius 6px, no border, no shadow. Inside: a 583×461px image well at border-radius 5px; below it a row of pill tags filled `#823513`, ink `#FAAE33`, 14.4px/500, padding 12px, radius 1440px; then a title in Salmond 38.4px weight 700, line-height 38.4px, letter-spacing −0.384px, colour `#402011`; then one description line at 16.32px weight 500, line-height 22.848px.
3. **Subscribe Form**: On a `#FAAE33` panel, two 450×54px inputs side by side — transparent fill, border `1px rgba(64, 32, 17, 0.35)`, radius `1632px`, padding `16px 20px`, ink `#402011` at 16.32px/500. Beneath them a 904×54px submit filled `#402011` with label `#FAAE33` at 17.28px/500, letter-spacing −0.1728px, padding `16px 42px`, radius `1728px`, no shadow.
4. **Hero Band**: Full-bleed `#823513` section, 153.6px vertical padding, no side gutter. Eyebrow in uppercase `#FAAE33`, centred; size, weight and line-height `not measured`. Below it a headline in Salmond 284.16px weight 700, line-height 227.328px, letter-spacing −5.6832px, colour `#FAAE33`. Under the headline a dotted rule in `#F7AC32` on a 2px repeat. Cut-out product photograph centred below; a 15.36px/500 paragraph with 19.968px line-height anchored bottom-left, and a `#FAAE33` pill button at padding `20px 32px`, radius `1536px`, label 15.36px weight 700 in `#402011`.

## Similar Brands

- **Fly By Jing** — a condiment system built the same way: one saturated field colour, oversized caps, and photography of the jar treated as the hero object.
- **Omsom** — flat, loud colour blocking with type set tight and large, and a voice that talks in short declaratives rather than product claims.
- **Graza** — pantry-goods branding that leans on a single high-chroma ground, fully rounded controls, and a product shot doing the work of an illustration.
- **Liquid Death** — heavyweight all-caps display over flat fields, humour carried entirely by scale and confidence rather than by decoration.
- **Momofuku Goods** — warm, spice-led palette with heavy grotesque headlines and an editorial grid that lets the label design breathe.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-amber: #FAAE33;
  --color-brick: #823513;
  --color-roast: #402011;
  --color-char: #281006;
  --color-saffron: #F7AC32;
  --color-pink: #D1255C;
  --color-field: #111111;
  --color-field-edge: #D99923;
  --color-root: #000000;
  --color-amber-ghost: rgba(247, 172, 50, 0.25);
  --color-hairline: rgba(64, 32, 17, 0.35);
  --color-scrim: rgba(0, 0, 0, 0.14);
  --gradient-rule: linear-gradient(#F7AC32, #F7AC32);

  /* Typography — Families */
  --font-salmond: 'Salmond', 'Founders Grotesk', 'Neue Haas Grotesk Display', ui-sans-serif, system-ui, sans-serif;
  --font-graphikx: 'Graphikx', 'Graphik', 'Söhne', ui-sans-serif, system-ui, sans-serif;
  --font-fallback: ui-sans-serif, system-ui, sans-serif;

  /* Typography — Scale */
  --text-tag: 14.4px;        --leading-tag: 14.4px;        --tracking-tag: 0.144px;
  --text-label: 15.36px;     --leading-label: 15.36px;     --tracking-label: -0.3072px;
  --text-body: 16.32px;      --leading-body: 22.848px;     --tracking-body: 0.1632px;
  --text-nav: 17.28px;       --leading-nav: 22.464px;      --tracking-nav: 0.1728px;
  --text-numeral: 24px;      --leading-numeral: 24px;      --tracking-numeral: normal;
  --text-subhead: 38.4px;    --leading-subhead: 38.4px;    --tracking-subhead: -0.384px;
  --text-heading: 48px;      --leading-heading: 52.8px;    --tracking-heading: 0.48px;
  --text-cta: 55.68px;       --leading-cta: 52.896px;      --tracking-cta: -0.5568px;
  --text-section: 86.4px;    --leading-section: 77.76px;   --tracking-section: -0.432px;
  --text-display: 172.8px;   --leading-display: 155.52px;  --tracking-display: -2.7648px;
  --text-wordmark: 260.16px; --leading-wordmark: 260.16px; --tracking-wordmark: -2.6016px;
  --text-hero: 284.16px;     --leading-hero: 227.328px;    --tracking-hero: -5.6832px;

  /* Spacing */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 10px;
  --space-5: 12px;
  --space-6: 14px;
  --space-7: 16px;
  --space-8: 20px;
  --space-9: 28px;
  --space-section-sm: 96px;
  --space-section-md: 112px;
  --space-section: 153.6px;
  --space-section-lg: 192px;
  --pad-nav-x: 23.328px;
  --pad-button-x: 32px;
  --pad-submit-x: 42px;

  /* Border Radius */
  --radius-band: 0px;
  --radius-image: 5px;
  --radius-card: 6px;
  --radius-canvas: 12px;
  --radius-tag: 1440px;
  --radius-button: 1536px;
  --radius-score: 1500px;
  --radius-field: 1632px;
  --radius-pill: 1728px;
  --radius-circle: 100%;
}
```

### Tailwind v4

```css
@theme {
  --color-amber: #FAAE33;
  --color-brick: #823513;
  --color-roast: #402011;
  --color-char: #281006;
  --color-saffron: #F7AC32;
  --color-pink: #D1255C;
  --color-field: #111111;
  --color-field-edge: #D99923;
  --color-root: #000000;
  --color-amber-ghost: rgba(247, 172, 50, 0.25);
  --color-hairline: rgba(64, 32, 17, 0.35);
  --color-scrim: rgba(0, 0, 0, 0.14);

  --font-salmond: 'Salmond', 'Founders Grotesk', 'Neue Haas Grotesk Display', ui-sans-serif, system-ui, sans-serif;
  --font-graphikx: 'Graphikx', 'Graphik', 'Söhne', ui-sans-serif, system-ui, sans-serif;
  --font-fallback: ui-sans-serif, system-ui, sans-serif;

  --text-tag: 14.4px;        --text-tag--line-height: 14.4px;        --text-tag--letter-spacing: 0.144px;
  --text-label: 15.36px;     --text-label--line-height: 15.36px;     --text-label--letter-spacing: -0.3072px;
  --text-body: 16.32px;      --text-body--line-height: 22.848px;     --text-body--letter-spacing: 0.1632px;
  --text-nav: 17.28px;       --text-nav--line-height: 22.464px;      --text-nav--letter-spacing: 0.1728px;
  --text-numeral: 24px;      --text-numeral--line-height: 24px;      --text-numeral--letter-spacing: normal;
  --text-subhead: 38.4px;    --text-subhead--line-height: 38.4px;    --text-subhead--letter-spacing: -0.384px;
  --text-heading: 48px;      --text-heading--line-height: 52.8px;    --text-heading--letter-spacing: 0.48px;
  --text-cta: 55.68px;       --text-cta--line-height: 52.896px;      --text-cta--letter-spacing: -0.5568px;
  --text-section: 86.4px;    --text-section--line-height: 77.76px;   --text-section--letter-spacing: -0.432px;
  --text-display: 172.8px;   --text-display--line-height: 155.52px;  --text-display--letter-spacing: -2.7648px;
  --text-wordmark: 260.16px; --text-wordmark--line-height: 260.16px; --text-wordmark--letter-spacing: -2.6016px;
  --text-hero: 284.16px;     --text-hero--line-height: 227.328px;    --text-hero--letter-spacing: -5.6832px;

  --spacing-1: 2px;
  --spacing-2: 4px;
  --spacing-3: 6px;
  --spacing-4: 10px;
  --spacing-5: 12px;
  --spacing-6: 14px;
  --spacing-7: 16px;
  --spacing-8: 20px;
  --spacing-9: 28px;
  --spacing-section-sm: 96px;
  --spacing-section-md: 112px;
  --spacing-section: 153.6px;
  --spacing-section-lg: 192px;
  --spacing-nav-x: 23.328px;
  --spacing-button-x: 32px;
  --spacing-submit-x: 42px;

  --radius-band: 0px;
  --radius-image: 5px;
  --radius-card: 6px;
  --radius-canvas: 12px;
  --radius-tag: 1440px;
  --radius-score: 1500px;
  --radius-button: 1536px;
  --radius-field: 1632px;
  --radius-pill: 1728px;
  --radius-circle: 100%;
}
```