Building a simple design system for engineers
The Appsmith team was mainly developers and technical staff, so creating their design system posed a whole new kind of challenge—how do you make it easy for engineers to use?
The Problem
Creating a design system that engineers can easily understand and implement.
Create New Application
Setting up
The foundation of our design system
Support for your super-powered developers
Comprehensive documentation and tools to help engineers build faster and more consistently.
The typography checklist
Clean, readable fonts for better developer experience
Axiom
The eight rules of perfect icons.
Consistent, scalable, and meaningful iconography
Making a new primary colour
A color system that works for both light and dark modes
Empty state illustrations
Friendly illustrations for better user experience
Trust in elements, not pixels.
Reusable components that scale across the platform
Button
Input
Checkbox
Radio
Dropdown
Toggle
"The design system made it so much easier for our team to build consistent UIs."
"Finally, a design system that actually makes sense for developers!"
"The documentation is clear and the components are easy to implement."
Error pages and empty states
Friendly illustrations for better user experience
Page Not Found
The page you're looking for doesn't exist.
Easy, fast, fun, cool!
Growing together
Welcome home
A system as a service, great documentation
Comprehensive guides and examples for developers
Getting Started
Learn how to integrate our design system into your project
npm install @appsmith/design-system
Component Library
Browse all available components with live examples
Design Tokens
Use our design tokens for consistent styling