Design system

Libraries

Tailwind CSS provides utility-first CSS classes (read more). This means that instead of providing classes such as "btn" or "menu", it provides atomic classes such as "flex" or "text-center". This avoids early abstractions while providing a consistent design system throughout the application. While it's possible to build compound CSS classes with Tailwind CSS, it's highly discouraged in order to avoid premature abstraction. This means that repeating styles is encouraged in many places. In fact, Tailwind CSS encourages the use of multi-cursor editing and loops to avoid repetition instead of abstraction.

With that said, some basic components would be tedious to re-implement over and over again. To avoid that we use daisyUI which is a CSS component library built on top of Tailwind CSS. It provides 50+ basic components that are used to quickly implement basic UI elements.

Finally, Iconify provides us with icons (they have 200 000+ icons!). We use their Tailwind CSS plugin to allows us to pick icons by simply entering class names, i.e class="i-mdi-coffee". To ensure we choose consistently styled icons we only use the Material Design Icons icon pack (mdi). There are icon browsers available if you need help picking an icon, but the IDE autocompletion is generally pretty useful for quickly finding an icon.

Mobile first

We should always attempt to make designs that are fluid and responsive - designs and layouts that look good no matter which screen they are viewed on. With that in mind it's appropriate to start by making the designs look good on mobile. Mobile designs tend to look a lot better on desktop than the other way around. Additionally, while we don't have device-usage statistics it's probably fair to say that a large-portion of our page visits are on mobile.

Coding tips

• Use the daisyUI documentation to find pre-made components.
• Use a Tailwind CSS cheat sheet.

Design tips

• Start by designing the simplest layout - often this a single column layout for narrow screens.
• Use larger shadows for larger elements.
• Use a larger border radius for larger elements.
• Use colors to create hierarchy, i.e for the most important action in a dialog window.
• Use shadows for floating elements.
• More white space usually looks better.