Alfred — Twenty-Four-Feature Icon Directory

---
version: alpha
name: Alfred — Twenty-Four-Feature Icon Directory
colors:
  primary: '#5A5A5A'
  purple: '#5C1F87'
  teal: '#2E8796'
  canvas: '#FFFFFF'
  body-ink: '#757575'
  heading-ink: '#5A5A5A'
  sample-heading: '#5A5A5A'
  sample-supporting: '#757575'
typography:
  heading:
    fontFamily: Bitter, serif
    fontSize: 28.8px
    fontWeight: 400
    lineHeight: 40.32px
  supporting:
    fontFamily: Bitter, serif
    fontSize: 14.72px
    fontWeight: 400
    lineHeight: 23.552px
---

## Overview
A complete feature directory organized as six rows of four gray icons with serif headings and compact explanations, converting into a long single-column list on mobile. Inspected on 2026-10-05. The exact isolated element is `#ataglance`; 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 28.8px, weight 400, line-height 40.32px. A supporting paragraph sample uses 14.72px with 23.552px 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 section has 40px vertical padding and a four-column, six-row feature grid. Each feature centers its icon, title and short description. At 390px the cards form one centered column; measured item heading width is 220px. The complete mobile component is approximately 5850px high rather than a truncated first screen. Primary image dimensions are 1440 × 1635px at a 1440px viewport. The mobile evidence is 390 × 5851px at a 390px viewport. These two widths do not identify exact breakpoint thresholds.

## Elevation & Depth
Flat gray icon silhouettes and generous whitespace carry hierarchy without visible card shells or elevated panels.

## Shapes
A consistent icon scale unifies varied search, calculator, clipboard and workflow symbols. Features have rectangular hit areas but no heavy enclosing borders.

## Components
Twenty-four linked capabilities, a Powerpack footnote and a final overview link. Body samples use 14.72px text with 23.552px leading. Destination pages and hover transitions were not exercised.

## Do’s and Don’ts
Use a coherent icon family and keep descriptions similar in length. Preserve the paid-feature footnote; do not make every feature look like a primary CTA or compress all four columns into a narrow phone screen. Provide visible focus states, meaningful alternative text and usable touch targets when adapting; no complete accessibility audit was performed.