Design System · Foundations2026
Lapmeta — Foundations, Measured
Femto15
A 4px-scaled foundation for a full product suite — spacing, grids, and documentation people actually read.
Overview
Lapmeta is the design system powering Femto15's product line. I shaped the foundations — spacing scale, grid system, and the documentation surface that ties them together — so every screen across the suite pulls from the same rhythm, and engineering can implement designs without guesswork.
The problem
Product teams were shipping visually similar screens with quietly inconsistent spacing and grids. Every new module re-invented margins and gutters, and the hand-off doc was a static PDF nobody opened. The system needed a single source of truth that designers and engineers could both work from — one that showed the rule and the reason for it on the same page.
Process summary
- 01Audited every live screen and clustered the spacing values in use — collapsed them into a 4px-based scale of sixteen steps.
- 02Defined four grid presets (small 320–599px · medium 600–1135px · large 1136px+ · fluid) with explicit margin and gutter values per tier.
- 03Built the tokens as Figma variables so a single change flows to every consumer.
- 04Wrote documentation pages that pair each rule with an annotated example — a filter panel dimensioned against the spacing scale, a card annotated with 24 / 8 / 4px rhythm.
- 05Handed off to engineering with a matching CSS variable naming convention so tokens map 1:1 from Figma to code.
Screens
Next case study
