Best of Design Systems — 2025

1. 1
   Article

   Medium·42w

   14 logic-driven UI design tips to improve any interface

   A comprehensive guide presenting 14 practical UI design principles based on logic rather than intuition. Covers essential topics including proper spacing using 8-point grids, WCAG accessibility contrast ratios (3:1 for UI elements, 4.5:1 for text), button hierarchy and target sizes, typography best practices, and visual consistency. Demonstrates these principles by transforming a poorly designed profile page interface, addressing issues like inadequate contrast, confusing navigation, poor spacing, and accessibility problems. Emphasizes that good UI design follows structured guidelines rather than artistic instinct.

   252

   9
2. 2
   Video

   HuXn WebDev·1y

   THE MOST ADVANCE REACT.JS COURSE: THE BIGGEST REACT.JS COURSE ON THE INTERNET ( PART 4 )

   This comprehensive React.js course covers React fundamentals, hooks, TypeScript, UI component libraries, state management with Zustand and Redux Toolkit, animations with Framer Motion, and the testing of components. The final part delves into building a design system in Figma, leveraging tools like Storybook, Style Dictionary, and CLsx. It also includes setting up a complete authentication system and using Figma for creating design systems, and generating style tokens for consistency.

   238
3. 3
   Article

   TkDodo·19w

   Designing Design Systems

   An experienced frontend engineer shares their perspective on building effective design systems, emphasizing that success requires more than visual design. The post outlines 30+ principles for creating robust design systems, covering API design, type safety, accessibility, composition patterns, performance, and developer experience. Key themes include balancing constraints with flexibility, prioritizing type safety and documentation, building for common use cases rather than edge cases, and treating adoption as a cultural challenge rather than purely technical.

   226

   3
4. 4
   Article

   Lobsters·19w

   Vanilla CSS is all you need

   Modern CSS has evolved to include native variables, nesting, container queries, and advanced features like :has() and color-mix(), making build tools and preprocessors unnecessary for many projects. An analysis of three production applications from 37signals (Campfire, Writebook, and Fizzy) reveals a consistent nobuild CSS architecture using OKLCH colors, character-based spacing, semantic component classes with minimal utilities, and progressive adoption of cutting-edge CSS features. The approach demonstrates that vanilla CSS can handle real-time chat, publishing platforms, and project management tools with 14,000 lines across 105 files, achieving sophisticated interactions like animated dialogs, dynamic theming, and stateful UI without JavaScript or build steps.

   213

   15
5. 5
   Article

   Brad Frost·17w

   Agentic Design Systems in 2026

   Design systems combined with AI enable new collaborative workflows where non-technical team members can verbally describe features and see them generated using production-grade components. The Storybook MCP tool demonstrates this approach, constraining AI generation to use established design system standards rather than arbitrary code generation. This "DS+AI" formula creates coded prototypes that short-circuit traditional design review cycles while maintaining organizational quality standards.

   171
6. 6
   Article

   Qt·20w

   Atomic Design Systems: Why the Labels Don’t Matter

   Atomic design remains relevant in 2025, but not through rigid chemistry labels. The methodology's creator, Brad Frost, confirms the labels were never the point—hierarchical composition is. Modern design systems should use semantic, purpose-driven naming (like Modal.Warning.SpeedLimit instead of Organism_7) that communicates intent clearly. Design tokens have become the essential foundation layer, providing single sources of truth for colors, spacing, and typography. Templates and pages remain valuable for maintaining layout consistency. The key is building systems that help teams create better products faster, not debating whether components are atoms or molecules.

   162

   1
7. 7
   Article

   Hacker News·31w

   Reshaped is now open-source

   Reshaped, a design system that bridges React components and Figma libraries, has become fully open source after five years of paid development. The creator initially built it to solve the 80% of common web design patterns while providing flexibility for custom solutions. After making the React package free two years ago, both the React library source code and Figma library are now publicly available on GitHub and Figma Community respectively.

   141

   3
8. 8
   Article

   Community Picks·1y

   Building a Design System as a Solo designer in a startup

   The post shares a detailed experience of building a design system as a solo designer in a startup environment. It highlights the challenges of creating an efficient design infrastructure, the process of learning and setting up components and documentation, and the importance of collaboration with engineering teams. The journey includes transitioning from initial failures to a more robust version using tools like ShadCN UI, Supernova, and AI integrations, resulting in significant improvements in product usability and company revenue.

   124

   3
