Introduction

avocado-ui is an experimental design system for building highly themeable, accessible and modern interfaces in React.

Why 🥑 avocado-ui

There are lots of wondeful design systems out there, so why make another?

I'm building avocado-ui to increase my knowledge of design systems. This project is a cure for my interest and intrigue in design systems. The argument is that building a design system from scratch will help me learn more about design systems. I don't expect people to use it, but you can learn a thing or two by diving into the source code.

Features

• ♿ Accessible: Accessibility is not an after thought in avocado. All components have accessible names and are called out correctly by screen readers. I ensure colors are accessibile, focus indicators are present on all components and they are in the right tab order.
• 💅🏼 Themeable: avocado is highly themeable and the entire look can be controlled by tokens. I'm currently researching about styled-system and the goal is to ensure avocado follows the spec.
• 🌃 Dark Mode: Good design systems handle darkmode excellently. I'm also researching & learning the best way to implement dark mode in avocado.
• 😎 Modern: Modern design systems are a combination of tooling, look and feel of the interface. You have to really work hard to make avocado ugly 😋.

Stay updated

I'll be sharing my progress with avocado on twitter. Please follow me to learn more.