The Origin: A Real Need

The origin story and mission of UI Guideline

UI Guideline was born from a personal necessity while crafting UI components from scratch. Four years ago, when we needed to define a component, we had to search across multiple Design Systems and UI libraries, opening 12 tabs simultaneously to compare how each one approached the same problem.

Back then, the landscape was different: Bootstrap dominated, Tailwind CSS was just emerging with its utility-first concept, Material Design launched its first version, and libraries like Carbon Design, Daisy UI, and Bulma were highly popular.

The Problem We Faced

Imagine needing to define a Toggle Button. You’d open documentation from multiple systems only to discover:

  • One calls it Switch 😵‍💫
  • Another calls it Toggle 🙁
  • A third calls it Button Group 😖
  • Yet another uses Toggle Group 😭
  • Some refer to it as Segmented Control 🤕

This inconsistency made research exponentially harder. Hours were lost just trying to find the right documentation, and once found, more hours were spent identifying patterns, comparing props, and aligning best practices across systems.

Only after this extensive research could we finally start defining the component.

The Solution: UI Guideline

From that pain point, UI Guideline was born: the need to gather the wisdom of the best Design Systems of each era in one place, to save hours of research and become the UI Bible.

UI Guideline is not a component library

Our philosophy is simple: there are excellent components and libraries out there, Shadcn/UI, Radix UI, Base UI, and many others that allow you to build robust, accessible components.

We didn’t want to create yet another library. We wanted to synthesize collective wisdom in one place.

When someone needs to define a Modal, for example, we hope their first thought will be: “I’ll check UI Guideline”—because that’s our goal: to synthesize, compare, and standardize everything in one place.

UI Guideline is:

  • A synthesis of the top Design Systems: we analyze, compare, and extract the best from each.
  • A unified source of truth: consistent naming, patterns, and conventions in one place.
  • Designer and developer friendly: bridging both worlds with clear, accessible documentation.
  • Optimized for humans and AI: structured content that both people and LLMs can leverage efficiently.
  • The UI Bible: your first stop when defining any UI component.

Our Mission: Bridging Design and Development

UI Guideline aims to shorten the gap between design and development by unifying patterns, naming conventions, and best practices in a single source of truth.

One of our core premises is that we’re not exclusively focused on developers. The developer community has received tremendous support and resources over time: countless libraries, frameworks, documentation, and tools.

However, the design industry, particularly UI design, hasn’t received the same level of structural support. While tools like Figma have helped bridge the design-development gap, there’s still a lack of guidelines and structure in this industry.

Design has often been treated as something purely artistic, driven by taste and aesthetics. But we firmly believe that without sacrificing beauty or creativity, we can structure and bring consistency to the design process.

Designers Should Think One Layer Above

Designers shouldn’t waste their time and creativity, crafting primitive components.

There are plenty of libraries out there that have already defined Buttons, Text Inputs, Modals, and other foundational elements. We believe designers should operate one layer above—taking those standardized components and using them to bring user-focused products to life.

UI Guideline provides that foundation: the research is done, the patterns are identified, the conventions are clear. Designers can confidently build upon this knowledge without starting from scratch every time.

Our Philosophy: Anatomy First

At the core of UI Guideline is our belief in Anatomy First—the idea that every component should be defined starting from its anatomy. The anatomy is not just documentation; it’s the blueprint that informs:

  • Composition structure: What parts exist and how they relate
  • Naming conventions: Consistent terminology across systems
  • Best practices: Patterns proven by the industry’s best

This approach works the same way in code (Composition Components) and design (Figma layer structure). It’s the same system of thinking applied to different mediums.

The future of UI Guideline

The industry is evolving rapidly—with AI, LLMs, and tools like Model Context Protocol (MCP) transforming how we build products. In this context, having clear, consistent, and unified patterns is no longer optional—it’s essential.

UI Guideline exists so you don’t have to open 12 tabs, compare inconsistent naming, or waste hours researching. We’ve done that work for you.

Whether you’re a designer defining your first component library or a developer implementing a complex system, UI Guideline is where you start.

Built from necessity. Refined by experience. Shared with the community.

UI Guideline - The Design System… of top Design Systems.