Design System

I highly recommend Refactoring UI, written by the creators of Tailwind CSS. It's the only design resource you need for learning how to design half decent UI without being a designer.

Tailwind is the easiest styling system I've ever used. It's a utility first CSS framework that allows you to build complex designs with simple utility classes. No need for messy cascading stylesheets with classes that you can never remove. Learn once and never use another CSS framework again.

I use shadcn as my component library. There are only so many times I can be bothered to build the same button for each new project. Shadcn is a collection of bare components that you can install into your project and own the code for. Then style however you like.

Spacing

The book recommends starting with too much space and then reducing it as you go. This is a good way to ensure that your designs are not too cluttered.

Colours

HSL (Hue, Saturation, Lightness) is favoured as a more intuitive representation of colour than RGB or Hex.

Hue is a colour's position on the colour wheel, saturation is the intensity of the colour, and lightness is how bright the colour is relative to black. Use my colour converter tool to see how this works.

Default

Default background is used for the background of the page. Default foreground is used for text.

Card

Primary

Primary colours are used for primary actions or elements.

Secondary

Secondary colours are used for secondary actions or elements.

Muted

Muted colours are used for elements that are not the primary focus, and secondary text.

Accent

Accent colours are used for highlighting elements and mild hover effects.

Destructive

Destructive colours are used for destructive actions.

Border

Default border colour

Input, Ring

Input is used for the border colour of input elements. Ring is used for the border colour of focused input

Custom

Finally we have a set of chart colours that are used whenever a splash of colour is needed, mainly for syntax highlighting.