Style guide
Style Guide
This page serves as a living style guide and design proof. Every element below reflects the current theme styles. Use it to verify typography, spacing, colour, and component rendering.
Headings
Heading Level 1
Heading Level 2
Heading Level 3
Heading Level 4
Heading Level 5
Heading Level 6
Paragraphs & Inline Styles
This is a standard paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum. Cras vehicula, mi eget laoreet venenatis, dolor tellus pulvinar felis, at dignissim ante odio nec tellus. Nulla facilisi. Morbi nec accumsan orci.
This paragraph contains bold text, italic text, strikethrough text, and highlighted text. You can also combine them: bold and italic together. Here is some inline code for good measure.
Here is a paragraph with a text link and a link that opens in a new tab. Links should be clearly distinguishable from surrounding text.
Here is a line with a subscript and a superscript for scientific or footnote-style content.
This is a larger lead paragraph, often used for introductory text beneath a page title. It should feel prominent without competing with headings.
This is small/fine-print text, useful for captions, disclaimers, or meta information that should be present but not dominant.
Lists
Unordered List
- First list item
- Second list item
- Third list item with bold and a link
- Fourth item with a nested list:
- Nested item one
- Nested item two
- Nested item three
- Fifth list item
Ordered List
- First ordered item
- Second ordered item
- Third ordered item with nested numbers:
- Sub-item one
- Sub-item two
- Sub-item three
- Fourth ordered item
- Fifth ordered item
Blockquotes & Pull Quotes
Music is the universal language of mankind. Jazz, in particular, is the art of thinking out loud — spontaneous, honest, and alive.
Henry Wadsworth Longfellow (adapted)
A pull quote draws attention to a key statement. It should stand out visually from the surrounding content.
Style Guide
Buttons
Table
| Date | Artist | Venue | Time |
|---|---|---|---|
| June 20 | Diana Krall | Main Stage | 8:00 PM |
| June 21 | Chet Baker Tribute | Intimate Lounge | 9:30 PM |
| June 22 | Local Ensemble | Outdoor Pavilion | 2:00 PM |
| June 23 | John Coltrane Legacy | Main Stage | 7:00 PM |
Columns
Column One
Content in the first column. Check that spacing, alignment, and text flow all feel right at various breakpoints.
Column Two
Content in the second column. Verify the gutter width between columns and how text wraps on smaller screens.
Column Three
Content in the third column. Ensure all three columns maintain consistent vertical rhythm and alignment.
Details / Accordion
Click to expand this section
This is the hidden content inside a details block. It’s useful for FAQs, additional information, or anything you want to keep tucked away until the user asks for it.
Another expandable section
More content here. Verify the open/close animation, icon rotation, and spacing between multiple details blocks.
Separators
Default separator:
Wide separator:
Dots separator:
Image (Placeholder)
Gallery
Verse
The verse block preserves line breaks without needing a code-style font. Ideal for poetry, lyrics, or structured text that needs breathing room.
Spacer
There is a 60px spacer below this paragraph. Verify the gap is visually correct.
Content resumes after the spacer.
Long-Form Content Flow
This final section simulates a real content flow so designers can evaluate vertical rhythm — the overall feel of headings, paragraphs, lists, and quotes working together as they would on an actual page.
A Subheading in Context
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec id elit non mi porta gravida at eget metus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis.
Curabitur blandit tempus porttitor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum.
Jazz is not just music, it’s a way of life, it’s a way of being, a way of thinking.
Nina Simone
Nullam quis risus eget urna mollis ornare vel eu leo. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Key considerations include:
- Consistent spacing between all block types
- Readable line length (50–75 characters per line)
- Clear visual hierarchy from H1 down to body text
- Adequate contrast ratios for accessibility (WCAG AA minimum)
A Deeper Subheading
Etiam porta sem malesuada magna mollis euismod. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
End of style guide. If any element looks off, flag it with a screenshot and annotation.