Designing systems not screens UX illustration
UX · Technology · Product Design

Designing Systems, Not Screens

Author Manav Tyagi
Published Dec 23, 2025
Read Time 8 min read

Great UX is not created by perfect screens. It emerges from how design adapts to real data, real users, and real technical constraints.

Methodology

Dynamic Reality

Most user interfaces look flawless in design tools. Clean grids, perfect spacing, and ideal content give the illusion of a finished experience. But once that design reaches production, users don’t interact with screens — they interact with systems.

The biggest mistake junior designers make is treating each screen as a separate artboard. Senior designers treat screens as temporary views of a persistent underlying data structure.

The Atomic Mindset: We don't build pages anymore. We build components, tokens, and rules. The page is just a byproduct of the system working correctly.

Comparison

Designing for Chaos

Screens are static and predictable. Systems, however, are subject to the chaos of the real world: latency, broken APIs, and unexpected user behavior.

Designing Screens

  • "Perfect" data only
  • Fixed width/height
  • One-off solutions
  • Visual inconsistency
  • Hard to code

Designing Systems

  • Error/Loading states
  • Responsive logic
  • Reusable patterns
  • Global consistency
  • Dev-ready

"Modern UX design is about building experiences that survive reality."

Tools

The System Toolkit

  • Data Literacy
    Understanding how information flows from backend to interface. If you don't know where the data comes from, you can't design for it.
  • State Management
    Accounting for loading, error, empty, and partial-success states. The "Unhappy Path" is where good UX is proven.
  • Scalable Components
    Building patterns that work across a variety of screen sizes and contexts without breaking.
Foundation

Anatomy of a Design System

The layers that make a design system work:

  • Design Tokens
    The atomic building blocks: colors, spacing, typography scales, shadows. Named variables that connect design to code.
  • Core Components
    Buttons, inputs, cards, modals. The LEGO bricks that compose every interface. Each component = one source of truth.
  • Patterns & Templates
    Common solutions to common problems: forms, navigation, dashboards. Pre-tested, pre-approved layouts.
  • Documentation
    Usage guidelines, do's and don'ts, accessibility requirements. The system only works if people know how to use it.
Principles

Component Design Rules

Guidelines for building components that scale:

Do This

  • Design for all states
  • Use semantic naming
  • Build for flexibility
  • Include accessibility
  • Document edge cases

Avoid This

  • One-off variants
  • Magic numbers
  • Undocumented props
  • Missing focus states
  • Inconsistent spacing
Landscape

Design Systems Worth Studying

System Company Key Strength
Carbon IBM Comprehensive documentation
Material Design Google Motion & interaction depth
Primer GitHub Developer-focused components
Polaris Shopify Merchant experience patterns
Atlassian DS Atlassian Team collaboration patterns

Pro Tip: Study these systems not to copy them, but to understand their thinking. Each system reflects the unique needs and culture of its organization.

Process

Starting Your Own System

A practical path from screens to system:

  • 1. Audit Existing Designs
    Screenshot every screen. Count the button variants, color values, font sizes. Find the inconsistencies.
  • 2. Define Tokens First
    Lock down the foundation: color palette, type scale, spacing grid. These tokens feed everything else.
  • 3. Build Core Components
    Start with the most-used: buttons, inputs, cards. Get these right before expanding.
  • 4. Iterate in Production
    A design system is never "done." Collect feedback, identify gaps, and evolve continuously.

My Take: Scale Intelligence

When designers stop designing screens and start designing systems, experiences become more human, scalable, and enduring.

  • Think Global: Every decision should serve the whole system, not just the current view.
  • Design Logic: Define the rules, don't just paint the outcome.
  • Scale Smart: Build components that grow with the product.
System Design UX Engineering Product Strategy