Files

T

Bernt 78436cecc2 docs: Foundation Freeze v1.0 + directory reorganization

- 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.

2026-07-02 11:23:10 +00:00

6.8 KiB

Raw Blame History

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

6.8 KiB Raw Blame History Unescape Escape