# Sections

This file defines all sections, their ordering, impact levels, and descriptions.
The section ID (in parentheses) is the filename prefix used to group rules.

---

## 1. Design Intent (intent)

**Impact:** CRITICAL
**Description:** Styling without understanding the UI's purpose produces polished but bloated interfaces. Auditing user goals, removing unnecessary elements, and reducing cognitive load before touching CSS prevents overengineered markup and creates focused, effective UI.

## 2. Visual Hierarchy (hier)

**Impact:** CRITICAL
**Description:** Wrong hierarchy makes everything compete for attention, creating noisy, chaotic interfaces. Size, weight, and color are the three levers that direct the eye — misusing them is the #1 cause of amateur-looking UI.

## 3. Layout & Spacing (space)

**Impact:** CRITICAL
**Description:** Cramped layouts with inconsistent spacing are the most visible amateur tell. Generous, systematic whitespace creates clarity, groups related elements, and makes interfaces feel professional.

## 4. Typography (type)

**Impact:** HIGH
**Description:** Poor font choices, wrong line heights, and excessive line lengths destroy readability across every screen. Typography affects every piece of text in the interface.

## 5. Color Systems (color)

**Impact:** HIGH
**Description:** Ad-hoc color choices create inconsistent, inaccessible interfaces. A systematic palette with proper shade ranges and accessible contrast ratios builds user trust.

## 6. Depth & Shadows (depth)

**Impact:** MEDIUM
**Description:** Flat interfaces lack visual cues for elevation and interactivity. A consistent shadow scale creates dimension and guides user attention to interactive elements.

## 7. Borders & Separation (sep)

**Impact:** MEDIUM
**Description:** Over-reliance on borders creates cluttered, busy interfaces. Replacing borders with spacing, shadows, and background color differences produces cleaner separation.

## 8. Images & Content (img)

**Impact:** LOW-MEDIUM
**Description:** Uncontrolled images, poor text overlays, and neglected empty states break layouts and reduce perceived quality.

## 9. Polish & Details (polish)

**Impact:** LOW
**Description:** Small finishing touches — accent borders, custom icons, subtle gradients — compound into a polished, professional feel.
