A comprehensive and curated list of design systems, style guides and pattern libraries that you can use for inspiration.
Tru Narla: Building a design system in Next.js with Tailwind
class-variance-authority v0.2.3
Building the design system as you fly it
Headless design systems in Figma
Design Tokens: Unlocking the Power of a Unified Design Language
Mastering Micro Frontends: A Web-Component Adventure and the Lessons Learned
Next.js 13 Nested Layouts, Streaming SSR with Realtime GraphQL
5 React Design Patterns You Should Know
Creating A High-Contrast Design System With CSS Custom Properties
How to Create a Figma Design System
Jina Bolton - Designing a Design System - YouTube
Product Design for web and mobile is evolving at a fast pace. As the range of devices and platforms continues to expand, so do the various design considerations. Design systems help a design team build a framework that meets their needs by bringing together all of the critical design components - including style guides, pattern and UI libraries, CSS frameworks and other resources.
In this session, Jina, a Lead Designer on the Design Systems team at Salesforce UX, will share:
- Strategies for how to approach, design and build an effective design system
- How to successfully maintain the system to ensure ongoing usefulness
- Elements that design systems need to be sustainable that are critical for success
Lightning Experience
CSS Color Architecture. One of the hardest things in… | by Elad Shechter | Appwrite | Medium
How I make UI color palettes - YouTube
Huemint - AI color palette generator
Color Palettes for Designers and Artists - Color Hunt
How To Select Colors: Step By Step - YouTube
Color Theory for Designers: A Crash Course (with Infographic)
How to change your view in Figma #shorts - YouTube
Generating Style Guides in Figma Automatically - YouTube
What is a Design System? Design Systems 101 for Designers - YouTube
Design Systems, Pattern Libraries & Style Guides... Oh My! - YouTube
Creating Design Systems & Style Guides with Catalog - YouTube
How to start your first design system from scratch | by Daniela Amboage | Zeppelin Labs says
Won’t somebody please… think about the css setup? | by Over | May, 2023 | Zeppelin Labs says
Lesson 3: Build your design system – Figma Learn - Help Center
6 Steps for Building a Great Design System | by Stefan Ivanov | Ignite UI | Medium
Design Systems: Step-by-Step Guide to Creating Your Own
Emma Wedekind - Building a Design System with React - ReactJS Girls Conference - YouTube
Secrets of Building Design Systems Right - YouTube
Building Your Own Design System with CSS Variables, talk by Scott Tolinski - YouTube
Why Panda: CSS for RSCs is Changing the Game - YouTube
The Difference Between Design Systems, Pattern Libraries, Style Guides & Component Libraries
Making of true multi-brand design system | by Pavel Kiselev | Feb, 2024 | UX Collective
5 design system examples (and what you can learn from them)
Website Design Systems: Explore Benefits and Top Brand Examples
How to Build Your Design System | Design Systems 102 | Figma Blog
Space Figma Design System for SaaS Application - Space