1. Input the brand's primary hex color.
2. Convert the hex color to HSL values.
3. Generate an 11-shade color scale (50-950) by varying the lightness.
4. Map the shades to semantic tokens for light and dark modes.
5. Implement dark mode variants by inverting lightness values.
6. Check contrast ratios for text and UI elements to ensure accessibility.
7. Output the color palette in Tailwind CSS format.
SynapticSkills