My Design System
This page serves as a showcase for the components used on my website, mainly used for visual testing.
Most of the components on my website are pure HTML and CSS; there is no heavyweight JavaScript library performing dynamic rendering. They are designed for simplicity, akin to Markdown. CSS generally adheres to the BEM pattern.
Page Title
Section Title
Title elements are used to divide content into sections.
Subsection Title
Ideally, text-heavy content should be divided up into bite-size chunks. "Walls of text" should be avoided.
Subsubsection Title
Subsections can be divided even further.
Bold Text
If needed, bold text can also be used to introduce new content.
Section Title (Block)
The block modifier is useful for creating sections that are clearly identifiable and distinct. Generally, either all sections on a page should use this modifier, or none of them.
Subsection Title (Block)
The same can be applied to subsections. All subsections within a section should use this modifier, or none of them.
Subsubsection Title
Further levels of headings can be used, but without a block modifier.
Bold Text
Bold text can be used as before.
Additional Elements
Section Breaks
Section breaks (as shown above) can be used to create an obvious break between sections, where headers alone are not sufficient.
Taglines
Taglines should be used to provide a summary of the surrounding text, or to highlight a key point.
Asides
Quotes
Block quotes should be used when quoting an external source.
Code
Code blocks should be used
to display blocks of code...
Whitespace
is
preserved!
Shorter snippets can be written inline
.
Lists
Lists are more or less unchanged from the browser defaults.
- An
- unordered
-
list
- with
- sub-items
- An
- ordered
- list
- with
- sub-items
However, an alternative style is available for pros and cons lists.
- Plus
- Plus
- Minus
- Minus
Emphasis
Emphasised text can have further emphasis within it.
Spoilers
Use spoilers to hide content from view.
Action Links
Use action links for prominent actions such as download buttons.
Action LinkImages
Images can be made to fill the page.

Captions should be used to describe the content, if no other context is provided.
Alternatively, they can be made a little smaller.

Embedded Videos
Embedded videos will fill the page while preserving a 16:9 aspect ratio.
Chips
Chip Chip ChipChips are used to convey small tidbits of information, such as tags.
Checkboxes
Checkboxes are designed to be easy to click, without requiring the usual precision of the default browser checkboxes.
Datestamp
Finally, articles should end with a datestamp.
Published 20/09/2020