# GRID & ELEVATION

**Foundations for Layout and Depth**

| | |
|---|---|
| **Version** | 1.0 |
| **Status** | DRAFT |
| **Scope** | Landvex Enterprise Platform |
| **Authority** | DESIGN_SPECIFICATION (nivå 5) |

---

## 1. SPACING SCALE

### 1.1 Primitive Spacing Tokens

| Token | Value | Usage |
|-------|-------|-------|
| `space-0` | 0px | No spacing |
| `space-1` | 4px | Micro spacing, icon gaps |
| `space-2` | 8px | Tight spacing, inline elements |
| `space-3` | 12px | Default component padding |
| `space-4` | 16px | Standard spacing |
| `space-5` | 20px | Medium spacing |
| `space-6` | 24px | Section spacing |
| `space-7` | 32px | Large spacing |
| `space-8` | 40px | Component height (small) |
| `space-9` | 48px | Component height (medium) |
| `space-10` | 64px | Page-level spacing |
| `space-11` | 80px | Major sections |
| `space-12` | 96px | Page margins |

### 1.2 Semantic Spacing Tokens

| Token | Primitive | Usage |
|-------|-----------|-------|
| `gap-xs` | `space-1` | Micro gaps |
| `gap-sm` | `space-2` | Small gaps |
| `gap-md` | `space-4` | Default gaps |
| `gap-lg` | `space-6` | Large gaps |
| `gap-xl` | `space-8` | Extra large gaps |
| `padding-component` | `space-3` | Component internal padding |
| `padding-section` | `space-6` | Section padding |
| `padding-page` | `space-8` | Page padding |
| `margin-component` | `space-4` | Component margin |
| `margin-section` | `space-8` | Section margin |

---

## 2. GRID SYSTEM

### 2.1 Grid Definition

| Property | Value |
|----------|-------|
| Columns | 12 |
| Gutter | `gap-md` (16px) |
| Margin | `padding-page` (40px) |
| Max width | 1440px |
| Breakpoints | See §5 |

### 2.2 Grid Behavior

| Width | Columns | Gutter | Margin |
|-------|---------|--------|--------|
| < 640px | 4 | `gap-sm` (8px) | `space-4` (16px) |
| 640–1024px | 8 | `gap-md` (16px) | `space-6` (24px) |
| > 1024px | 12 | `gap-md` (16px) | `space-8` (40px) |

### 2.3 Common Layouts

| Layout | Columns | Usage |
|--------|---------|-------|
| Full width | 12 | Hero, maps, full-bleed |
| Two column | 6 + 6 | Content + sidebar |
| Three column | 4 + 4 + 4 | Cards, features |
| Four column | 3 + 3 + 3 + 3 | Dashboard, KPIs |
| Sidebar | 3 + 9 | Navigation + content |
| Asymmetric | 4 + 8 | Summary + detail |

---

## 3. BORDER RADIUS

### 3.1 Radius Scale

| Token | Value | Usage |
|-------|-------|-------|
| `radius-none` | 0px | Tables, data grids |
| `radius-sm` | 4px | Small components, tags |
| `radius-md` | 8px | Buttons, inputs, cards |
| `radius-lg` | 12px | Cards, panels |
| `radius-xl` | 16px | Modals, dialogs |
| `radius-full` | 9999px | Pills, avatars |

### 3.2 Component Radius Mapping

| Component | Radius Token |
|-----------|-------------|
| Button | `radius-md` |
| Input | `radius-md` |
| Select | `radius-md` |
| Card | `radius-lg` |
| Modal | `radius-xl` |
| Tag | `radius-full` |
| Table | `radius-none` |
| Data Grid | `radius-none` |

---

## 4. ELEVATION SYSTEM

### 4.1 Shadow Scale

| Token | Value | Usage |
|-------|-------|-------|
| `shadow-none` | none | Flat surfaces |
| `shadow-sm` | 0 1px 2px rgba(0,0,0,0.05) | Cards, resting state |
| `shadow-md` | 0 4px 6px rgba(0,0,0,0.07) | Hover state, dropdowns |
| `shadow-lg` | 0 10px 15px rgba(0,0,0,0.1) | Modals, drawers |
| `shadow-xl` | 0 20px 25px rgba(0,0,0,0.15) | Full-screen overlays |

### 4.2 Elevation Levels

