---
version: alpha
name: LetterHunt — Opening Section
colors:
  canvas: '#FFFFFF'
  heading: rgb(35, 35, 35)
  supporting: rgb(35, 35, 35)
  primary: rgb(35, 35, 35)
typography:
  heading:
    fontFamily: Manrope
    fontSize: 30px
    fontWeight: 800
    lineHeight: 45px
  body:
    fontFamily: Inter
    fontSize: 18px
    lineHeight: 27px
---

## Overview
Blue-and-white newsletter-directory hero pairing a benefit-led heading, checklist and primary action with a spreadsheet preview. Opening section only: the downstream newsletter database displayed a loading error and is not included. No forms, contact actions or purchase flows were exercised.

## Colors
Keep the canvas white and the principal accent confined to branding, heading emphasis and actions. Use the computed text tokens above; image colors are not interface tokens.

## Typography
The measured desktop heading uses Manrope at 30px with 45px leading. Supporting sample is 18px. Preserve the strong headline-to-description contrast and allow natural wrapping.

## Layout
Use a two-column desktop hero: copy and checklist left, a wide spreadsheet image right. A thin white header sits above a pale near-white section. On mobile the copy, checklist and action center and the product image moves below.

## Elevation & Depth
Use subtle depth only where shown in the reference; avoid heavy card shadows. Exact shadow values were not measured.

## Shapes
Use softly rounded controls against simple rectangular content regions. Keep hit targets comfortably sized and allow text-driven heights.

## Components
Use blue brand text and primary buttons, a small outlined product-award badge, green check marks and a softly shadowed spreadsheet image. Maintain generous separation between the headline and checklist.

## Do’s and Don’ts
Keep the intro concise, with one primary next step. Do not reproduce broken downstream content or assume search and payment behavior from this still image. Mobile evidence covers only the opening region; no accessibility audit or breakpoint sweep was performed. Opening section only: the downstream newsletter database displayed a loading error and is not included. No forms, contact actions or purchase flows were exercised.