252 lines
6.8 KiB
Markdown
252 lines
6.8 KiB
Markdown
|
# 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**
|