Code
Publish a style guide
A live page showing the tokens and components, rendered rather than described.
Fill it in
Colours, type and feel, or point at an existing site.
Which pieces.
Click a token to copy its value.
Your prompt
Build a live style guide showing: colour, type, spacing, buttons, forms. [the brand] RENDER the components rather than describing them. A style guide that lists hex codes in a table is documentation; one that shows the actual button in every state is a tool, and only the second one stops people reinventing things. Show the states nobody documents: hover, focus, disabled, loading, error, and what happens with text three times longer than the example. Check the contrast and print the ratio next to each pairing. A palette that fails AA is going to be discovered later by someone who cannot read the placeholder text. Click a token to copy its value. One self-contained page.
Use Publish a style guideOpens with everything above already filled in.
Why this works
A guide that lists hex codes in a table is documentation. One that renders the actual button in every state is a tool, and only the second stops people reinventing things. It shows hover, focus, disabled, loading, error, and what happens with text three times longer.
Questions
- Does it check contrast?
- Yes, and it prints the ratio next to each pairing.