From Visual Choices to Shared Rules

Design systems are often introduced through components, but their real foundation begins earlier. Before a team creates a reusable button, card, field, or navigation item, it needs a clear understanding of the visual decisions that shape those elements. Typography, color roles, spacing, sizing, borders, corner treatments, and layout relationships all influence how components look and behave.

When these decisions are made separately for every screen, small differences begin to appear. Two headings may use slightly different sizes. Similar cards may use different internal spacing. Related buttons may have unrelated corner values. Each choice may appear reasonable on its own, yet the overall interface becomes harder to review as the number of pages grows.

A shared foundation gives these decisions a clear structure. Instead of choosing a new spacing value for every layout, a designer can work from a defined spacing group. Instead of selecting colors by appearance alone, color roles can describe how each value should be used. Typography can follow an organized scale rather than a collection of unrelated text styles.

The first stage is not creation. It is observation. Review existing interface work and record repeated values, visual patterns, and structural relationships. Look for colors that appear in similar situations, text styles that perform the same role, and spacing values that repeat across components.

This review often reveals unnecessary variation. A library may contain several nearly identical text styles or many spacing values that differ only slightly. The goal is not to remove every difference. The goal is to understand which differences have a clear purpose and which ones appeared without a shared rule.

A simple inventory can include:

• Color values and their current uses
• Typography sizes, weights, and line spacing
• Horizontal and vertical spacing
• Component heights and widths
• Border styles and corner values
• Layout columns and content margins
• Repeated shadows or elevation treatments

Once the inventory is complete, related values can be compared and grouped.

Clear naming is one of the central parts of a design system. Names should explain purpose rather than depend only on appearance. A color called “blue” may become confusing when the visual direction changes. A role-based name such as “primary action” or “supporting surface” describes how the value is used.

The same idea applies to typography and spacing. Names such as “heading large,” “body regular,” or “space medium” are clearer when the team understands the structure behind them. The naming method should be readable, predictable, and suitable for continued development.

A useful naming structure often moves from a broad category toward a specific role. For example:

Color → Text → Supporting
Typography → Heading → Medium
Spacing → Layout → Large

This structure helps related values remain grouped and gives future additions a logical place.

Foundations become meaningful when they guide real interface elements. A button may use a defined text style, spacing value, corner treatment, and color role. A card may use the same spacing group and surface rules. A form field may connect to shared borders, typography, and feedback colors.

This relationship should be visible in documentation. Each component reference can note which foundation values it uses and why. When a foundation value changes, the team can review the components connected to it.

This approach also makes discussion clearer. Instead of saying that a button “looks slightly different,” contributors can identify the exact foundation rule that differs.

A foundation reference should provide enough information to guide design decisions without becoming difficult to navigate. Each section can include the value, its role, approved uses, and examples.

A color section may explain which values are used for surfaces, text, borders, actions, and feedback. A typography section may describe heading, body, label, and caption roles. A spacing section may show how values apply inside components and between larger layout areas.

Examples help learners understand how abstract rules appear in real interface work. A spacing value is easier to understand when shown inside a button, between form fields, and around a card. Typography roles become clearer when displayed within headings, paragraphs, labels, and supporting notes.

Foundations are not static. New interface needs may reveal gaps, while older values may no longer match current work. A regular review helps the system remain organized.

During a review, ask:

• Are similar values performing the same role?
• Are any names unclear or misleading?
• Are values being used outside their intended purpose?
• Are new values being added without review?
• Does the documentation match current interface work?
• Are foundation categories still understandable?
• Do component references point to the correct values?

Review findings can be recorded before any changes are made. This gives contributors time to compare related areas and understand the wider effect of a revision.

A design system foundation is valuable because it turns repeated choices into shared guidance. It gives designers a common language for visual decisions and creates a stable base for components, patterns, and documentation. By starting with observation, grouping related values, naming them clearly, and connecting them to real interface elements, teams can develop a system that is easier to understand and maintain.