Design Language System Skill

This skill documents the professional colour scheme and design tokens for SG Cars Trends, optimised for automotive data visualisation (GitHub Issue #406).

When to Use This Skill

• Styling new components with the brand colour palette
• Implementing chart colours for data visualisation
• Ensuring colour consistency across the application
• Migrating arbitrary hex colours to design tokens
• Reviewing colour usage in code reviews

Colour Philosophy

Never use arbitrary hex colours in components. Always use:

1. CSS variables (var(--chart-1), var(--primary))
2. HeroUI semantic classes (text-foreground, bg-primary, text-default-500)
3. Tailwind colour classes mapped to CSS variables (text-primary, bg-muted)