9. 9
   Article

   The New Stack·16w

   Web Components Are the Comeback Nobody Saw Coming

   Web components are experiencing a resurgence as developers tire of framework complexity and bloated bundles. Native browser APIs like custom elements and Shadow DOM offer framework-agnostic, lightweight alternatives that work across React, Vue, or vanilla JavaScript without modification. Major browser support is now stable, and libraries like Lit have improved developer experience. The interoperability advantage makes web components ideal for design systems and microfrontends, allowing teams to build reusable UI components once and deploy them anywhere. As performance budgets tighten and framework fatigue sets in, the native web platform capabilities are proving sufficient for most modern applications.

   110

   13
10. 10
    Article

    LogRocket·21w

    Is retro design making a comeback?

    Retro design elements from the 90s—neon colors, pixel art, maximalist layouts, and bold typography—are resurging in modern interfaces. The piece explores how nostalgic design patterns can boost user engagement and brand identity when balanced with contemporary UX principles. It examines which vintage aesthetics work today, common pitfalls to avoid, and frameworks for blending nostalgia with accessibility and usability standards.

    110

    13
11. 11
    Article

    Linear·17w

    Design is more than code

    Design should focus on understanding and defining problems before jumping to solutions, rather than being reduced to code execution. The design process involves two stages: conceptual (finding the right form and direction based on problem understanding and product vision) and execution (building it out). While new tools and AI make execution easier, there's a risk of devaluing the strategic thinking that happens before coding—questioning problems, aligning stakeholders, and making intentional decisions about product direction. The concern isn't about whether designers should code, but whether the industry will lose the patience for deep consideration and problem-solving in favor of rapid output.

    103
12. 12
    Article

    Storybook·21w

    Storybook MCP sneak peek

    Storybook MCP is a new integration that provides AI coding agents with machine-readable component metadata from your Storybook setup. It helps agents generate higher quality code by giving them access to your existing component patterns, usage examples, and types. The system includes a self-healing loop that runs component tests and allows agents to fix their own bugs autonomously. Benchmarks show 3× faster code generation with 50% fewer tokens while maintaining quality standards. Early access begins December 2 for teams with mature React design systems.

    96

    1
13. 13
    Article

    UX Planet·29w

    7 UX Skills that will be DEAD by 2026: AI will replace them

    Seven traditional UX design skills are predicted to become obsolete by 2026 due to AI automation and changing industry demands. Static wireframing in Figma is being replaced by interactive prototypes built with AI-powered tools like Replit and Lovable. Manual handoffs to developers are giving way to design-to-code workflows that generate functional components. Traditional usability testing is being supplemented by AI-driven analysis and hybrid testing systems. The shift moves away from designing for average users toward adaptive, personalized experiences, replacing click-based navigation with gesture-first patterns, and emphasizing data-informed decisions over intuition. Modern UX designers must understand business metrics and ROI to remain strategically relevant.

    86

    13
14. 14
    Article

    The Miners·33w

    Design Systems: The True Source of Frontend Peace How Design Systems can save you

    Design systems provide consistency, scalability, and accessibility to modern digital products by establishing standardized components and guidelines. They help frontend teams maintain coherent user interfaces across applications while reducing development time and improving user experience. The approach addresses the chaos that emerged in early web development by creating structured, reusable design patterns.

    86
15. 15
    Article

    Medium·42w

    Top UI/UX design trends to watch in 2025

    UI/UX design in 2025 focuses on intelligent design systems with AI-assisted components, meaningful microinteractions, and subtle personalization. Key trends include voice UI integration, accessibility as a foundation rather than afterthought, smarter Figma workflows, motion design integration, trust-building interfaces, and adaptive UI that responds to user environment. The emphasis shifts from following trends blindly to understanding user needs and creating purposeful, accessible experiences.

    86

    3
16. 16
    Article

    UX Planet·26w

    Common UX mistakes everyone still makes 2.0

    Explores six persistent UX mistakes developers make when building applications, particularly in low-code environments. Covers consistency in design systems, interaction patterns, whitespace management, widget selection, choosing between tables and layout grids, and understanding cards versus panels. Emphasizes following established design system guidelines over personal preferences and provides practical rules for making better UX decisions.

    80

    1
