Design Style Guide Page
One line in, one self-contained index.html out: a living style guide on a single page — the palette as labelled swatches, the type scale set in the real face, the buttons in every state, and one sample card, all from your tokens.
We made two examples: a dark Inter system with a violet accent for Vibary, and a light Manrope system in slate and deep green for a small bookkeeping tool. Both share the masthead, the swatch rows with the hex printed under each one and the single-column type scale; only the tokens and the words change.
The palette, the type scale and the typeface come from your fields, and every swatch prints the exact hex it shows. This page scrolls: the screenshot shows the masthead, the colour section and the top of the type scale, with buttons and components further down. You always get the four sections in order (colour, type, buttons, components), and every value is read from the tokens, so the page cannot drift from what it documents.
Generated for this library
Input
Brief a first style sheet for Vibary
Wordmark VIBARY · STYLE SHEET
Palette bg #0a0a0b · surface #131316 · border #26262b ·
ink #f2f2f3 · muted #a3a3ad · accent #7c7cf0 ·
accent-ink #0a0a0b
Type Inter (system-stack fallback)
Scale Display 56 / Title 32 / Heading 22 / Body 16 /
Caption 13
Radius 12px · focus ring in accent
Returned 1 file · index.html · scrolling design-system page
masthead the wordmark and STYLE SHEET label, links to sections
colour each role as a swatch with its exact hex beneath
type the scale set at real size in Inter, largest first
buttons primary, secondary, ghost, disabled, and a focus ring
comps one sample card beside an input, a toggle, a checkbox
tokens every value on :root; the page renders what it printsYou fill in 6 fields — the braced lines at the top. Everything below them is fixed.
- 1The brief (one line)
- 2The wordmark
- 3The palette (roles → hex)
- 4The type family
- 5The type scale
- 6The radius + focus
Design Style Guide Page
What this makes
One line in, one self-contained index.html out: a living style guide on a single page — the palette as labelled swatches, the type scale set in the real face, the buttons in every state, and one sample card, all from your tokens.
The whole template, in one piece. The steps below are the entire workflow.
How to use it
- Copy the whole template with the button above.
- Replace the six slot lines — the palette roles and the type scale are the system; the rest frames them.
- Paste it into any coding agent or model in one message. It returns one index.html.
- Save the file and open it in a browser — scroll the sections to read the system as it renders.
- Keep it beside the product as the source of truth; edit the tokens and the whole page re-renders to match.
What you swap
- The brief (one line)
- a first style sheet for Vibary — AI design, in the browser
- The wordmark
- VIBARY · STYLE SHEET
- The palette (roles → hex)
- bg #0a0a0b · surface #131316 · border #26262b · ink #f2f2f3 · muted #a3a3ad · accent #7c7cf0 · accent-ink #0a0a0b
- The type family
- Inter (system-stack fallback)
- The type scale
- Display 56 / Title 32 / Heading 22 / Body 16 / Caption 13
- The radius + focus
- radius 12px · focus ring in accent
Before it runs
- A palette with roles, not just colours — the page is organised by what each colour is for.
- A type family the page can actually load — the system stack, or one you name a web source for.
- The willingness to commit: this page becomes the reference others build to, so half-decided tokens ship as a half-decided system.
When to reach for it
When a look needs to be written down so a team can build to it — a brand's first design system, a page that shows the tokens instead of describing them. The sections are fixed; the palette, the type and the name are yours.
What changes
- A single index.html with no build step and no outside request: one scrollable page that documents a design system.
- The palette printed as swatches, each with its role and its exact hex, drawn from the tokens you set.
- The type scale shown at real size in the real face — display through caption — so the page is the specimen, not a description of one.
- The buttons in their states — primary, secondary, ghost, disabled — cut from the same tokens.
- One sample card and a set of form controls, so components are shown assembled, not just listed.
Pairs with
- Concentric Capability ModelA concentric capability model — one subject, three rings, four sectors — where depth means prerequisite rather than decoration. Six fields.
- Converging Causes DiagramA convergence diagram — several causes funnelling into one hub and out to its effects — governed by the rule that keeps such a diagram true rather than merely tidy. Six fields.
- Exploded Axonometric DiagramAn exploded axonometric that pulls one site apart into stacked transparent layers — kept on white and kept analytical, because the temptation is to render it dramatic and lose the drawing. Six fields.