# Heist — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://www.heist.co/
Captured: 2026-10-14
CSS measured: 2026-10-14T16:15:30.917Z at 1440×1000 — https://www.heist.co/
Values come from computed CSS; role labels are AI judgments. Live CSS may differ from an older screenshot.
Status: AI analysed; curator review pending
Rubric: 3.2
Observer: google/gemini-3.1-pro-preview
Judge: anthropic/claude-sonnet-5

## Design direction

Heist Coffee Co. features a bold, typography-driven design with a strong editorial and somewhat brutalist influence. The layout relies on large, impactful condensed serif typography (`font-3`, `font-17`) contrasted with technical mono sans-serifs (`font-4`, `font-14`) for functional text. The color palette is tight, utilizing a warm off-white canvas (`color-2`) with stark black (`color-5`) text, punctuated by vibrant accents like solid orange/red (`color-7`, `color-3`) and a rich blue gradient background in the hero. Structural elements include heavy black borders and distinctive clipping masks. The overall aesthetic feels modern, premium, and slightly edgy, fitting the brand's 'rebel' narra

## Classification

- Industry: retail
- Site type: Store
- Business model: E-commerce, Shopping
- Styles: typographic, bold, editorial, brutalist, swiss-modernism
- Platform: Shopify
- Technology: Tailwind CSS

## Typography

- Display: Feature Display Condensed — weight 400; size 128px; line-height 133.1px; tracking -2.6px; Regular (100% role confidence, computed values)
- Heading: Feature Display Condensed — weight 400; size 72px; line-height 74.9px; tracking -1.4px; Regular (95% role confidence, computed values)
- Body: forma-djr-micro — weight 400; size 16px; line-height 20.5px; tracking normal; Regular (85% role confidence, computed values)
- Mono: forma-djr-mono — weight 500; size 14px; line-height 15.7px; tracking normal; uppercase (90% role confidence, computed values)

## Functional palette

- Text — text #161414: color-5: computed rgb(22, 20, 20); AI role: #161414, the primary black used for most text, headings, and heavy borders. (100% role confidence, computed values)
- Canvas — canvas #DDD6C7: color-2: computed rgb(221, 214, 199); AI role: #DDD6C7, a warm beige used as the primary background color for the body and several content sections. (95% role confidence, computed values)
- Primary Action — primary action #FF3B27: color-7: computed rgb(255, 59, 39); AI role: #FF3B27, a vibrant red/orange used for the announcement bar, primary CTA buttons, and highlight borders. (90% role confidence, computed values)
- Surface — surface #4489E8: color-4: computed rgb(68, 137, 232); AI role: #4489E8, the bright blue used as the background gradient in the main hero section and on specific product blocks. (80% role confidence, computed values)

## Exact computed CSS inventory

The browser extracted these declarations from rendered DOM at capture time. They are facts, not visual guesses. Image and video pixels are outside this inventory.

### Font configurations

