Design System · Foundations · 2026

Lapmeta — Foundations, Measured

A 4px-scaled foundation for a full product suite — spacing, grids, and documentation people actually read.

Femto15

Lapmeta — Foundations, Measured cover
Fig. 01 — Femto15

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

Audited every live screen and clustered the spacing values in use — collapsed them into a 4px-based scale of sixteen steps.

Screens

System overview — Lapmeta V1.0, the coral / charcoal / gray core.
01System overview — Lapmeta V1.0, the coral / charcoal / gray core.
Spacings — a 4px scale from 4px to 192px, visualized as proportional bars.
02Spacings — a 4px scale from 4px to 192px, visualized as proportional bars.
Grids — small, medium, large, and fluid presets with explicit margins and gutters.
03Grids — small, medium, large, and fluid presets with explicit margins and gutters.
Documentation — every rule paired with an annotated component example.
04Documentation — every rule paired with an annotated component example.