Design System

Colours

Background/Foreground

Text

Hover

Typography

H1

Shadows stretched long across the road, chasing the last light of day.

H2

Shadows stretched long across the road, chasing the last light of day.

H3

Shadows stretched long across the road, chasing the last light of day.

H4

Shadows stretched long across the road, chasing the last light of day.

p

Shadows stretched long across the road, chasing the last light of day.

Lists

Ordered List

  1. Item 1
  2. Item 2
  3. Item 3

Unordered List

  • Item 1
  • Item 2
  • Item 3

Inline Code

print("Hello youuuu!")

Code Block

Not currently used.

Buttons

Not currently used.

Card

Not currently used.

Shadows

Not currently used.

Transparency

See header, to be implemented.

Scratch notes

header

footer

Inspiration taken from the amazing resource, thank you Maxime Heckel!
This is a great example
Look into the apple design System Clear standards for colours and fonts Establishing pattens to build reusable componts This can be set up as a library! Tokenising: "discrete elements" -> colour pallete, spacing units, shadows, tpyography Colour System - 1.specific colours --green-20:'523 89%, 90%' - 2. generic aliases to modify (name: hsl(var(--green-20))) consider light mode v dark mode frok start