```json
[
  {
    "id": "font-1",
    "family": "Feature Display Condensed",
    "fontStack": "\"Feature Display Condensed\", \"Times New Roman\", serif",
    "weight": "400",
    "size": "72px",
    "lineHeight": "74.9px",
    "letterSpacing": "-1.4px",
    "traits": "Regular",
    "count": 7,
    "contexts": [
      {
        "tag": "h2",
        "text": "World-Class Decaf Coffee",
        "top": 1830,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Roasted in Small Batches with Big Standards",
        "top": 3641,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Can Decaf be as good as regular?",
        "top": 4580,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "Feature Display Condensed",
    "fontStack": "\"Feature Display Condensed\", \"Times New Roman\", serif",
    "weight": "400",
    "size": "48px",
    "lineHeight": "49.9px",
    "letterSpacing": "-1px",
    "traits": "Regular",
    "count": 7,
    "contexts": [
      {
        "tag": "p",
        "text": "Top 1% of World’s Coffee Beans",
        "top": 3864,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Water Extracts the Caffeine",
        "top": 4014,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "No Solvents, no Chemicals",
        "top": 4164,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "Feature Display Condensed",
    "fontStack": "\"Feature Display Condensed\", \"Times New Roman\", serif",
    "weight": "400",
    "size": "128px",
    "lineHeight": "133.1px",
    "letterSpacing": "-2.6px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h1",
        "text": "Coffee Without a Curfew.",
        "top": 160,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "forma-djr-mono",
    "fontStack": "forma-djr-mono, ui-monospace, SFMono-Regular, monospace",
    "weight": "500",
    "size": "14px",
    "lineHeight": "15.7px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 56,
    "contexts": [
      {
        "tag": "a",
        "text": "why Decaf",
        "top": 66,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "the process",
        "top": 66,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "our story",
        "top": 66,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "forma-djr-micro",
    "fontStack": "forma-djr-micro, system-ui, -apple-system, sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "20.5px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 12,
    "contexts": [
      {
        "tag": "p",
        "text": "This is our mission so we didn't pick easy competition. We picked the top seller from the most Award",
        "top": 4677,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "- open brewing instructions",
        "top": 7511,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "- open brewing instructions",
        "top": 7511,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "Feature Display Condensed",
    "fontStack": "\"Feature Display Condensed\", \"Times New Roman\", serif",
    "weight": "400",
    "size": "32px",
    "lineHeight": "35.8px",
    "letterSpacing": "-0.6px",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "p",
        "text": "Heist is a world-class decaf coffee built for people who refuse to choose between full flavor and a ",
        "top": 1262,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Medium Roast",
        "top": 2060,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Light Roast",
        "top": 2060,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "forma-djr-mono",
    "fontStack": "forma-djr-mono, ui-monospace, SFMono-Regular, monospace",
    "weight": "500",
    "size": "10px",
    "lineHeight": "11.2px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 6,
    "contexts": [
      {
        "tag": "p",
        "text": "Copyright © MCMLMMXXVI by Heist Coffee Co.",
        "top": 9687,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Refund Policy",
        "top": 9685,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Privacy Policy",
        "top": 9685,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "Aro",
    "fontStack": "Aro, \"Arial Narrow\", system-ui, sans-serif",
    "weight": "800",
    "size": "40px",
    "lineHeight": "40px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 2,
    "contexts": [
      {
        "tag": "p",
        "text": "smooth talker",
        "top": 2005,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "blueprint",
        "top": 2005,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "forma-djr-mono",
    "fontStack": "forma-djr-mono, ui-monospace, SFMono-Regular, monospace",
    "weight": "500",
    "size": "14px",
    "lineHeight": "19.6px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 2,
    "contexts": [
      {
        "tag": "p",
        "text": "30-day escape plan",
        "top": 1505,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Love it or your money back",
        "top": 1529,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": null,
    "fontStack": "sans-serif",
    "weight": "400",
    "size": "13.5px",
    "lineHeight": "20px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "p",
        "text": "Tested by Light Labs in",
        "top": 4308,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "in",
        "top": 4310,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": null,
    "fontStack": "sans-serif",
    "weight": "300",
    "size": "13.5px",
    "lineHeight": "20px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "16 substances tested for quality",
        "top": 4332,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": "forma-djr-mono",
    "fontStack": "forma-djr-mono, ui-monospace, SFMono-Regular, monospace",
    "weight": "700",
    "size": "12.5px",
    "lineHeight": "16px",
    "letterSpacing": "2.5px",
    "traits": "uppercase",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "The Heist, in full",
        "top": 2820,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": "forma-djr-mono",
    "fontStack": "forma-djr-mono, ui-monospace, SFMono-Regular, monospace",
    "weight": "500",
    "size": "12px",
    "lineHeight": "16.3px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Method: Purchased the \"best-selling\" coffee directly from Roaster websites or direct in their cafe. ",
        "top": 5448,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-14",
    "family": "forma-djr-mono",
    "fontStack": "forma-djr-mono, ui-monospace, SFMono-Regular, monospace",
    "weight": "600",
    "size": "12px",
    "lineHeight": "12px",
    "letterSpacing": "0.2px",
    "traits": "uppercase",
    "count": 1079,
    "contexts": [
      {
        "tag": "span",
        "text": "0",
        "top": 2101,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "1",
        "top": 2113,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "2",
        "top": 2125,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-15",
    "family": "Aro",
    "fontStack": "Aro, \"Arial Narrow\", system-ui, sans-serif",
    "weight": "800",
    "size": "24px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 16,
    "contexts": [
      {
        "tag": "a",
        "text": "Shop now - go to product coffee without a curfew",
        "top": 9298,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "- go to product coffee without a curfew",
        "top": 9300,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "why Decaf? - go to page why decaf",
        "top": 9298,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-16",
    "family": "Aro",
    "fontStack": "Aro, \"Arial Narrow\", system-ui, sans-serif",
    "weight": "800",
    "size": "20px",
    "lineHeight": "20px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 9,
    "contexts": [
      {
        "tag": "a",
        "text": "SHOP NOW",
        "top": 52,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "CART(0)",
        "top": 61,
        "property": "font"
      },
      {
        "tag": "strong",
        "text": "0",
        "top": 61,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-17",
    "family": "Feature Display Condensed",
    "fontStack": "\"Feature Display Condensed\", \"Times New Roman\", serif",
    "weight": "400",
    "size": "96px",
    "lineHeight": "99.8px",
    "letterSpacing": "-1.9px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "Steal Back",
        "top": 1130,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "The Night.",
        "top": 1130,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-18",
    "family": "Feature Display Condensed",
    "fontStack": "\"Feature Display Condensed\", \"Times New Roman\", serif",
    "weight": "400",
    "size": "40px",
    "lineHeight": "44.8px",
    "letterSpacing": "-0.8px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Coffee Without a Curfew.",
        "top": -74,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-19",
    "family": "forma-djr-mono",
    "fontStack": "forma-djr-mono, ui-monospace, SFMono-Regular, monospace",
    "weight": "600",
    "size": "12px",
    "lineHeight": "16.3px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Great Coffee for the second half of the day.",
        "top": 8,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-20",
    "family": null,
    "fontStack": "sans-serif",
    "weight": "400",
    "size": "10.5px",
    "lineHeight": "15px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Aug 2026",
        "top": 4309,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-21",
    "family": "Inter",
    "fontStack": "Inter, sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "22.4px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "a",
        "text": "Skip to content",
        "top": 0,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#EEEADE",
    "alpha": 1,
    "cssValue": "rgb(238, 234, 222)",
    "count": 12,
    "contexts": [
      {
        "tag": "div",
        "text": "smooth talker Medium Roast Dark chocolate, vanilla bean Decaf 1/4 Caf Shop now - from $32.99 - go to",
        "top": 1947,
        "property": "background"
      },
      {
        "tag": "p",
        "text": "This is our mission so we didn't pick easy competition. We picked the top seller from the most Award",
        "top": 4677,
        "property": "text"
      },
      {
        "tag": "button",
        "text": "heist vs. regular coffees",
        "top": 4794,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#DDD6C7",
    "alpha": 1,
    "cssValue": "rgb(221, 214, 199)",
    "count": 47,
    "contexts": [
      {
        "tag": "body",
        "text": "Skip to content const chatDrawer = document.querySelector('#chat-drawer'); const shopifyChat = docum",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "a",
        "text": "why Decaf",
        "top": 66,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "CART(0)",
        "top": 61,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#FF4014",
    "alpha": 1,
    "cssValue": "rgb(255, 64, 20)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "Shop now - go to product coffee without a curfew why Decaf? - go to page why decaf The process - go ",
        "top": 8928,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "Shop now - go to product coffee without a curfew why Decaf? - go to page why decaf The process - go ",
        "top": 8928,
        "property": "::before-background"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#4489E8",
    "alpha": 1,
    "cssValue": "rgb(68, 137, 232)",
    "count": 3,
    "contexts": [
      {
        "tag": "heist-scroll-capture",
        "text": "Coffee Without a Curfew. Steal Back The Night. Heist is a world-class decaf coffee built for people ",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "decaf",
        "top": 4933,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#161414",
    "alpha": 1,
    "cssValue": "rgb(22, 20, 20)",
    "count": 1451,
    "contexts": [
      {
        "tag": "span",
        "text": "Great Coffee for the second half of the day.",
        "top": 8,
        "property": "text"
      },
      {
        "tag": "a",
        "text": "SHOP NOW",
        "top": 52,
        "property": "text"
      },
      {
        "tag": "a",
        "text": "SHOP NOW",
        "top": 52,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#C4BCA9",
    "alpha": 1,
    "cssValue": "rgb(196, 188, 169)",
    "count": 7,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 4984,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#FF3B27",
    "alpha": 1,
    "cssValue": "rgb(255, 59, 39)",
    "count": 8,
    "contexts": [
      {
        "tag": "div",
        "text": "Great Coffee for the second half of the day.",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "a",
        "text": "SHOP NOW",
        "top": 52,
        "property": "control-background"
      },
      {
        "tag": "div",
        "text": "",
        "top": 3826,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#231F20",
    "alpha": 1,
    "cssValue": "rgb(35, 31, 32)",
    "count": 54,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 6082,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#FFFFFF",
    "alpha": 0.7490196078431373,
    "cssValue": "rgba(255, 255, 255, 0.75)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Tested by Light Labs inAug 202616 substances tested for qualityRight Arrow",
        "top": 4296,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#030202",
    "alpha": 1,
    "cssValue": "rgb(3, 2, 2)",
    "count": 3,
    "contexts": [
      {
        "tag": "p",
        "text": "smooth talker",
        "top": 2005,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#4E484B",
    "alpha": 1,
    "cssValue": "rgb(78, 72, 75)",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "The Heist, in full",
        "top": 2820,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 2,
    "contexts": [
      {
        "tag": "a",
        "text": "Skip to content",
        "top": 0,
        "property": "text"
      },
      {
        "tag": "div",
        "text": "Aug 2026",
        "top": 4309,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-13",
    "hex": "#2B2B2B",
    "alpha": 1,
    "cssValue": "rgb(43, 43, 43)",
    "count": 4,
    "contexts": [
      {
        "tag": "p",
        "text": "Tested by Light Labs in",
        "top": 4308,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "in",
        "top": 4310,
        "property": "text"
      },
      {
        "tag": "path",
        "text": "",
        "top": 4337,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-14",
    "hex": "#D4D4D4",
    "alpha": 1,
    "cssValue": "rgb(212, 212, 212)",
    "count": 4,
    "contexts": [
      {
        "tag": "div",
        "text": "Tested by Light Labs inAug 202616 substances tested for qualityRight Arrow",
        "top": 4296,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-15",
    "hex": "#DEE2EC",
    "alpha": 1,
    "cssValue": "rgb(222, 226, 236)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Aug 2026",
        "top": 4309,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-16",
    "hex": "#282828",
    "alpha": 1,
    "cssValue": "rgb(40, 40, 40)",
    "count": 1,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 9489,
        "property": "svg-stroke"
      }
    ]
  }
]
```

