Problem
Font sizes in app/globals.css are one-off literals scattered across rules:
0.92rem, 0.78rem, 1.05rem, clamp(2rem, 4vw, 3rem). There is no scale, so
every new component invents a size and the page gradually loses typographic
rhythm — which is most visible on a dense dashboard, which is exactly what is
coming next.
What to do
- Define a modular scale as tokens (
--text-xs through --text-3xl) and use
only those.
- Pair each size with an intended line-height and weight — size alone does not
make a scale.
- Use fluid
clamp() for display sizes, fixed steps for body and UI text;
fluid body copy causes more problems than it solves.
- Set a comfortable measure (
max-width around 65–75 characters) for long-form
content — the compliance and docs pages will need it.
- Replace every literal size in the stylesheet.
Acceptance criteria
Notes
Do this before the dashboard components land. A scale introduced afterwards
means touching every component twice.
Problem
Font sizes in
app/globals.cssare one-off literals scattered across rules:0.92rem,0.78rem,1.05rem,clamp(2rem, 4vw, 3rem). There is no scale, soevery new component invents a size and the page gradually loses typographic
rhythm — which is most visible on a dense dashboard, which is exactly what is
coming next.
What to do
--text-xsthrough--text-3xl) and useonly those.
make a scale.
clamp()for display sizes, fixed steps for body and UI text;fluid body copy causes more problems than it solves.
max-widtharound 65–75 characters) for long-formcontent — the compliance and docs pages will need it.
Acceptance criteria
Notes
Do this before the dashboard components land. A scale introduced afterwards
means touching every component twice.