Foundations

Spacing

4px system (Tailwind default). Every layout uses this scale. Don't invent values like 7px or 13px.

Updated Jul 8, 2026 by Leonardo Posada

Scale

Each token equals Tailwind class × 4px. gap-2 = 8px.

TokenPixelsVisual
00px
0.52px
14px
1.56px
28px
2.510px
312px
416px
520px
624px
832px
1040px
1248px
1664px
2080px
2496px

Semantic usage

The most frequent patterns when laying out at Yuno.

ContextValueNote
Card paddingp-6 (24px)Content cards. p-5 for denser cards.
Vertical section gappy-10 (40px)Between large sections of a doc page.
Form field gapgap-1.5 (6px)Between Label and Input inside a field.
Stack of fieldsgap-4 (16px)Between fields in a form.
Button internal gapgap-2 (8px)Between icon and label inside a button.
List row paddingpx-4 py-2.5 (16 / 10px)Menu items, list rows, table cells.

Usage

Do
  • Use multiples of 4 (2, 4, 8, 12, 16, 24…) for every measurement.
  • Prefer gap-* over space-x/space-y in flex/grid.
  • Container vertical padding for dashboard: py-8 or py-10.
  • Page horizontal padding: px-10 on desktop.
Don't
  • Don't invent custom values (7, 11, 13, 27px).
  • Don't mix gap and margin in the same layout — pick one.
  • Don't use magic numbers in style={{ }} — always a Tailwind class.
  • Don't over-use space-y-* — gap is more predictable in grids.