# Design Pack Lab 2 v6 Typography Standard

This is the single source of truth for v6 typography QA.

Claude Code must audit rendered desktop and mobile section typography against this file when Mark says to run the typography QA audit.

## Canonical Scale

| Element | Desktop | Mobile |
|---|---:|---:|
| Hero title | 64px | 42px |
| H1 | 48px | 36px |
| H2 | 38px | 30px |
| H3 | 30px | 24px |
| H4 | 24px | 20px |
| Body | 18px | 16px |
| Small text | 16px | 15px |
| Caption | 14px | 14px |
| Buttons | 17px, weight 600 | 17px, weight 600 |
| Navigation | 17px | 16px |

## Audit Scope

- Check rendered/computed font sizes on desktop and mobile.
- Check button font weight is `600`.
- Report actual vs expected px per section and element.
- Line-height, non-button font weights, letter spacing and font family are out of scope unless Mark adds them later.
- Do not fix deviations during the audit; report them only.

## Mobile Breakpoint

- Canonical mobile typography breakpoint: `max-width: 560px`.
- Mobile audit samples must use a viewport width of `560px` or narrower.
- Recommended mobile audit viewport: `390px` wide.

## Mapping Notes

- "Hero title" applies to the primary visual hero title where a section/page has a hero treatment.
- "H1", "H2", "H3" and "H4" map to the rendered heading elements or explicit heading-role selectors in the section.
- Sections without a given element should be marked not applicable for that element, not failed.