Skip to content
design system
Thème d’affichage, actuellement Auto

16 steps · four-pixel base

Spacing

The spacing scale, 4px base, numbered like Tailwind so that p-4 and --rl-space-4 say the same thing. Fractions are spelled: half, 1-5, 2-5.

The scale

  • --rl-space-0 0
  • --rl-space-1 0.25rem
  • --rl-space-2 0.5rem
  • --rl-space-3 0.75rem
  • --rl-space-4 1rem
  • --rl-space-5 1.25rem
  • --rl-space-6 1.5rem
  • --rl-space-8 2rem
  • --rl-space-10 2.5rem
  • --rl-space-12 3rem
  • --rl-space-16 4rem
  • --rl-space-20 5rem
  • --rl-space-24 6rem
  • --rl-space-half 0.125rem
  • --rl-space-1-5 0.375rem
  • --rl-space-2-5 0.625rem

Icons, controls, targets

Heights of controls, and the floor for a pointer target. The smallest pointer target, WCAG 2.2 criterion 2.5.8, and what a 320px panel can afford.

Icon sizes, control heights and the minimum pointer target
TokenValueShown
--rl-icon-sm1rem
--rl-icon-md1.25rem
--rl-icon-lg1.5rem
--rl-control-sm2rem
--rl-control-md2.5rem
--rl-control-lg3rem
--rl-target-min24px