Design System

Work in Progress

Some quick documentation about the UI system I am using on this website. I based everything loosely on Apples principles, including fonts and colours. However the elements I created were made up as I went (and may be subject to change). My initial inspiration for this was a blog from jvscholz, his original html and css was the base for all this.

Fonts:

Colors:

Probably the most annoying thing ever, fuck colours, fuck em. Mostly just apples design colours obvs but also just freestyled some, see colours.css if you want a dev side look at the colours.

CSS Classes

Tried hard with the css for this side project website, created simple, reusable styles to streamline the design process.

Some examples include:

  • The mono class (hint: it was just used)
  • muted class, for subtle text
  • The pill class, for pills!

comlpex usage

Lets say I had a div, and wanted it to be styled as such:

  • Flex box container
  • Align items horizontally
  • Gap 16px

You create a..? class, duh. But for a one off element? Gets messy. The more "one off" classes you have, the more cluttered the css gets, you end up with 20 variations of classes with similar values.

So whats the answer? Let me show you:

<div class="flex hz gap-2">
    <!-- content -->
</div>

I think its pretty self explanitory, no style=, no creating random classes. Basically a poor mans tailwind css.

I use the elements below as building blocks, leading to a more conistant website style by limiting the amount of random freestyle-styling.

Elements

Card Title

This is a reusable content block.

Tip: This is a callout, using the callout class
Badge
section title
Key Value
Tables Use for laying out infomation
Try Adding other elements

Last updated May 2025