Style reference
This is a demo project. It uses the same stylesheet as every other project and demonstrates the shared styling for the most common HTML elements.
Tip
To add a real project: create a directory at the site root (e.g. /my-project/), drop an index.html in it that includes /assets/site.css, and add a card to the home page.
Info
The shared palette, type and spacing tokens live in :root in site.css, and are sourced from design.md.
Typography
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Body paragraph in Manrope. Includes strong, emphasis, a link, a highlight, small text, inline code, Ctrl+K, and an a11y abbreviation.
"Readability is a requirement, not a nice-to-have." — Green Party brand accessibility guide
And some preformatted code:
function greeting(name) {
return `Hello, ${name}!`;
}Lists
- Unordered list item
- Second item
- Third item with a link
- Accessible
- Shared style
- Content-only pages
- First
- Second
- Third
- Primary
- Fair green — identity & display.
- Secondary
- Forest green — reading text.
Table
| Colour | Hex | Role |
|---|---|---|
| Fair Green | #00A85A | Display / identity |
| Forest Green | #00643B | Text / buttons |
| Midnight | #001F4E | Body ink |
Figures
Forms
Badges
green muted outline