Design Systems: Consistent Buttons, Colours and Icons in Tailwind

• One button style: pick one corner radius (sharper 6–8 px or fully rounded) and use it everywhere. Which one you pick matters less than using the same one across the whole site.
• A small colour palette: one background, one text colour, one accent colour for main actions and one for success. Save the accent colour for the things visitors should click.
• Contrast and readability: text must be clearly readable on its background. WCAG recommends a contrast ratio of at least 4.5:1 for normal text.
• One icon library: e.g. Lucide, always with the same stroke width (1.5 to 2), so the icons look like one family.
• Write the rules down: tokens in the Tailwind theme (colours, radii, shadows) mean the whole team and your AI tools use the same values.

Instead of typing every colour and radius by hand, define them once and use them across the whole project:

• Colours: primary, background, foreground and muted as CSS variables in the Tailwind theme.
• Radius: one value for buttons (e.g. rounded-lg) and one for cards (e.g. rounded-2xl).
• Shadows and borders: one shadow for cards and one thin border (e.g. border-white/10 on a dark background).

Our platform uses a dark background (#0A0A09), glass-style cards, sharper buttons (6–8 px), amber for actions and emerald for success. That's our choice; your system can be light and rounded. What matters is applying the rules consistently.

• Card: bg-[#0A0A09]/60 backdrop-blur-xl border border-white/10 rounded-2xl
• Main button: rounded-lg bg-primary text-primary-foreground

1. Install Lucide icons and Tailwind helper tools

   npm install lucide-react clsx tailwind-merge

   Lucide gives you consistent icons, and clsx and tailwind-merge make it easier to combine Tailwind classes in components.

For a WhatsApp button, use the official WhatsApp green (#25D366) and the real WhatsApp icon. Visitors recognise it at a glance, which makes it easier for them to get in touch.