115 lines
4.4 KiB
Markdown
115 lines
4.4 KiB
Markdown
|
# GLOSSARY
|
||
|
|
|
||
|
|
**Common Language for Landvex Design System**
|
||
|
|
|
||
|
|
| | |
|
||
|
|
|---|---|
|
||
|
|
| **Version** | 1.0 |
|
||
|
|
| **Status** | LOCKED |
|
||
|
|
| **Scope** | All Landvex & quiXzoom documentation |
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## Normative Words
|
||
|
|
|
||
|
|
| Word | Meaning | RFC 2119 |
|
||
|
|
|------|---------|----------|
|
||
|
|
| **MUST** | Obligatoriskt. No exceptions. | MUST |
|
||
|
|
| **MUST NOT** | Förbjudet. Under no circumstances. | MUST NOT |
|
||
|
|
| **SHOULD** | Stark rekommendation. Valid reasons to deviate exist but must be documented. | SHOULD |
|
||
|
|
| **SHOULD NOT** | Stark avrådan. Valid reasons exist but must be documented. | SHOULD NOT |
|
||
|
|
| **MAY** | Valfritt. Truly optional. | MAY |
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## Core Concepts
|
||
|
|
|
||
|
|
| Term | Definition |
|
||
|
|
|------|------------|
|
||
|
|
| **Component** | A reusable UI element with defined behavior, states, and appearance. Examples: Button, Card, Modal. |
|
||
|
|
| **Variant** | A visual or functional alternative of a component within the same component family. Examples: Button has Primary, Secondary, Ghost variants. |
|
||
|
|
| **State** | A condition a component can be in, affecting its appearance and behavior. Examples: Default, Hover, Focus, Disabled, Loading. |
|
||
|
|
| **Token** | A named design decision (value, color, dimension, animation) stored in the design system. |
|
||
|
|
| **Primitive Token** | A raw value with no semantic meaning. Example: `space-4` = 16px, `neutral-500` = #adb5bd. |
|
||
|
|
| **Semantic Token** | A purpose-driven token that describes usage, not appearance. Example: `surface-primary`, `text-secondary`. |
|
||
|
|
| **Component Token** | A token specific to a single component. Example: `button-primary-bg`, `table-row-hover`. |
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## Layout & Structure
|
||
|
|
|
||
|
|
| Term | Definition |
|
||
|
|
|------|------------|
|
||
|
|
| **Page** | A full-screen view with a unique URL or route. The largest unit of navigation. |
|
||
|
|
| **View** | A section within a page that can change independently. May or may not have a unique URL. |
|
||
|
|
| **Screen** | The visible area of a device. Used in responsive contexts ("mobile screen", "desktop screen"). |
|
||
|
|
| **Panel** | A contained sub-section of a view, often with elevation (Card, Modal, Drawer). |
|
||
|
|
| **Module** | A functional grouping of components that work together. Example: Search module (Input + Button + Results). |
|
||
|
|
| **Overlay** | A layer that appears above existing content, dimming or blocking what is beneath. |
|
||
|
|
| **Drawer** | A panel that slides in from an edge of the screen. |
|
||
|
|
| **Modal** | A dialog that appears centered over content, requiring user action before dismissal. |
|
||
|
|
| **Dialog** | Synonym for Modal. Use "Modal" in Landvex documentation. |
|
||
|
|
| **Sheet** | A bottom-aligned panel on mobile, similar to a Drawer. Use "Drawer" unless platform-specific. |
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## Visual
|
||
|
|
|
||
|
|
| Term | Definition |
|
||
|
|
|------|------------|
|
||
|
|
| **Layer** | A z-index level or visual stacking context. |
|
||
|
|
| **Elevation** | The perceived depth of a component, expressed through shadow. |
|
||
|
|
| **Surface** | A background area on which content sits. |
|
||
|
|
| **Backdrop** | The dimmed area behind an overlay or modal. |
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## Interaction
|
||
|
|
|
||
|
|
| Term | Definition |
|
||
|
|
|------|------------|
|
||
|
|
| **Focus** | The state of an element when it receives keyboard input. Visually indicated by a focus ring. |
|
||
|
|
| **Hover** | The state of an element when a pointing device is over it. |
|
||
|
|
| **Active** | The state of an element during user press/click. |
|
||
|
|
| **Disabled** | The state of an element that cannot be interacted with. |
|
||
|
|
| **Loading** | The state of an element waiting for an operation to complete. |
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## Tokens & Colors
|
||
|
|
|
||
|
|
| Term | Definition |
|
||
|
|
|------|------------|
|
||
|
|
| **Brand** | Colors and visual elements that communicate Landvex identity. |
|
||
|
|
| **Semantic** | Colors that communicate meaning (success, warning, danger, info). |
|
||
|
|
| **Status** | A subset of semantic colors indicating system or user state. |
|
||
|
|
| **Neutral** | Grayscale colors without semantic meaning. |
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## Governance
|
||
|
|
|
||
|
|
| Term | Definition |
|
||
|
|
|------|------------|
|
||
|
|
| **Constitution** | The highest-level document. Defines principles that cannot be overridden. |
|
||
|
|
| **Doctrine** | Product-specific interpretation of the Constitution. |
|
||
|
|
| **Specification** | Technical contract defining how to implement. |
|
||
|
|
| **DDR** | Design Decision Record. Documents why a design decision was made. |
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## ÄNDRINGSHISTORIA
|
||
|
|
|
||
|
|
| Version | Datum | Beskrivning |
|
||
|
|
|---------|-------|-------------|
|
||
|
|
| 1.0 | 2026-07-02 | Initial glossary with normative words, core concepts, layout, visual, interaction, tokens, governance |
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## STATUS
|
||
|
|
|
||
|
|
**LOCKED**
|
||
|
|
|
||
|
|
- Mindre revideringar: 1.x-serien
|
||
|
|
- Brytande ändringar: Kräver Architecture Review, ny major-version (2.0+)
|