# Product

## Register

brand

## Users

Editorial designers, frontend engineers, content strategists, and product teams who need concrete, visual evidence for how strong long-form reading experiences work. They arrive with a design decision to make and need to compare structure, typography, pacing, imagery, navigation, and responsive behavior without reopening eight source sites from scratch.

## Product Purpose

Create a durable field guide to excellent long-form article interfaces. Each reference gets an evidence-led learning file and a self-contained HTML report that explains what the page does, why it works, how it changes between desktop and mobile, what should be borrowed, and what should remain specific to the original. A master index makes the collection easy to scan and establishes a repeatable workflow for adding new examples over time.

Success means a new reader can identify a useful pattern, see the desktop/mobile evidence beside it, understand the implementation implications, and carry the lesson into a real article design.

## Brand Personality

Observant, exacting, and generous. The work should feel like a design studio's annotated field notebook: opinionated enough to be useful, careful enough to separate observation from inference, and welcoming enough for a new designer to follow.

## Anti-references

- Generic inspiration galleries that show thumbnails without explaining why the work succeeds.
- Screenshot dumps with no responsive comparison, content model, or implementation guidance.
- Uncritical visual imitation that copies a publisher's identity instead of extracting transferable principles.
- AI-default editorial styling: beige paper backgrounds, reflex display serifs, tiny tracked labels, uniform cards, and ornamental newspaper rules unrelated to the content.
- Reports that hide limitations, blocked states, or stale captures behind confident prose.

## Design Principles

1. Evidence before opinion. Pair every major claim with a visual, structural, or measured observation.
2. Treat mobile as an editorial rewrite, not a shrunken desktop layout.
3. Explain the reader's journey, not just the CSS. Show how hierarchy, pacing, and navigation support comprehension.
4. Borrow systems, not signatures. Preserve the lesson while clearly crediting and linking the original work.
5. Make comparison frictionless. Use consistent report anatomy while letting each report adopt the source page's own visual language.
6. Leave a trail for the next study. Every capture, score, and inference should be reproducible or explicitly marked as time-bound.

## Accessibility & Inclusion

Target WCAG 2.2 AA. Body copy must remain readable at narrow widths and browser zoom, keyboard focus must be visible, controls need 44px touch targets, color cannot carry meaning alone, images require descriptive alt text, and all motion must respect `prefers-reduced-motion`. Reports should distinguish observed behavior from recommendations so readers with different access needs can evaluate tradeoffs honestly.