Layout & Spacing

:::tip Core Principle The spacing system is based on a 4px base grid — all spacing values are multiples of 4. Managed through a unified Spacing Scale to ensure consistent visual rhythm and clear hierarchy. :::

---

Spacing Scale

Token	Value	Usage
spacing-4	4px	Icon-to-text gap, tight element inner spacing
spacing-8	8px	Form element inner spacing, list item spacing
spacing-12	12px	Button inner spacing, card element spacing
spacing-16	16px	Card padding, section spacing
spacing-24	24px	Module spacing, group spacing
spacing-32	32px	Large section spacing
spacing-40	40px	Page-level section spacing
spacing-48	48px	Page-level large spacing
spacing-72	72px	Page top / bottom large whitespace

The spacing number equals its pixel value: spacing-16 = 16px — intuitive with no conversion needed.

---

Selection Guide

Context	Recommended spacing	Notes
Compact components (Inline)	4–8px	Icon gap, tag inner spacing
List / Table	8–12px	Row spacing, cell inner spacing
Section / Container	12–16px	Card padding, form area
Page sections	24–48px	Module spacing, paragraph spacing
Page level	40–72px	Above-the-fold whitespace, bottom spacing

---

Responsive Grid

Breakpoint System

Breakpoint	Width	Columns	Gutter	Margin
Desktop Standard	≥ 1440px	12	24px	auto
Desktop Compact	1024–1439px	12	20px	auto
Tablet Landscape	768–1023px	8	16px	24px
Tablet Portrait	600–767px	4	16px	16px
Mobile	< 600px	4	12px	16px

Maximum Content Width

• Desktop Standard — Max content width 1440px, centered
• Desktop Large — Max content width 1200px, centered

---

Page Layout

Page layout follows this structure:

• Fixed top navigation bar, height 64px
• Left sidebar width 240px (collapsible)
• Content area fills remaining space
• Content area horizontal padding 24–48px (responsive)

:::info Layout Principles

• Content area is always centered within the available space
• Content area expands automatically when the sidebar is collapsed
• Sidebar is hidden on mobile, replaced by a hamburger menu :::

---

Border Radius

Token	Value	Usage
radius-2	2px	Small elements (tags, badges)
radius-4	4px	Inputs, buttons
radius-5	5px	Default component border radius
radius-8	8px	Cards, dropdown menus
radius-12	12px	Large cards, dialogs
radius-16	16px	Dialogs, overlays
radius-full	9999px	Pill shape, avatars

Border radius is referenced via CSS variables: border-radius: var(--Radius_5)

---

Shadows & Elevation

Drop Shadow

Level	Parameters	Usage
Default	0 1px 3px rgba(0,0,0,0.08)	Card default state
Emphasized	0 4px 12px rgba(0,0,0,0.12)	Card hover state, dropdown menus

Layer Shadow

Level	Parameters	Usage
Layer 1	0 1px 2px rgba(0,0,0,0.06)	Subtle layering
Layer 2 (Elevated)	0 4px 16px rgba(0,0,0,0.1)	Floating layers, dialogs

---

Accessibility

Minimum Touch Target

All interactive elements must have a touch target no smaller than 44 × 44px (WCAG 2.1 AA).

Spacing Consistency

Spacing between elements within the same container must be consistent to avoid visual rhythm disruption.

Touch-Friendly

Spacing on mobile should be appropriately increased to ensure comfortable finger interaction.

---

Design Checklist

Confirm before each design review:

• All spacing values come from the Spacing Scale (multiples of 4)
• Border radius uses token references, not hardcoded values
• Responsive breakpoints correctly follow Grid rules
• Interactive elements have touch targets ≥ 44px
• Page layout follows the Grid system
• Shadow level matches the element's elevation level

---

Usage

Tailwind Class

// Spacing
<div className="px-16 py-8 gap-8" />    // padding-x: 16px, padding-y: 8px, gap: 8px
<div className="p-24 mb-32" />           // padding: 24px, margin-bottom: 32px

// Border radius
<div className="rounded-[var(--Radius_5)]" />
<div className="rounded-full" />          // Pill shape

// Shadows
<div className="shadow-sm" />             // Default shadow
<div className="shadow-md" />             // Emphasized shadow