Finitless

Spacing

Finitless uses a 4px grid system for consistent spacing. All values are multiples of 4px.

Spacing Scale

xs
4px
Tight padding, icon gaps
sm
8px
Compact spacing, badge padding
md
12px
Form field padding
base
16px
Default spacing, card padding
lg
24px
Card padding, component gaps
xl
32px
Component separation
2xl
48px
Section padding
3xl
64px
Large section breaks
4xl
96px
Hero spacing

Border Radius

Simplified in v0.0.1 — the universal default is 12px for all UI elements.

sm
8px
Small elements, badges
DEFAULT / md
12px
Inputs, buttons, cards (universal default)
lg
16px
Larger cards, modals
xl
24px
Hero sections
full
9999px
Pills, avatars, circular buttons

Container Widths

Form
480px
Login forms, sign-up forms
Content
768px
Article content, narrow layouts
Wide
1024px
Dashboard content
Max
1280px
Full-width layouts

Visual Demo

Spacing in Action

48

Card Title

This card uses p-6 (24px) padding, gap-4 (16px) between icon and text, and space-y-2 (8px) between title and description.

gap-4 (16px)
p-6 (24px)
space-y-2 (8px)
w-12 h-12 (48px)

CSS Custom Properties

:root {
  /* Spacing Scale (4px grid) */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-base: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  /* Border Radius (v0.0.1) */
  --radius-sm: 8px;
  --radius-md: 12px;    /* Universal default */
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Container Widths */
  --container-form: 480px;
  --container-content: 768px;
  --container-wide: 1024px;
  --container-max: 1280px;
}