platform-admin/boc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: Foundation Freeze v1.0 + directory reorganization

Browse Source 
- 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.
This commit is contained in:
Bernt
2026-07-02 11:23:10 +00:00
parent 325a872fdb
commit 78436cecc2
17 changed files with 201 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/design/foundations/GRID_ELEVATION.md
+251
View File
@@ -0,0 +1,251 @@
# 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**