A shared language.
Built from the basics.
The foundations and reusable components for your next project. Simple, consistent, and ready to make your own.
A small set of decisions.
Semantic colors, a consistent spacing scale, and shared corner radii.
Room to breathe
Spacing follows one shared scale. Use the same steps for gaps, padding, and component rhythm.
Clear hierarchy. Comfortable reading.
Six heading levels, body copy, supporting text, and links.
Make an impression.
Tell your story.
Keep it simple.
The finer details.
Small but important.
A final thought.
Good design starts with the everyday details. Give every word a little room to do its job.
Body / paragraphThis is a regular paragraph with strong emphasis, italic emphasis, and an inline link to the form examples. Its line height stays comfortable in both short descriptions and longer content.
A second paragraph shows how content flows. Use a clear heading, a focused message, and consistent spacing to guide the reader.
Supporting / .text--small .text--mutedSupporting information should remain easy to read, even when it takes a quieter role.
Small print using the native small element.
Make the next step obvious.
Labels, hints, and validation states. This demonstration does not send or save data.
A little structure goes a long way.
Native lists inside .prose or .entry-content.
Unordered list
- Start with a clear purpose.
- Build with reusable parts.
- Consistent spacing.
- Shared colors and typography.
- Refine the details.
Ordered list
- Define the foundations.
- Create the components.
- Bring the pages together.
Definition list
- Design token
- A shared value for a color, space, or type size.
- Component
- A reusable part of the interface with a clear purpose.
- Modifier
- A variation of a component, such as a secondary button.
Details, at a glance.
Striped rows, clear headings, and horizontal scrolling when needed.
| Component | Base class | Available variations |
|---|---|---|
| Button | button | Secondary, ghost, small, large, full width |
| Form field | form-field | Default, invalid, disabled, read-only |
| Notice | notice | Information, success, warning, danger |
| Table | data-table | Default, striped |
The details in between.
Quotes, code, abbreviations, and the small things that make content complete.
Use highlighted text sparingly. Show removed content and its replacement, reference a published work, or explain HTML. Chemical formulas like H2O and measurements like m2 should remain readable.
Great systems make the everyday things feel effortless.
Example blockquote attribution
Inline code like button--secondary fits within a sentence. Press Ctrl + S to save, or inspect sample output: Build complete.
<button class="button button--secondary" type="button">
Explore the details
</button>Helpful feedback, at the right time.
A clear title and useful next step. Meaning is carried by text as well as color.
You can update these details at any time.
Your preferences have been updated successfully.
Review your details before continuing.
Check the highlighted field and try again.