Tailwind CSS brand

Use when the user is building a developer documentation, landing page, or UI that should feel like the Tailwind CSS website, a clean utility-first aesthetic with generous whitespace, sky/blue accents, and a system-sans typography.

Requirements

This skill expects references/DESIGN.md (bundled with the skill) at the skill's own folder. The path is referenced as @references/DESIGN.md so the agent loads it relative to the skill, not the project root.

How to apply

1. Read @references/DESIGN.md first. Always.
2. When generating any component, page, or style block:
   • Use the colors observed in the Color Palette section. Don't invent new shades.
   • Match the typography (font family, sizes, weights) as documented, subject to the Font availability note below.
   • Honor the spacing scale; don't substitute arbitrary pixel values.
   • Match shape language (border radius, shadow styles).
3. If a token isn't specified, derive from the closest documented one. Don't fall back to generic Tailwind defaults or random Bootstrap / Material values.

Unaffiliated, observed from public pages