Alfred — Brocade Hero with Dimensional Hat

---
version: alpha
name: Alfred — Brocade Hero with Dimensional Hat
colors:
  primary: '#5C1F87'
  purple: '#5C1F87'
  teal: '#2E8796'
  canvas: '#FFFFFF'
  body-ink: '#757575'
  heading-ink: '#5A5A5A'
  sample-heading: '#FFFFFF'
  sample-supporting: '#5C1F87'
typography:
  heading:
    fontFamily: Bitter, serif
    fontSize: 41.6px
    fontWeight: 400
    lineHeight: 52px
  supporting:
    fontFamily: Bitter, serif
    fontSize: 16px
    fontWeight: 400
---

## Overview
An isolated purple product hero with a large magnifying-glass-and-hat illustration, white serif copy and separate free-download and Powerpack purchase actions. Inspected on 2026-10-05. The exact isolated element is `#headerlarge`; a warm full-page render preceded measurement and a fresh image was cropped to its current document bounds.

## Colors
Use the observed palette tokens for the corresponding text and surfaces; photographs, artwork and gradients are not reduced to invented solid-color tokens. Purple marks product identity and teal marks paid actions; white and restrained gray carry the longer explanatory content.

## Typography
The listed font families and sizes are measured CSS samples. The selected heading sample is Bitter, serif at 41.6px, weight 400, line-height 52px. A supporting link/container sample uses 16px with normal leading. These local samples are not a universal type scale. Child spans or image artwork can paint differently from inherited container styles.

## Layout
At 1440px the complete hero is 550px high, with left-aligned copy and right-aligned illustration. At 390px it is 543px high: the artwork moves above centered text, headline size drops from 41.6px to 35.2px, and buttons form two centered rows. The navigation is deliberately outside this crop. Primary image dimensions are 1440 × 551px at a 1440px viewport. The mobile evidence is 390 × 544px at a 390px viewport. These two widths do not identify exact breakpoint thresholds.

## Elevation & Depth
The illustration provides modeled highlights and shadows; the background itself is a flat, low-contrast brocade texture.

## Shapes
Large organic hat and circular lens shapes balance a rectangular copy block. Measured button radii are 4px, not pill-shaped.

## Components
One H1, a compact supporting statement, a white download button and a teal paid-upgrade button. The screenshot does not establish hover, download behavior or purchase completion.

## Do’s and Don’ts
Keep the two actions distinguishable and the illustration large enough to read as a product identity. Avoid placing extra navigation inside this component or squeezing the mobile artwork beside the copy. Provide visible focus states, meaningful alternative text and usable touch targets when adapting; no complete accessibility audit was performed.