shared/references/design-principles.md

# Design Principles

Use principles to solve communication, not to imitate a design-school checklist

## Decision priority

Evaluate in this order

1. purpose and message
2. hierarchy
3. grouping and alignment
4. composition and balance
5. legibility and contrast
6. brand/product fidelity
7. craft and physical coherence
8. expressive finish

If an earlier layer fails, later polish does not rescue the design

## Hierarchy

Create an intentional order of attention

Use visual weight through

- scale
- value contrast
- saturation
- isolation
- position
- detail
- face or gaze cues
- directional lines
- motion cues

Avoid giving several elements equal maximum weight

A design can contain many elements while still having one dominant event

## Alignment

Use a small set of visible or implied anchors

Elements that belong together should share edges, centers, baselines, axes, or spatial logic

Freeform composition still needs anchors

Reject almost-aligned elements that create accidental tension

## Proximity and grouping

Place related information closer than unrelated information

Use spacing before containers

Do not add cards, boxes, pills, dividers, or background shapes when proximity and alignment already communicate the group

## Contrast

Use contrast to clarify difference in role

Contrast can come from

- value
- size
- weight
- color
- texture
- shape
- orientation
- density
- depth

Do not make every element high contrast

## Balance

Balance visual weight around the optical field, not the mathematical center

Symmetry can communicate formality, calm, order, or monumentality

Asymmetry can create energy and directional movement

Neither is inherently better

## Rhythm and repetition

Repeat spacing, type roles, shapes, crop behaviors, and motifs enough to create continuity

Introduce variation deliberately, not randomly

## Scale

Use scale to state importance and create relationships

A large element should be large because it is important, immersive, or conceptually exaggerated, not because empty space felt uncomfortable

## Negative space

Treat empty space as active structure

It can

- isolate the hero
- reserve text
- create pace
- increase perceived quality
- separate groups
- direct movement

Empty space with no compositional job is not automatically good design

## Figure-ground

Make the intended subject separable from its surroundings through value, edge, scale, depth, texture, or isolation

Avoid backgrounds that compete with the hero at the same frequency and contrast

## Consistency and exception

Build a consistent rule, then break it only when the exception has a clear job

A deliberate exception should become more noticeable because the underlying pattern is stable

## Simplicity

Simplicity means removing what does not help the job

It does not require minimalism, empty layouts, or neutral colors

Complex work can be clear when hierarchy and grouping are strong

## Craft

Inspect details after structure passes

Craft includes

- clean edges
- correct glyphs
- optical alignment
- deliberate crops
- material coherence
- plausible contact and shadow
- consistent texture scale
- precise brand marks
- clean transitions

Do not spend craft effort on details the viewer should never notice while the hierarchy remains weak