17. 17
    Article

    DOC·27w

    DOC • The UX butterfly effect

    Design decisions create ripple effects that extend far beyond their immediate purpose, often leading to unintended consequences. Using social media platforms like TikTok as a case study, this piece demonstrates how reinforcing feedback loops can generate both societal impacts (mental health issues, reduced study time) and environmental costs (massive CO₂ emissions from data centers). Systems maps, impact ripple canvases, and iceberg visuals are introduced as practical tools to identify and plan for these hidden consequences by revealing the invisible components—culture, values, beliefs—that drive unexpected outcomes. Organizations that ignore broader systemic impacts face regulatory penalties, while those that map their systems can better understand their role in society and innovate more responsibly.

    79
18. 18
    Article

    Lobsters·45w

    Physicality: the new age of UI

    A comprehensive exploration of iOS design evolution from skeuomorphic to flat design, leading to a prediction of the next era focused on 'physicality' and dynamic glass-like interfaces. The author analyzes how VisionOS design principles might influence future iOS redesigns, proposing a 'Living Glass' concept where UI elements behave like real materials with dynamic lighting, reflections, and spatial depth. The piece examines the technical and design challenges of implementing such interfaces across Apple's ecosystem.

    73

    5
19. 19
    Article

    GitHub Blog·21w

    Level up design-to-code collaboration with GitHub’s open source Annotation Toolkit

    GitHub open sourced the Annotation Toolkit, a Figma library that improves design-to-code handoffs by embedding accessibility documentation directly into design files. The toolkit uses numbered annotation stamps to document design intent, WCAG compliance requirements, and interactive behaviors, preventing accessibility issues before they reach production. GitHub's internal data showed 48% of accessibility audit issues could have been prevented with better upfront documentation. The toolkit is available on Figma Community and GitHub, includes interactive checklists and WCAG guidance, and accepts community contributions.

    64

    1
20. 20
    Article

    Atlassian·31w

    Behind the screens: Building Atlassian’s new icon system

    Atlassian redesigned their entire icon system after six years, moving from 350+ inconsistent icons to a unified system with thinner strokes, consistent sizing, and better visual harmony. The project included building Icon Lab for team contributions, creating automated migration tools, and establishing clear naming conventions. Over 275 new icons have been contributed, with migration tools handling 16,000+ code changes across their products.

    59

    1
21. 21
    Article

    LogRocket·24w

    I think the next UX era will shock us: Here are my 3 big predictions

    Explores the evolution of UI/UX design through five historical eras and makes three predictions for the future: hyperminimalism (extreme reduction of visual clutter), maximinimalism (combining minimalist simplicity with maximalist energy), and fictional futurism (sci-fi inspired interfaces). Examines how companies like Google, Medium, and Tesla are already experimenting with these concepts, and discusses how technological innovations, design trends from tech giants, and cross-industry influences will shape the next design era.

    55
22. 22
    Article

    Hacker News·33w

    What are OKLCH colors?

    OKLCH is a perceptually uniform color model that makes working with colors more intuitive than traditional RGB or HSL. It uses three values: Lightness, Chroma, and Hue, allowing developers to create consistent color palettes by changing only one parameter. Unlike other color models, OKLCH maintains visual consistency across different shades and produces cleaner gradients without muddy midpoints. It can access wider color gamuts like Display-P3 and is well-supported in modern browsers, with fallback strategies available for older ones.

    50

    1
23. 23
    Article

    Fullstack Developer·1y

    open-source Tailwind CSS components library

    Preline UI is an open-source library offering a variety of Tailwind CSS components, including UI examples, blocks, templates, plugins, and a Figma design system.

    48
24. 24
    Article

    CSS-Tricks·38w

    Atomic Design Certification Course

    Brad Frost, creator of the Atomic Design methodology from 2013, is launching an online certification course with his brother Ian. The course covers the five-layer design system approach (atoms, molecules, organisms, templates, pages) that emphasizes composable, consistent, and reusable web design components. Currently available for presale at $50 with team discounts.

    47
25. 25
    Video

    Coding in Public·1y

    THE VSCode extension for design systems

    Enhance your design workflow in VSCode by using the CSS Var Complete extension to leverage CSS variables. This extension provides intellisense support for CSS variables, making it easier to access and use design tokens directly in your CSS files. Learn how to set up project-specific or global settings to automatically prompt collaborators to install the extension, ensuring a smooth development process.

    42

    1