Bernt
78436cecc2
- FOUNDATIONS-v1.0.md: - Freeze contract for Landvex Design System - Scope: Motion, AI Principles, Semantic Colors, Grid, Elevation, Typography, RFC Template, Definition of Done - Reference components: Button, Input, Select, Card (all ~83%) - Invariants: token rules, component rules, accessibility rules, AI rules - Change policy: no new foundation concepts without v2.0 RFC - Versioning: 1.0.x patches, 1.x.0 new components, 2.0.0 new foundations - Compatibility matrix for all foundations and components - Directory reorganization: - docs/design/foundations/ → frozen foundation documents - docs/design/components/ → component RFCs - docs/design/README.md → navigation and structure - Foundation documents moved: - TOKEN_PHILOSOPHY, SEMANTIC_COLOR_SYSTEM, GRID_ELEVATION - AI_DESIGN_PRINCIPLES, COMPONENT_TEMPLATE, RFC_DEFINITION_OF_DONE - DESIGN_ANTI_PATTERNS, COMPONENT_DECISION_TREE, GLOSSARY - BRAND_PALETTE, RELEASE_DEFINITION, SEMANTIC_COLOR_SYSTEM_REVIEW - Component RFCs moved: - RFC-002-Input, RFC-003-Select, RFC-004-Card Rationale: Clear separation between foundations (stable platform) and components (built on top). Foundations v1.0 frozen — components can be added freely within v1.x, but foundations require v2.0 RFC to change. This prevents gradual erosion of the design system architecture.
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**
|