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?
⭐️ Principal Designer
Design Systems
Creative Direction
Illustration
Icon Design
Experience
Interaction
Identity
When Abhishek (Appsmith’s CEO) first emailed me, their platform had already been in development for two years. They weren’t selling subscriptions but keeping it open-source and free for individuals. About a thousand backend engineers used Appsmith and regularly gave them feedback on Discord.
Appsmith was full-featured, but crude. Team members were responsible for the part of the product they were building, but there was little consistency between different sections. They had just begun making it feel like one single thing. They wanted to bring me on board to help with the UI and usability. Abhishek also asked me to come up with something for their visual language. All of this was right up my alley, so of course I immediately said yes and got to work.
The platform would let engineers plug into multiple databases at the same time, display data and modify it with JS in minutes, something that would otherwise have taken hours.
Developers made apps without writing much code, using ready-made widgets instead. Internal tools that would never have been a priority before, now got built quickly and easily. It was a fast way to get team mates on board with new ideas.
Here’s what Appsmith looked like back then—
A very functional platform, but less mature and not as well-designed as competitors. The service would go down for hours, which made new users leave thinking it was unreliable. It was slow to load, and the interface felt different than the IDEs developers were used to (and who wants to learn a whole new thing?). It was designed off-hand by engineers, while their focus was on coding up components.
Even then, Appsmith already had a vague sort of design system in place. There were variables for colours, fonts, spacing. But with no clear organization or guide to use them, an audit showed a ton of inconsistency and duplication. Not cool. Every time a new component was needed, someone would copy an old one and loosely build on top of it.
This meant that there was no single source of truth, and parts of the app branched off in wildly different directions with every iteration.
Because the design system would be used primarily by developers, I wanted to make it really simple for non-designers to understand & replicate.
Beginning with tiny sections, I added a uniform grid inside and around components. I set specific heights and widths for inputs, and defined how elements would work next to each other. The whole thing immediately felt better. It became easier to lay out new panels, because spacing and alignment decisions were already baked into the design. It was a great base to develop the rest of the system on.
The new font is slightly condensed and more closely kerned to take up less room
Monospaced numerals stay aligned in columns
Letters take up the exact same space at any weight, so elements can remain a fixed size
Taller lowercase characters, in proportion to uppercase characters, make text much more readable at tiny interface sizes
Often-confused letters, like uppercase I and lowercase L, are well differentiated
A huge part of the UI depended on crisp icons for files, data types, layers, widgets and more sprinkled across the editor. To maintain an information dense design, we needed icons that were around 15px in size. We had decided to find a good set to use—problem was, most icon packs were made at 24px or 32px, and looked blurry at smaller sizes. And the few packs that were sharp were generic and ugly.
So I designed a set of 600 clean icons from scratch.
The brand guidelines came with a defined Appsmith Orange, and that was it. The colour was too loud for primary elements. I wanted to find something subtle enough to use everyday, but with some character.
I tried to find inspiration in programming. I read about computers & code, tried developer tools, and kept stumbling upon powers of 2 in various contexts. 8 bits to a byte, 64-bit processors, 128-bit encryption. It was interesting, and I wondered if my colour could come from one of those numbers.
I had to put on my nerd glasses 🤓 for this. A colour’s hue is a number between 0-360° on a colour wheel. I tried plugging the numbers into this property, and found Purple 256°—a nice, neutral colour that wasn’t boring. It was complementary to Appsmith Orange, worked well in light and dark modes, and became a fun easter egg for those who discovered it. The rest of the colour palette was built around it.
So far, the editor was designed to be neutral—a default daily-use app. It needed a whole lot of empty screens, error states, and contextual messages which would be too bland by themselves. It was the perfect opportunity to sprinkle in some fun illustrations.
I drew as many things as I possibly could, in a style that was far from the systematic UI. The illustrations felt wobbly, imperfect and unusual, and they were incredibly well-received. They were light and quick to load too. Win-win.
With every panel in the editor being packed edge-to-edge, it was important to be able to tell things apart quickly. It had to be easy to understand whether something was active, where the separation between sections was, and to see what is clickable. Users would leave if they had to think about it.
I defined the hierarchy of UI elements by simulating physical depth. Consistent levels were assigned to various components, like real things used to have before computers had a graphical interface. Yay for basic skeuomorphism!
There were so many ways to use these ingredients to cook up a good app. They all felt different. Some options were clean and simple, a few were way out there but could be interesting in moderation. I experimented with a few dozen variations of the same screen, picked the best ones, and gave the team a walkthrough.
I asked them to leave feedback on the canvas as we went along, and got a ton of useful information within 30 minutes.
We decided on a design direction that wasn’t too detached from the existing app, while including many of the more thoughtful details. It was minimal, with pops of colour around points of interest. I used it to flesh out a handful of screens in detail, added missing components as I went along, and made sure it all worked together.
Since the design system was pretty close to done at this point, I organized all the components into a new Figma file. It included instructions on where and how to use them, with lots of examples. I also took this time to set up tokens for colours, type and spacing.
After sharing my work with the team, I conducted a workshop to understand if the documentation was easy to follow. A few tweaks later it was a good to go.
In the end, I translated the new design into a set of layered elements that anyone could mix-and-match—especially non-designers. Along with a regular brand guide, I created Figma components out of gradients, patterns and type treatments inspired by the editor.
I also designed floating containers that could show anything from pictures of speakers on a YouTube video, screenshots and logos for blog posts, emojis, to simple icons from a pre-defined set. The guide included hundreds of examples as a starting point.
Stellar work on creating beautiful illustrations and razor sharp icons for Appsmith. You require minimal input and your work is of high quality. So happy to see you raising the bar!
Head of Design
He learns fast, works fast, has a sharp eye for detail and a solid quality bar. Give him a challenge and room to grow and you'll have one of the strongest designers in your team.
Principal Designer
Timeline
2022-24
Used by
1k → 10k teams
Github Stars
5k → 36k
Repo Contributors
3x ↑
Abhishek Nayak
CEO, Appsmith
You communicate clearly and in a friendly manner, making discussions positive and effective. You're always ready to help, and your design work is super quick - the fastest I've seen! Even though development is not your background, you understand new projects really well. Your courage in taking on big challenges is impressive.
Product Designer
You are very fast with communication and making iterations, but the quality is high at the same time. I love that.
Product Designer
I've noticed that you always work with minimal inputs and bring the utmost creative ideas to table, your ideas are always solid and you accept feedback with grace and present even more inspiring work.
Project Manager
It was very easy for me to work with you. I appreciate that you were easily approachable, listened to my technical inputs and took them into consideration.
Engineer
