patterns-interface-design

# Interface Design Patterns

## Overview

Craft intentional interface designs through systematic discovery. Generic output happens when structural decisions (typography, navigation, data visualization) are treated as mere infrastructure rather than design itself.

**Violating the letter of these rules is violating the spirit of these rules.** Following "most" of the discovery process or applying "some" intentional choices is not compliance.

## When to Use

- Building web components, pages, or applications
- Creating visual design systems
- Establishing typography, color, and spacing decisions
- Designing dark mode or light mode interfaces
- Crafting data visualization or dashboard layouts
- Making navigation or layout architecture decisions

## When NOT to Use

- Purely backend or API work
- Documentation-only tasks
- When design system already exists and must be followed exactly
- Quick prototypes where user explicitly wants minimal styling

## Required Discovery Process

Before proposing any direction, explore these four elements. Do not skip any.

### 1. Domain Exploration

Identify 5+ concepts native to the product's world. These are nouns, verbs, textures, and metaphors that belong to the domain. **Required even for familiar domains.**

| Product Type | Domain Concepts |
|--------------|-----------------|
| Financial dashboard | Ledger, balance, flow, precision, trust |
| Developer tools | Terminal, pipeline, build, deploy, logs |
| Healthcare | Vitals, chart, monitor, care, clinical |
| Creative tools | Canvas, brush, layer, blend, palette |

### 2. Color World

Identify 5+ colors that exist naturally in the product's physical or conceptual space. Build palettes that feel native, not applied over the product. **Required even when brand colors exist.**

| Product Type | Color World |
|--------------|-------------|
| Financial | Deep navy, muted gold, slate gray, paper white |
| Developer | Terminal green, dark gray, syntax highlighting hues |
| Healthcare | Cl