Spacing

Bumi uses a 4px base unit. Every margin, padding, and gap should be a multiple of 4. This creates a consistent vertical and horizontal rhythm across all components.

Base Unit

1 unit = 4px

Spacing Scale

Token	px	rem	Common Usage
space-1	4px	0.25	Tight gaps (icon-to-text in badges)
space-2	8px	0.5	Default icon-to-text gap, inline spacing
space-3	12px	0.75	Input internal padding (vertical), list item gap
space-4	16px	1.0	Card internal gaps, button horizontal padding
space-5	20px	1.25	Card padding, page padding (mobile)
space-6	24px	1.5	Section sub-gaps, form field spacing
space-8	32px	2.0	Section gaps, card-to-card spacing
space-10	40px	2.5	Page padding (desktop), major section gap
space-12	48px	3.0	Major section separators
space-16	64px	4.0	Page-level vertical spacing

Spacing Scale

4

8

12

16

20

24

32

40

48

64

Component Padding

Component	Padding	CSS
Card	20px	padding: 20px
Button (default)	8px 16px	padding: 8px 16px
Button (small)	6px 12px	padding: 6px 12px
Button (large)	12px 24px	padding: 12px 24px
Input	10px 14px	padding: 10px 14px
Badge / Pill	2px 8px	padding: 2px 8px
Table cell	12px 16px	padding: 12px 16px
Modal body	24px	padding: 24px
Dropdown item	8px 12px	padding: 8px 12px

Section Gaps

Context	Gap
Between cards in a grid	16px (gap: 16px)
Between sections on a page	32px
Between major page regions	48px
Between form fields	24px

Page Padding

Platform	Value
Desktop web	40px
Tablet	24px
Mobile web / React Native	20px

Sidebar Width

State	Width
Expanded	240px
Collapsed	64px (icon-only)

Border Radius

Token	px	Usage
radius-sm	6px	Badges, pills, small tags
radius-md	8px	Buttons, inputs, dropdowns
radius-lg	12px	Cards, panels
radius-xl	14px	Mobile cards, floating shell
radius-2xl	16px	Modals, bottom sheets
radius-3xl	20px	Member card, special cards
radius-full	44px	Phone frame mock, avatar circles

Border Radius Preview

sm

6px

md

8px

lg

12px

xl

14px

2xl

16px

3xl

20px

full

44px

The Floating Shell

The floating shell is the signature RetailOS layout. The app sits inside a container with outer margin and rounded corners.

.floating-shell {
  margin: 12px;           /* Outer margin on all sides */
  border-radius: 14px;    /* Rounded corners */
  overflow: hidden;
  /* Shadow applied separately --- see Elevation */
}

CSS Custom Properties

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 14px;
  --radius-2xl: 16px;
  --radius-3xl: 20px;
  --radius-full: 44px;

  --sidebar-width: 240px;
  --sidebar-collapsed: 64px;
  --page-padding: 40px;
}

@media (max-width: 1024px) {
  :root { --page-padding: 24px; }
}
@media (max-width: 640px) {
  :root { --page-padding: 20px; }
}

DO and DON'T

DO

• Always use multiples of 4px for spacing
• Use the token names in code, not raw pixel values
• Keep card padding at 20px consistently across all apps
• Use gap (flexbox/grid) instead of margins between siblings

DON'T

• Don't use odd pixel values (13px, 17px, 22px) for spacing
• Don't mix padding conventions within the same component type
• Don't reduce card padding below 16px even on mobile --- the content needs room to breathe
• Don't use negative margins to compensate for inconsistent spacing