feat: US-016 - Apply chosen parent header typography
Elvaro Grotesque 600, -0.02em tracking with responsive scale from 1.375rem (mobile) to 2.2rem (desktop). Refined from the baseline 700/2.4rem for a more premium, intentional feel.
This commit is contained in:
+2
-2
@@ -285,8 +285,8 @@
|
|||||||
"Verify in browser using dev-browser skill"
|
"Verify in browser using dev-browser skill"
|
||||||
],
|
],
|
||||||
"priority": 16,
|
"priority": 16,
|
||||||
"passes": false,
|
"passes": true,
|
||||||
"notes": "Depends on US-015 having selected a font treatment. Apply it consistently to ParentSection.tsx."
|
"notes": "Applied Elvaro Grotesque 600, -0.02em tracking with responsive scale: 1.375rem (mobile) → 1.6rem (sm) → 1.8rem (md) → 2.2rem (lg). Both headers identical. Verified at 375px (22px) and 1024px+ (35.2px)."
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": "US-017",
|
"id": "US-017",
|
||||||
|
|||||||
@@ -1102,3 +1102,25 @@ Visual exploration of parent section header typography. Tested 14 combinations i
|
|||||||
- Teal-colored headers compete with KPI accent values — parent headers should stay in text-primary
|
- Teal-colored headers compete with KPI accent values — parent headers should stay in text-primary
|
||||||
- Tight negative tracking (-0.02em to -0.03em) consistently improves the premium feel at heading sizes
|
- Tight negative tracking (-0.02em to -0.03em) consistently improves the premium feel at heading sizes
|
||||||
---
|
---
|
||||||
|
|
||||||
|
## Iteration 16 — US-016: Apply chosen parent header typography
|
||||||
|
**Status**: PASS
|
||||||
|
**Commit**: (this iteration)
|
||||||
|
|
||||||
|
### What was done
|
||||||
|
Applied the selected typography from US-015 to ParentSection.tsx:
|
||||||
|
- **Font**: Elvaro Grotesque (unchanged — consistent with body)
|
||||||
|
- **Weight**: 600 (down from 700)
|
||||||
|
- **Letter-spacing**: -0.02em (tight tracking)
|
||||||
|
- **Responsive scale**: `1.375rem` → `1.6rem` (sm) → `1.8rem` (md) → `2.2rem` (lg)
|
||||||
|
- Previous: `1.5rem` → `1.8rem` → `2rem` → `2.4rem`
|
||||||
|
|
||||||
|
### Changes
|
||||||
|
- **ParentSection.tsx**: Updated h2 className responsive sizes and inline style (fontWeight 700→600, added letterSpacing -0.02em)
|
||||||
|
|
||||||
|
### Verification
|
||||||
|
- **Desktop (1024px+)**: 35.2px / 600 weight / -0.704px tracking — refined, premium feel
|
||||||
|
- **Mobile (375px)**: 22px / 600 weight — proportional, readable
|
||||||
|
- Both "Patient Summary" and "Patient Pathway" headers identical
|
||||||
|
- Clear hierarchy: parent headers (2.2rem/600) > sub-headers (12px/600 uppercase) > body (13px/400)
|
||||||
|
---
|
||||||
|
|||||||
@@ -12,9 +12,10 @@ export function ParentSection({ title, children, className, tileId }: ParentSect
|
|||||||
return (
|
return (
|
||||||
<Card full className={className} tileId={tileId}>
|
<Card full className={className} tileId={tileId}>
|
||||||
<h2
|
<h2
|
||||||
className="text-[1.5rem] sm:text-[1.8rem] md:text-[2rem] lg:text-[2.4rem]"
|
className="text-[1.375rem] sm:text-[1.6rem] md:text-[1.8rem] lg:text-[2.2rem]"
|
||||||
style={{
|
style={{
|
||||||
fontWeight: 700,
|
fontWeight: 600,
|
||||||
|
letterSpacing: '-0.02em',
|
||||||
color: 'var(--text-primary)',
|
color: 'var(--text-primary)',
|
||||||
lineHeight: 1.1,
|
lineHeight: 1.1,
|
||||||
margin: 0,
|
margin: 0,
|
||||||
|
|||||||
Reference in New Issue
Block a user