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 should be used to provide a summary of the surrounding text, or to highlight a key point.



Block quotes should be used when quoting an external source.


Code blocks should be used
  to display blocks of code...


Shorter snippets can be written inline.


Lists are more or less unchanged from the browser defaults.

  • An
  • unordered
  • list
    • with
    • sub-items
  1. An
  2. ordered
  3. list
    1. with
    2. sub-items

However, an alternative style is available for pros and cons lists.

  • Plus
  • Plus
  • Minus
  • Minus


Emphasised text can have further emphasis within it.


Use spoilers to hide content from view.

Action Links

Use action links for prominent actions such as download buttons.

Action Link


Images can be made to fill the page.

Abacus screenshot

Captions should be used to describe the content, if no other context is provided.

Alternatively, they can be made a little smaller.

Abacus screenshot

Embedded Videos

Embedded videos will fill the page while preserving a 16:9 aspect ratio.


Chip Chip Chip

Chips are used to convey small tidbits of information, such as tags.


Checkboxes are designed to be easy to click, without requiring the usual precision of the default browser checkboxes.


Finally, articles should end with a datestamp.

Published 20/09/2020