Getting started

Layout

The grid, breakpoints, spacing and stacking order every Vela UI screen is laid out on. All of them are variables, so screens in Figma and in code line up.

Grid

Desktop · 12 columns · margin 80 · gutter 20

Tablet · 10 columns · margin 48 · gutter 20

Mobile · 4 columns · margin 20 · gutter 20

Breakpoints

Token	Min width
`bp/sm`	640px
`bp/md`	768px
`bp/lg`	1024px
`bp/xl`	1280px
`bp/2xl`	1536px

Spacing

Padding and gap share one scale. Pick a step from it instead of a raw number.

Step	Value
`gap/4xs`	2px
`gap/3xs`	4px
`gap/2xs`	6px
`gap/xs`	8px
`gap/sm`	12px
`gap/md`	16px
`gap/lg`	24px
`gap/xl`	32px
`gap/2xl`	40px
`gap/3xl`	48px
`gap/5xl`	64px
`gap/6xl`	96px
`gap/7xl`	128px
`gap/8xl`	160px

Stacking order

Token	Value	Used by
`z/base`	0	Page content
`z/dropdown`	1000	Select, Combobox, menus
`z/sticky`	1100	Sticky headers and toolbars
`z/overlay`	1300	Scrims behind dialogs
`z/modal`	1400	Modal & Dialog, Side Panel
`z/popover`	1500	Popover, Date Picker
`z/toast`	1700	Toasts and alerts
`z/tooltip`	1800	Tooltip, always on top