### Extraction limits

- Font families are computed CSS declarations, not optical font identification.
- Colors are computed CSS converted by the browser to sRGB; image/video pixels and gradient stops are not sampled.
- Transparent colors are recorded with alpha but excluded from opaque palette role assignments.
- Only currently rendered DOM elements are sampled; closed shadow roots and iframe contents are excluded.

## Type, spacing, and shape language

- Spacing rhythm: Sections are separated by distinct horizontal borders or full-bleed background color changes. Internal padding within bordered cards and containers is generous but structured.
- Corner style: Strictly sharp, square corners (0px radius) across all structural elements, cards, and buttons, reinforcing a brutalist/technical feel.
- Radius: Buttons and containers use 0px border-radius.
- Borders: Extensive use of solid black (#161414) borders, often 1px or thicker, to divide sections, outline cards, frame navigation, and underline form inputs.
- Buttons: Solid rectangular blocks with no border radius, stark contrasting text, and often defined by thick dark borders.
- Content width: Content often spans full width with defined side margins, or is constrained to a strong multi-column grid within those margins.
- Density: High contrast between dense, text-heavy functional areas (like the chart or receipt cards) and very airy, negative-space-heavy editorial sections.
- Evidence: Visual inspection of the sharp container edges, explicit dividing lines between horizontal sections, and the use of 'forma-djr-mono' paired with strict grids.

## Sections

Gallery section count: 2. Each entry corresponds to one gallery capture.

1. **Features — Can Decaf be as good as regular?** (Home)
   Reusable feature composition from Home, organized around “Can Decaf be as good as regular?”.
   Capture: 1440×1874px; page bounds 4459–6333px of 9716px; source section ID: `2d77c34c-bbea-4d56-96f9-08b4620ae547`; image: https://media.designdetails.io/library/ad396b0aa649b43fdb28a4225b386acb20422571f17779c37014808c95ab2278/section_crop-2d77c34c-2026-10-14T16-15-49-630Z.webp
   SECTION.md v3.2: `2d77c34c-bbea-4d56-96f9-08b4620ae547` (deterministic evidence; editorial review pending)
2. **Features — For the late night conversations, and anyone who’s been told 1 pm is…** (Home)
   Reusable feature composition from Home, organized around “For the late night conversations, and anyone who’s been told 1 pm is…”.
   Capture: 1440×1759px; page bounds 6333–8092px of 9716px; source section ID: `77083ec6-b490-4331-b7e5-3163820cb510`; image: https://media.designdetails.io/library/d452dd01d285af5e437f0b92799d7395d3994b18d87270b41e1b4311964876fc/section_crop-77083ec6-2026-10-14T16-15-51-048Z.webp
   SECTION.md v3.2: `77083ec6-b490-4331-b7e5-3163820cb510` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/c7095a6a9730756af9a2c253a33daa889c72a5fb101f7a9b9ff5c2746d4d242d/desktop_full-f1aab3e0-2026-10-14T16-15-30-944Z.webp
- Mobile screenshot: https://media.designdetails.io/library/55f64a56b1183c92629f0f4c7a3ed1031062b5faadb08bd37951374e40ba3d4f/mobile_full-f1aab3e0-2026-10-14T16-16-40-168Z.webp
- Open Graph image: https://media.designdetails.io/library/18e7456ef939994969d33714afcc1174073c09aad576215bf43ca8dc02458ef2/og_image-f1aab3e0-2026-10-14T16-15-43-815Z.webp
- Full-page video: https://media.designdetails.io/library/d5e938e5c78952047f52bbfeac8e53675aaf1ac5566e5ba0cf41ecb0822b6bd8/motion-1791995326525.mp4
- Video poster: https://media.designdetails.io/library/be9ecbcbe1043fa53b7861e20bec6c948e8b6f4b8e98585d89271ed552819b8b/motion-poster-1791995326525.webp
- Motion status: Recording attached. Consult the motion score and section motion records; do not infer exact easing from frames alone.

## Implementation contract

- Treat computed CSS values, screenshot dimensions, and section bounds as measured evidence.
- Treat typography roles, palette roles, style labels, quality scores, and prose analysis as model or curator judgments.
- Rebuild the page in the listed section order. Request SECTION.md v3.2 using the listed ID. Promoted IDs include editorial observation and judgment; raw gallery IDs still return deterministic geometry, site design facts, media treatment, and explicit evidence gaps.
- Do not invent exact responsive behavior, motion curves, or hidden interaction states when they were not captured.

## Reusable components

- Announcement Bar
- Navigation Bar
- Hero With Background Imagery
- Product Card
- Stat Block
- Comparison Table
- Testimonial Card
- Gallery
- Newsletter Form
- Footer
- Primary Button
- Chat Widget
- Ticket/Receipt Aesthetic

## Quality rubric

Overall: 61.5/100 (Good)
Evidence coverage: 100%
Judge tier: Good
Verdict: Heist executes a confident, well-branded editorial/brutalist system — oversized condensed serif type, a disciplined mono label language, and a ticket/barcode motif that reinforces its rebellious decaf narrative — but its underlying structure is a standard DTC template sequence (hero, product cards, stat block, comparison chart, testimonials, gallery, footer) given a strong skin rather than a structurally original experience, and its motion is limited to variations of scroll-triggered reveals. It is a solid, cohesive 'good' tier execution, not yet a landmark or hard-to-substitute design system.

- Typography (15%): 68 — A genuine three-register type system is deployed with purpose: Feature Display Condensed carries oversized editorial headlines (128px/96px/72px) with tight negative tracking, forma-djr-mono handles all functional/labeling text in uppercase small sizes, and Aro (heavy, uppercase) is reserved for buttons and CTAs. The scale jumps are dramatic and consistently applied across hero, stat blocks, and footer, giving the brand a confident, legible hierarchy.
- Color (10%): 59 — Palette is tight and purposeful — warm beige canvas, near-black ink, and a single red/orange accent used consistently for CTAs and alerts — but the blue hero gradient and blue testimonial section read as a separate, less integrated decision that doesn't clearly extend the rest of the system.
- Layout (20%): 64 — The page runs a legible, repeatable grid (bordered cards, stat blocks, bar-chart comparisons, testimonial grids, horizontal galleries) with consistent sharp-corner, heavy-border treatment tying disparate content types together. Density varies intentionally between airy editorial moments and dense data/testimonial sections, showing some structural thought beyond a single hero.
- Motion (20%): 60 — Multiple distinct scroll-linked choreography moments are reported (hero text/image swap, horizontal video-grid translation, footer clip-mask reveal) rather than a single scroll-fade gimmick, suggesting an intentional motion score across the page. However, evidence doesn't substantiate frame quality, easing refinement, or that effects go beyond common parallax/reveal patterns.
- Originality (25%): 56 — The 'Heist'/rebellion narrative tying decaf positioning to a ticket-and-barcode visual motif ('Steal Back The Night', receipt-style testimonial cards, giant barcode in footer) is a genuinely brand-specific idea that goes beyond generic DTC styling. However, the underlying component inventory — hero, product cards, stat block, bar-chart comparison, testimonial grid, Instagram gallery, newsletter footer — is a standard e-commerce template sequence with a strong skin rather than structurally novel execution.
- Content (10%): 66 — Content and design are closely fused: the decaf-skeptic brand story is reinforced by data visualizations (bean testing stats, blind-tasting bar chart), verified-buyer receipt-style testimonials, and a dedicated brewing guide gallery — each visual module directly supports a specific claim rather than being decorative filler.

Coverage: 100% of the current weighted rubric. Compare overall scores only at similar evidence coverage.

Formula: weighted mean of scored axes — Typography 15%, Color 10%, Layout 20%, Motion 20%, Originality 25%, Content 10%. Inconclusive and not-assessed axes are excluded and coverage is shown explicitly.

## Verification checklist

- [x] Score evidence
- [x] Design tokens
- [ ] Functional palette
- [x] Normalized sections
- [x] Reusable components
- [x] Typography roles

## Curator notes

Curator review pending.

## Usage guidance

Use this record as design evidence. Combine it with other references and create an original implementation; do not reproduce the source website or its proprietary copy and assets.