> For the complete documentation index, see [llms.txt](https://docs.devlaunchers.org/dl-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.devlaunchers.org/dl-docs/universal-design-system/universal-design-system/getting-started/what-is-uds.md). # What is UDS? ## 🌌 Universal Design System (UDS) ### Overview The **Universal Design System (UDS)** is the modular, token-driven design system powering Dev Launchers’ digital products. Built for flexibility, accessibility, and theme-agnostic scalability, UDS provides a shared language between design and development to create seamless, inclusive user experiences across platforms. Rooted in the principles of **Atomic Design** β€” and extended with our own **Subatomic token architecture** β€” UDS is engineered to scale with evolving product needs, support complex theming logic, and maintain visual and semantic consistency across all components. *** ### 🎯 Core Principles * **Token-First Architecture**\ Every visual decision (color, spacing, typography, radius, etc.) is defined by reusable tokens, enabling consistency, theming, and brand flexibility at scale. * **Theme-Agnostic Logic**\ Our design system separates contrast from color, allowing full light/dark mode support and creative palette swaps β€” all without breaking accessibility or UI logic. * **Accessibility by Design**\ With semantic tags, WCAG-compliant contrast mapping, and descriptive toggles baked into components, accessibility isn’t an afterthought β€” it’s the default. * **Modularity and Reuse**\ Built using a strict atomic hierarchy (with atoms, molecules, organisms, templates, and pages), every element is composable and reusable across products. * **Appearance Layers**\ Surface, content, border, and ring layers allow us to control contrast and behavior independently, enabling sophisticated theming and state control without overcomplicating variants. *** ### 🧬 Key Innovations * **Subatomic Layer**\ A foundational tier for all design decisions β€” where tokens are defined and aliased upward. Enables fast rebranding, reduced overrides, and high adaptability. * **Contrast-Driven Theming**\ Instead of tying color directly to meaning, we use contrast tiers (01–10) re-aliased per theme (light/dark), enabling tokens like `theme/onyx/04` to intelligently adapt across modes. * **Semantic + Status Mapping**\ Tokens are aliased into semantic roles (`surface/default`, `content/inverse`) and dynamic states (`status/priority`, `status/toggle`) β€” streamlining both static and interactive components. * **Built-In Accessibility Tags**\ Components like `Text` include hidden semantic tag layers to help designers reflect correct DOM structure (e.g., headings vs. labels) without relying on visual cues alone. *** ### πŸ”„ Why It Matters * **For Designers:**\ Enables expressive UI with baked-in accessibility, mode support, and creative flexibility β€” without chaos or guesswork. * **For Developers:**\ Reduces overrides, improves maintainability, and standardizes implementation via semantic, layered token usage. * **For the Organization:**\ Future-proofs products, simplifies theming and accessibility compliance, and ensures brand and UX cohesion across all touchpoints. *** ### 🌱 In Practice From buttons to dashboards, UDS ensures every component is: * 🎨 Theme-aware * β™Ώ Accessible * 🧱 Composable * πŸ” Reusable * πŸ“ Scalable This system empowers Dev Launchers to deliver beautiful, performant, and inclusive experiences β€” today and as our ecosystem evolves. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.devlaunchers.org/dl-docs/universal-design-system/universal-design-system/getting-started/what-is-uds.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.