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.

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.

3. Signature Element

Define one distinctive element that could only belong to this product. This is the unforgettable detail. Required even for internal tools.

Examples:

• A specific border treatment unique to the brand
• An unconventional navigation pattern
• A distinctive loading animation
• A characteristic use of typography weight

4. Default Replacement

Name 3 obvious choices and deliberately replace them. If the first thing that comes to mind is the solution, it is probably a default. Required even when defaults seem appropriate.

No exceptions:

• Not for "simple components"
• Not for "internal tools"
• Not for "MVP/prototype"
• Not even if user says "just make it look nice"

Intent Specification

Define these three elements with specifics before coding:

1. Who — Identify the actual person using the interface
2. What — Define what they must accomplish (the verb)
3. How — Articulate how the interface should feel (beyond "clean" or "modern")

Intent must be systemic. Every token, color, and spacing decision reinforces the stated feeling.

Surface and Token Architecture

Build systems, not random choices. See CRAFT-PRINCIPLES.md for complete token architecture.

Primitive Foundation

Every color traces back to these primitives:

Surface Elevation

Surfaces stack. Build a numbered system:

Level 0: Base background (app canvas)
Level 1: Cards, panels (same visual plane)
Level 2: Dropdowns, popovers (floating above)
Level 3: Nested overlays (stacked)
Level 4: Highest elevation (rare)

In dark mode, higher elevation = slightly lighter. The difference between levels should be subtle: a few percentage points of lightness, not dramatic jumps.

The Subtlety Principle

Study Vercel, Supabase, Linear. Their surfaces are barely different but still distinguishable. Their borders are light but not invisible.

The squint test: Squint at the interface. Hierarchy should remain perceivable. No single border or surface should jump out. If borders are the first thing noticed, they are too strong.

Spacing System

Pick a base unit (4px or 8px). Use multiples throughout. Every spacing value should be explainable as "X times the base unit."

Symmetrical padding rule: TLBR must match. Exception: when content naturally creates visual balance.

/* Correct */
padding: 16px;
padding: 12px 16px; /* Only when horizontal needs room */

/* Avoid */
padding: 24px 16px 12px 16px;

Typography Hierarchy

Build distinct levels distinguishable at a glance:

Do not rely on size alone. Combine size, weight, and letter-spacing.

Depth Strategy

Choose ONE approach and commit:

Do not mix approaches. Inconsistent depth strategy is jarring.

Common Mistakes

Red Flags - STOP and Restart Properly

When any of these thoughts occur, STOP immediately:

• "This is just a simple component, defaults are fine"
• "The user wants it fast, skip discovery"
• "I already know what looks good here"
• "Inter/Roboto will work, no need to explore fonts"
• "Standard cards and shadows are professional enough"
• "This is internal tooling, aesthetics matter less"
• "Just make it clean and modern"

All of these mean: The discovery process is being skipped. Restart with proper exploration.

Common Rationalizations

Quality Checklist

Before finalizing any interface design (see references/VALIDATION-CHECKS.md for detailed validation):

Discovery:

• 5+ domain concepts identified
• 5+ native colors explored
• Signature element defined
• 3 defaults named and replaced

Intent:

• User persona specified
• Core action (verb) defined
• Feeling articulated (not "clean" or "modern")

Execution:

• Token primitives established
• Surface elevation system defined
• Single depth strategy applied consistently
• Spacing uses base unit multiples
• Typography hierarchy distinguishable at squint test

Validation:

• Squint test passes (hierarchy visible, no element jumps out)
• No defaults remain unquestioned
• Signature element is memorable

Converted and distributed by TomeVault — claim your Tome and manage your conversions.