Alfred — Purple Brocade Mac Productivity Story

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

## Overview
A Mac productivity homepage pairing a purple brocade hero and dimensional hat illustration with Bitter serif typography, alternating app screenshots, a broad feature directory and three download or purchase paths. Inspected on 2026-10-05. This is a complete desktop page capture, not an isolated component crop.

## 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 paragraph sample uses 16px with 25.6px leading. These local samples are not a universal type scale. Child spans or image artwork can paint differently from inherited container styles.

## Layout
The desktop hero places copy left and the hat artwork right within an approximately 980px content rail; the hero itself is 550px tall. At 390px, the artwork moves above centered copy, the headline changes from 41.6px to 35.2px, and the two actions stack. Desktop feature bands alternate text and screenshots, followed by a four-column icon directory and a three-card download row. Full mobile evidence is limited to the opening viewport, supplemented by separate inspected component captures. Primary image dimensions are 1440 × 5612px at a 1440px viewport. The mobile evidence is 390 × 844px at a 390px viewport. These two widths do not identify exact breakpoint thresholds.

## Elevation & Depth
Dimensional product artwork supplies most depth. App screenshot shadows lift dark windows from flat white bands; the site chrome stays restrained.

## Shapes
The hat silhouette contrasts with rectangular screenshot panels, small 4px button corners and an ornate repeating wallpaper pattern.

## Components
Purple utility navigation, paired free/paid hero actions, a dark future-version announcement, source award logos, alternating demonstrations, feature icons, download cards and a charcoal resource footer. Downloads, purchases and linked workflows were not activated.

## Do’s and Don’ts
Keep serif hierarchy, purple/teal action separation and the artwork's breathing room. Do not replace the decorative wallpaper with a generic gradient or treat the source's playful audience language as a measured adoption statistic. Provide visible focus states, meaningful alternative text and usable touch targets when adapting; no complete accessibility audit was performed.