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
- Read
@references/DESIGN.mdfirst. Always. - 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).
- 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
This skill is an unofficial, unaffiliated snapshot of design tokens observed from the named brand's public marketing site. It is not endorsed by the brand owner. The brand name appears here for reference only.
Do not use the brand's name, logos, or trademarks in UI you ship to end users unless you have separate permission from the brand owner. Use this skill for prototyping, internal tools, learning, aesthetic studies, or wherever matching a known visual system is the goal.
Font availability note
The font names captured in references/DESIGN.md reflect what the source site uses. Some are proprietary (for example, Anthropic Sans, Geist, custom brand families) and not publicly licensed for redistribution. If the project you are building has font-license constraints, substitute with publicly available fallbacks (Inter, system-ui, Geist Mono if available via npm) that match the role and weight, and document the swap.
Provenance
- Source: https://tailwindcss.com
- Generated by brandmd from the public marketing site
- Snapshot built: 2026-05-27
- Tailwind CSS is open source (MIT). The design tokens captured here are observed from the public marketing site.
Regenerate the underlying tokens any time:
npx brandmd https://tailwindcss.com -o references/DESIGN.md