Bernt
48236658e8
- Typography v1 (chapter 3):
- Restructured from heading levels (H1-H6) to information levels
- Display, Section Title, Panel Title, Data Heading, Body, UI Label,
Metadata, Caption, Code/Numeric
- Each with: token, weight, usage, frequency
- Accessibility mapping to HTML heading elements
- Rationale: enterprise users scan for information, not headings
- Color System (chapter 4):
- Semantic Foundation: split into Neutral Semantic and Status Semantic
- Status tokens: success/warning/danger/info with surface/border/text
- Brand Palette rule: brand != status, never mix identity and meaning
- Map Layer Palette: restructured by layer (Base Surface, Terrain,
Water, Road Network, etc.)
- DESIGN_ANTI_PATTERNS.md:
- Restructured into 5 categories: visual, code, interaction, content,
AI-specific
- AI anti-patterns: AP-017 to AP-021 (inheritance check, hardcoded
values, token lifecycle, multiple icon libraries, document hierarchy)
- Total: 21 anti-patterns
Rationale: Function-based typography maps to mental models. Semantic
status colors prevent brand/status confusion. Layer-based map palette
enables theme swapping.
255 lines
6.9 KiB
Markdown
255 lines
6.9 KiB
Markdown
# DESIGN ANTI-PATTERNS
|
||
|
||
**What Must Never Be Introduced**
|
||
|
||
| | |
|
||
|---|---|
|
||
| **Version** | 1.0 |
|
||
| **Status** | LOCKED |
|
||
| **Scope** | All Landvex & quiXzoom products |
|
||
| **Authority** | DESIGN_SPECIFICATION (nivå 5 i dokumenthierarkin) |
|
||
|
||
---
|
||
|
||
## Purpose
|
||
|
||
This document lists patterns that are **explicitly forbidden** in the Landvex design system. It exists to:
|
||
|
||
- Prevent recurring mistakes
|
||
- Guide AI agents away from bad defaults
|
||
- Accelerate design reviews ("see Anti-Pattern #7")
|
||
- Maintain consistency as the team grows
|
||
|
||
**Rule:** If a pattern is listed here, it may not be used. No exceptions without Architecture Review.
|
||
|
||
---
|
||
|
||
## AI-Specific Anti-Patterns
|
||
|
||
### AP-017: AI-Created Components Without Inheritance Check
|
||
|
||
**Forbidden:** AI agents creating new components without checking existing specifications and inheritance tree.
|
||
|
||
**Why:** Duplication, inconsistency, bloat.
|
||
|
||
**Rule:** AI must search the component library (Tier 1–3) and verify no existing component can be extended before proposing anything new.
|
||
|
||
### AP-018: AI-Hardcoded Values
|
||
|
||
**Forbidden:** AI agents proposing hardcoded colors, spacing, or dimensions.
|
||
|
||
**Why:** Violates Token Philosophy, creates technical debt.
|
||
|
||
**Rule:** AI must always reference existing tokens or propose new ones through the Design Review Gate.
|
||
|
||
### AP-019: AI-Skipping Token Lifecycle
|
||
|
||
**Forbidden:** AI agents introducing tokens directly as Stable.
|
||
|
||
**Why:** Bypasses governance, risks breaking changes.
|
||
|
||
**Rule:** All new tokens start as Draft. Promotion requires review.
|
||
|
||
### AP-020: AI-Multiple Icon Libraries
|
||
|
||
**Forbidden:** AI agents suggesting additional icon libraries.
|
||
|
||
**Why:** Inconsistent stroke weight, style, and metaphor.
|
||
|
||
**Rule:** One icon library. Period.
|
||
|
||
### AP-021: AI-Breaking Document Hierarchy
|
||
|
||
**Forbidden:** AI agents proposing changes that violate the document hierarchy (e.g., product doctrine contradicting design constitution).
|
||
|
||
**Why:** Destroys governance structure.
|
||
|
||
**Rule:** AI must verify hierarchy compliance before any proposal.
|
||
|
||
---
|
||
|
||
## Visual Anti-Patterns
|
||
|
||
### AP-001: Hero Images
|
||
|
||
**Forbidden:** Large decorative images at the top of pages or dashboards.
|
||
|
||
**Why:** Landvex is a professional tool, not a marketing site. Visual noise competes with data.
|
||
|
||
**Alternative:** Use whitespace, typography hierarchy, or data visualization to create visual interest.
|
||
|
||
### AP-002: Stock Photography
|
||
|
||
**Forbidden:** Generic stock photos of people, cities, or abstract concepts.
|
||
|
||
**Why:** Inauthentic, reduces trust, adds no information.
|
||
|
||
**Alternative:** Use maps, data visualizations, or icons.
|
||
|
||
### AP-003: Illogical Gradients
|
||
|
||
**Forbidden:** Gradients without functional purpose (e.g., blue-to-purple backgrounds).
|
||
|
||
**Why:** Visual noise. Gradients should only indicate elevation, depth, or state.
|
||
|
||
**Alternative:** Solid colors with elevation tokens (`shadow-sm`, `shadow-md`).
|
||
|
||
### AP-004: Glassmorphism Without Function
|
||
|
||
**Forbidden:** Frosted glass effects used purely for aesthetics.
|
||
|
||
**Why:** Reduces readability, performance cost, inconsistent across browsers.
|
||
|
||
**Alternative:** Opaque surfaces with subtle borders.
|
||
|
||
### AP-005: Multiple Shadow Styles
|
||
|
||
**Forbidden:** More than one shadow system in the same product.
|
||
|
||
**Why:** Inconsistent elevation language.
|
||
|
||
**Alternative:** Use the defined elevation scale (see Elevation & Shadows chapter).
|
||
|
||
### AP-006: Multiple Icon Libraries
|
||
|
||
**Forbidden:** Mixing icon sets (e.g., Font Awesome + Material Icons + custom).
|
||
|
||
**Why:** Inconsistent stroke weight, style, and metaphor.
|
||
|
||
**Alternative:** Single icon library (see Iconography chapter).
|
||
|
||
---
|
||
|
||
## Code Anti-Patterns (Design-Related)
|
||
|
||
### AP-007: Hardcoded Values
|
||
|
||
**Forbidden:** Any hardcoded color, spacing, or dimension in component code.
|
||
|
||
**Why:** Breaks theming, untraceable, unmaintainable.
|
||
|
||
**Example:**
|
||
❌ `padding: 16px; color: #3b82f6;`
|
||
✅ `padding: var(--space-4); color: var(--surface-primary);`
|
||
|
||
### AP-008: Undefined Z-Index
|
||
|
||
**Forbidden:** Arbitrary z-index values (`z-index: 9999`, `z-index: 1000000`).
|
||
|
||
**Why:** Unpredictable stacking, debugging nightmare.
|
||
|
||
**Alternative:** Use the defined z-index scale (`z-dropdown`, `z-modal`, etc.).
|
||
|
||
### AP-009: Inconsistent Border Radius
|
||
|
||
**Forbidden:** Mixing border radius styles without purpose (e.g., 4px buttons with 16px inputs).
|
||
|
||
**Why:** Visual inconsistency, amateur appearance.
|
||
|
||
**Alternative:** Use the defined radius scale (`radius-1`, `radius-2`, etc.).
|
||
|
||
### AP-010: Components Bypassing Tokens
|
||
|
||
**Forbidden:** Components that define their own colors or spacing instead of using tokens.
|
||
|
||
**Why:** Creates "shadow system", breaks governance.
|
||
|
||
**Alternative:** Always reference semantic or component tokens.
|
||
|
||
---
|
||
|
||
## Interaction Anti-Patterns
|
||
|
||
### AP-011: Falsely Clickable Elements
|
||
|
||
**Forbidden:** Elements that look clickable but are not (e.g., underlined text that is not a link).
|
||
|
||
**Why:** Violates user trust, increases cognitive load.
|
||
|
||
**Alternative:** Clear visual distinction between interactive and static elements.
|
||
|
||
### AP-012: Multiple Primary CTAs
|
||
|
||
**Forbidden:** More than one primary call-to-action in the same view.
|
||
|
||
**Why:** Dilutes user focus, increases decision fatigue.
|
||
|
||
**Alternative:** One primary action, secondary actions as text or ghost buttons.
|
||
|
||
### AP-013: Layout Shift on Load
|
||
|
||
**Forbidden:** Content that jumps or shifts as data loads.
|
||
|
||
**Why:** Disorienting, causes misclicks, feels unprofessional.
|
||
|
||
**Alternative:** Skeleton screens, fixed dimensions, reserved space.
|
||
|
||
### AP-014: Disabled Tooltips
|
||
|
||
**Forbidden:** Tooltips on disabled elements without explanation.
|
||
|
||
**Why:** User wonders "why is this disabled?" with no answer.
|
||
|
||
**Alternative:** Always explain why an action is unavailable.
|
||
|
||
---
|
||
|
||
## Content Anti-Patterns
|
||
|
||
### AP-015: Vague Error Messages
|
||
|
||
**Forbidden:** Errors like "Something went wrong" or "Error 500".
|
||
|
||
**Why:** Unhelpful, increases support burden.
|
||
|
||
**Alternative:** Explain what happened, why, and what to do next.
|
||
|
||
### AP-016: Placeholder as Label
|
||
|
||
**Forbidden:** Using placeholder text as the only field label.
|
||
|
||
**Why:** Disappears on input, inaccessible, confusing.
|
||
|
||
**Alternative:** Persistent labels above or beside fields.
|
||
|
||
---
|
||
|
||
|
||
|
||
---
|
||
|
||
## Relationship to Other Documents
|
||
|
||
| Document | Role |
|
||
|----------|------|
|
||
| `LANDVEX_DESIGN_CONSTITUTION.md` | Why these anti-patterns matter (principles 6, 7, 19) |
|
||
| `TOKEN_PHILOSOPHY.md` | How tokens prevent AP-007, AP-008, AP-009, AP-010 |
|
||
| `LANDVEX_DESIGN_SPECIFICATION.md` | What to do instead |
|
||
| `DESIGN_ANTI_PATTERNS.md` | What never to do |
|
||
|
||
---
|
||
|
||
## Adding Anti-Patterns
|
||
|
||
1. Propose with: ID, description, rationale, alternative
|
||
2. Design review required
|
||
3. Must be actionable and specific
|
||
4. No vague or subjective rules
|
||
|
||
---
|
||
|
||
## ÄNDRINGSHISTORIA
|
||
|
||
| Version | Datum | Beskrivning |
|
||
|---------|-------|-------------|
|
||
| 1.0 | 2026-07-02 | Initial 21 anti-patterns: visual, code, interaction, content, AI-specific |
|
||
|
||
---
|
||
|
||
## STATUS
|
||
|
||
**LOCKED**
|
||
|
||
- Mindre revideringar: 1.x-serien
|
||
- Brytande ändringar: Kräver Architecture Review, ny major-version (2.0+)
|