Principles

UI Foundations is guided by a small set of principles that inform every pattern, component, and token decision.

Rational

Every component, pattern, and token is informed by real usage, Figma source data, and documented decisions — not assumptions.

Inclusive

The system is built for the widest audience. Semantic HTML, keyboard access, visible focus, and assistive-technology support are baseline requirements, not afterthoughts.

Focused

Deliver what is needed, when it is needed. No unnecessary decoration, redundant structure, or irrelevant content.

Design principles

Proximity

Group related controls, labels, descriptions, and actions close enough that their relationship is obvious without extra explanation. Field labels sit with their inputs. Error messages appear next to the field they describe.

Hierarchy

Make the primary task, current context, and next action visually and structurally easier to find than secondary material. Headings, spacing, and emphasis create a clear reading order.

Contrast

Preserve readable foreground/background relationships, visible boundaries, and clearly distinguishable states across every brand and color mode.

Affordance

Interactive elements communicate how they can be used through semantic HTML, state styling, labels, and predictable cursor and focus behavior.

Cognitive load

Reduce the number of simultaneous decisions by grouping choices, removing redundant structure, and exposing only controls needed for the current task.

Consistency

Reuse naming, placement, state treatment, and interaction behavior across related patterns so users and teams can transfer expectations.