| Level | Token | Z-Index | Usage |
|-------|-------|---------|-------|
| 0 | `shadow-none` | 0 | Background, static content |
| 1 | `shadow-sm` | 10 | Cards, panels |
| 2 | `shadow-md` | 20 | Hover state, dropdowns |
| 3 | `shadow-lg` | 30 | Modals, drawers |
| 4 | `shadow-xl` | 40 | Full-screen overlays |
| 5 | — | 50 | Toasts, notifications |
| 6 | — | 60 | Tooltips |
| 7 | — | 70 | Popovers |
| 8 | — | 80 | Dialogs (highest) |

### 4.3 Component Elevation Mapping

| Component | Resting | Hover | Active/Focus |
|-----------|---------|-------|--------------|
| Card (static) | `shadow-sm` | — | — |
| Card (interactive) | `shadow-sm` | `shadow-md` | `shadow-sm` |
| Button | `shadow-none` | `shadow-sm` | `shadow-none` |
| Input | `shadow-none` | — | `shadow-sm` (focus) |
| Select (dropdown) | `shadow-md` | — | — |
| Modal | `shadow-lg` | — | — |
| Drawer | `shadow-lg` | — | — |
| Toast | `shadow-md` | — | — |

---

## 5. RESPONSIVE BREAKPOINTS

| Name | Width | Target |
|------|-------|--------|
| `xs` | < 640px | Mobile phones |
| `sm` | 640–768px | Large phones, small tablets |
| `md` | 768–1024px | Tablets |
| `lg` | 1024–1280px | Small desktops, laptops |
| `xl` | 1280–1536px | Desktops |
| `2xl` | > 1536px | Large desktops |

### 5.1 Breakpoint Usage

| Context | Primary Breakpoint |
|---------|-------------------|
| Layout changes | `md` (768px) |
| Typography scale | `sm` (640px) |
| Component density | `lg` (1024px) |
| Navigation mode | `md` (768px) |
| Card grid | `sm`, `md`, `lg` |

---

## 6. DENSITY PRINCIPLES

### 6.1 Density Scale

| Density | Spacing | Usage |
|---------|---------|-------|
| Compact | 75% of default | Data-heavy tables, dashboards |
| Default | 100% | Most interfaces |
| Comfortable | 125% of default | Forms, reading-heavy |

### 6.2 Component Density

| Component | Compact | Default | Comfortable |
|-----------|---------|---------|-------------|
| Table row height | 32px | 40px | 48px |
| Card padding | `space-3` | `space-4` | `space-5` |
| Button height | 32px | 40px | 48px |
| Input height | 32px | 40px | 48px |
| List item height | 36px | 44px | 52px |

---

## 7. Z-INDEX PRINCIPLES

### 7.1 Z-Index Scale

| Token | Value | Usage |
|-------|-------|-------|
| `z-base` | 0 | Static content |
| `z-elevated` | 10 | Cards, sticky headers |
| `z-dropdown` | 20 | Dropdowns, menus |
| `z-sticky` | 30 | Sticky elements |
| `z-modal` | 40 | Modals, drawers |
| `z-popover` | 50 | Popovers, toasts |
| `z-tooltip` | 60 | Tooltips |
| `z-dialog` | 70 | Dialogs (highest) |

### 7.2 Z-Index Rules

**MUST NOT** use arbitrary z-index values.
**MUST** use tokens from the scale.
**MUST NOT** exceed `z-dialog` (70).

---

## 8. TOKEN DEPENDENCIES FROM COMPONENTS

Components that reference grid/elevation tokens:

| Component | Token | Usage |
|-----------|-------|-------|
| Card | `shadow-sm`, `radius-lg` | Elevation, corner |
| Card (hover) | `shadow-md` | Hover elevation |
| Button | `radius-md` | Corner |
| Input | `radius-md` | Corner |
| Select | `radius-md` | Corner |
| Select (dropdown) | `shadow-md` | Dropdown elevation |
| Modal | `shadow-lg`, `radius-xl` | Elevation, corner |
| Table | `radius-none` | No corner radius |
| Tag | `radius-full` | Pill shape |
| Page | `padding-page` | Page margins |
| Section | `padding-section` | Section padding |

---

## ÄNDRINGSHISTORIA

| Version | Datum | Beskrivning |
|---------|-------|-------------|
| 1.0 | 2026-07-02 | Initial grid and elevation system |

---

## STATUS

**DRAFT — Under development**