Docs
Styling-guidelines

Styling Guidelines

This is a guide to the styling guidelines of the project.
Unless specially stated or defined, use default Tailwind CSS Commands.

Sizing & Spacing

Increments of 4px are used for sizing and spacing.
  • Use multiples of 4 for padding and margin.
  • Use multiples of 4 for width and height.
  • Minimum value of 4px
  • Goes from 4px, 8px, 12px, 16px...

Icons

  • Use Lucide React Icons
  • Icons accompanying text should adjust to match the font size of the corresponding text.

Form Controls

  • Buttons, Checkboxes = Primary Colours Mostly - Unless it is a special event button
  • Active State - DO NOT USE transparent fill and border

Border Radius

Increments of 2px only
  • Minimum value of 4px
  • Goes from 4px, 6px, 8px, 10px...
  • Use rounded-full for circular components