Body settles at 14px.
Library components use one dependable default. Larger body text remains an intentional opt-in.
01 / Design systemsLTK · 2023 to present
Runway foundations
One switch. Type and space move together.
A responsive typography and spacing model that gives designers and engineers one shared language across Creator, Consumer, and Brand products.
DeviceA section heading, actual sizeSpace between sections
Mobile393pxHeading MDBody copy stays 14px here.20
Tablet768pxHeading MDBody copy stays 14px here.24
Web1440pxHeading MDBody copy stays 14px here.32
RoleLead product designer
ScopeTypography, spacing, variables
PartnersDesign systems, product, engineering
OutcomeOne responsive foundation
01 / The problem
Body text bounced between 14 and 16. Spacing was a guess.
The same interface shipped at different sizes across three LTK platforms. Section gaps drifted from screen to screen, and designers reached for raw values instead of a shared model.
We audited real product surfaces, rebuilt type and spacing as one variable system, and aligned the language in Figma with what engineers already used in code.
3Platforms audited
60+Screens reviewed
1Source of truth
02 / What we shipped
The model in one glance.
ComponentsAll library components publish at body.default at 14px
body.lrgStays as an opt-in override when a product screen needs more presence
HeadingsScale by device across mobile, tablet, and web
SpacingSection rhythm is tokenized while in-component padding stays fixed
The rename
Same names as engineering.
Figma now uses size names that match what engineers already write in code. Designers and engineers can point to the same decision using the same words.
Old in FigmaNew in Figma and codeWhen to use it
Header 01 / 02 / 03 / 04Heading XL / LG / MD / SMPage titles, sections, cards
Display 01 / 02 / 03 / 04Display XL / LG / MD / SMHero and marketing moments
Subtitle 01 / 02 / 03Subtitle LG / MD / SMLabels, tabs, button text
Body 01 / Body 02Body / Default · Body / LRGDefault body and opt-in emphasis
Caption 01 / 02Caption SM · Caption XSMetadata, helpers, legal copy
Behind the audit
This took a village.
Before changing a token, we mapped how typography behaved across Creator, Brand, and Consumer. Every screen came from real product work, so every inconsistency and exception had context.
The audit gave product designers, the design systems team, and engineering one shared surface for comparing what existed with the direction we proposed.
How we moved this fast
The robot did the reps. We made the calls.
Automation connected the repetitive values. The team spent its time on the judgment calls, edge cases, and decisions that define the quality of a system.
9,914Spacing values connectedAutomatically across the library
2,622Component states checkedSo nothing was left behind
41Component pages updatedAcross two working sessions
12Edge cases caught by eyeThen decided with the team
Three takeaways
Type scales with the device.
Headings respond to the selected device mode while body copy stays stable.
Spacing is a set choice.
Teams select from a small shared scale instead of entering a new number on every screen.