Last week, TailwindCSS released their v4 version with revamped color tokens using OKLCH. I forsee more web devs are going to adopt OKLCH as the new standard for color tokens. This might sound very technical, but it's actually a significant change UI/UX designer should be aware of. With major browsers now reaching 93.1% adoption rate, OKLCH is on track to be the new standard that bridges design and
A design system community for AI builders with 100s of free design systems. Drop a DESIGN.md file in your repo and tell your AI coding tool to use it.
Atlassian's unified design language across all their products. Includes components, patterns, AI guidelines, and resources for designers and developers.
Free e-book by Invision to help you to evaluate and evolve your design system
Slides from "Do You Know Design Systems - AMA with HK Design System Experts", organised by Friends of Figma, Hong Kong.
Designer José Torre shared his lessons on building Shopify's design system - Polaris. Twitter - José Torre
Shopify's Design System - Polaris
Pinterest's design system - Gestalt.
Generate font size variables for a fluid type scale with CSS clamp.
Type Scale helps you to improve your web typography with a better scaling calculation.
Figma Tokens is a Figma plug-in that allows you to generate, switch, and apply themes through JSON.
Collaborated with icongrapher Rob Bartlett, Spotify design shipped updated icon library from 1px to 2px width and unified size variants from 5 to 2.
Curated list of design tools and systems in a GitHub repo.
Utopia is a calculator that help you to tokenize spacing values to be used with their fluid type calculator.
Series of writing uncovering the process of of shipping an effective, collaborative design system, with examples from Atlassian, Financial Times, Shopify and more. Written by Nathan Curtis from Eight
Refactoring UI started as design tidbits to work smoothly with developer. It stresses on visual hierarchy and systematic approach to UI design from a developer point of view. Brand new ebook and reso
A publication curated by Figma Team regarding building a design systems. Include tutorials, templates, case studies and more
A blog that advocate inclusive web interfaces and components, to make the web more accessible
An open-source checklist for building a design system
CSS analytics tool to monitor your design system.
