First incremental batch of CR-24: migrate app/components/type/ off handwritten font-inter text-[Npx] leading-[…] stacks onto the existing Tailwind type-scale utilities (text-small-paragraph, text-large-heading, text-medium-display, etc.).
The scale already lives in app/tailwind.css@theme; this PR only adopts it. Combos that do not map cleanly are left hardcoded and listed on the ticket for Dan — no new tokens.
Changes
Replaced exact size/weight/line-height matches in type components with text-{size}-{role} utilities (size, line-height, weight, and tracking come from the token).
Dropped font-inter where Inter is already the body default. Kept font-bricolage-grotesque / font-space-grotesk because the text-* utilities do not set family.
Spot-check marketing pages that compose these (/, /about, /learn, /use-cases) for heading and body type.
Expected deltas vs the old hardcoded stacks (token alignment, not bugs):
Display titles that were 1:1 (e.g. hero sm 52/52) now use the token 110% line-height.
SectionHeader default subtitle at sm was 18/32; it is now text-large-paragraph (18/130%).
Notes
Mapping table and unmappable cases are on CR-24. Highlights for design: no 32px display token; 18/22/500 Bricolage; 24/32/500 Bricolage; 14/18/500 labels; display Regular (400) vs code font-medium (500).
TripleStep CTA !text-[14px] left for CR-123 (ButtonfontStyles).
Later batches per the ticket: cards/ → sections/ → navigation/ → modals/ → controls/ → create-flow.
## Overview
First incremental batch of [CR-24](https://linear.app/community-rule/issue/CR-24/adopt-typography-token-classes-across-components-retire-font-inter): migrate `app/components/type/` off handwritten `font-inter text-[Npx] leading-[…]` stacks onto the existing Tailwind type-scale utilities (`text-small-paragraph`, `text-large-heading`, `text-medium-display`, etc.).
The scale already lives in `app/tailwind.css` `@theme`; this PR only adopts it. Combos that do not map cleanly are left hardcoded and listed on the ticket for Dan — no new tokens.
## Changes
- Replaced exact size/weight/line-height matches in type components with `text-{size}-{role}` utilities (size, line-height, weight, and tracking come from the token).
- Dropped `font-inter` where Inter is already the body default. Kept `font-bricolage-grotesque` / `font-space-grotesk` because the `text-*` utilities do not set family.
- Components: `ContentLockup`, `HeaderLockup`, `InputLabel`, `NumberedList`, `PageHeader`, `Section`, `SectionHeader`, `TextBlock`, `TripleStep`, `TripleTextBlock`.
- Updated `InputLabel` and `FeatureGrid` tests that asserted on the old class strings.
Counts in `app/`:
| | Before | After |
| --- | --- | --- |
| Token typography classes | ~30 | 57 |
| `font-inter` | 210 | 149 |
| `text-[Npx]` | 209 | 175 |
`type/` now has 2 remaining `font-inter` call sites (unmapped `feature` / `learn` description ramps).
## Screenshots
<!-- Storybook visual check still needed before merge — see How to Test. -->
## How to Test
1. `npx tsc --noEmit` — already clean on this branch.
2. `npx vitest run` — 198 files / 1258 tests passed.
3. `npx next build` — compiled successfully.
4. `npm run storybook` and visually diff, especially at `sm` / `md` / `lg` / `xl`:
- Type / ContentLockup (hero, feature, about, book, learn, ask, modal, login)
- Type / SectionHeader
- Type / PageHeader
- Type / HeaderLockup
- Type / TripleStep
- Type / TripleTextBlock
- Type / TextBlock, NumberedList, InputLabel
5. Spot-check marketing pages that compose these (`/`, `/about`, `/learn`, `/use-cases`) for heading and body type.
Expected deltas vs the old hardcoded stacks (token alignment, not bugs):
- Display titles that were 1:1 (e.g. hero `sm` 52/52) now use the token 110% line-height.
- SectionHeader default subtitle at `sm` was 18/32; it is now `text-large-paragraph` (18/130%).
## Notes
- Mapping table and unmappable cases are on [CR-24](https://linear.app/community-rule/issue/CR-24/adopt-typography-token-classes-across-components-retire-font-inter). Highlights for design: no 32px display token; 18/22/500 Bricolage; 24/32/500 Bricolage; 14/18/500 labels; display Regular (400) vs code `font-medium` (500).
- TripleStep CTA `!text-[14px]` left for [CR-123](https://linear.app/community-rule/issue/CR-123/buttons-tone-down-hover-transition-and-audit-interaction-styling-for) (`Button` `fontStyles`).
- Later batches per the ticket: `cards/` → `sections/` → `navigation/` → `modals/` → `controls/` → create-flow.
```
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
Overview
First incremental batch of CR-24: migrate
app/components/type/off handwrittenfont-inter text-[Npx] leading-[…]stacks onto the existing Tailwind type-scale utilities (text-small-paragraph,text-large-heading,text-medium-display, etc.).The scale already lives in
app/tailwind.css@theme; this PR only adopts it. Combos that do not map cleanly are left hardcoded and listed on the ticket for Dan — no new tokens.Changes
text-{size}-{role}utilities (size, line-height, weight, and tracking come from the token).font-interwhere Inter is already the body default. Keptfont-bricolage-grotesque/font-space-groteskbecause thetext-*utilities do not set family.ContentLockup,HeaderLockup,InputLabel,NumberedList,PageHeader,Section,SectionHeader,TextBlock,TripleStep,TripleTextBlock.InputLabelandFeatureGridtests that asserted on the old class strings.Counts in
app/:font-intertext-[Npx]type/now has 2 remainingfont-intercall sites (unmappedfeature/learndescription ramps).Screenshots
How to Test
npx tsc --noEmit— already clean on this branch.npx vitest run— 198 files / 1258 tests passed.npx next build— compiled successfully.npm run storybookand visually diff, especially atsm/md/lg/xl:/,/about,/learn,/use-cases) for heading and body type.Expected deltas vs the old hardcoded stacks (token alignment, not bugs):
sm52/52) now use the token 110% line-height.smwas 18/32; it is nowtext-large-paragraph(18/130%).Notes
font-medium(500).!text-[14px]left for CR-123 (ButtonfontStyles).cards/→sections/→navigation/→modals/→controls/→ create-flow.