colours
Colour tokens control foreground and background colours for all content. The system is monochrome with a warm hue mixed in.
--color-bg
--color-bg-error
--color-bg-negative
--color-fg
--color-fg-medium
--color-fg-weak
--color-fg-weaker
They were chosen in order to swap out the colours in light/dark mode while maintaining contrast differences between foreground and background elements.
You can test the light/dark themes and increased contrast modes by changing it in your browser developer tools or operating system settings.
Note that the weakest contrast shown below is inaccessible against the background and is only used for artistic effect such as strokes.
The Human Torch was denied a bank loan
--color-fg on --color-bg
The Human Torch was denied a bank loan
--color-fg-medium on --color-bg
The Human Torch was denied a bank loan
--color-fg-weak on --color-bg
The Human Torch was denied a bank loan
--color-fg-weaker on --color-bg
The Human Torch was denied a bank loan
--color-fg on --color-bg-error
To further increase the contrast when desired, we shift the background color:
The Human Torch was denied a bank loan
--color-fg on --color-bg-negative
The Human Torch was denied a bank loan
--color-fg-medium on --color-bg-negative
The Human Torch was denied a bank loan
--color-fg-weak on --color-bg-negative
The Human Torch was denied a bank loan
--color-fg-weaker on --color-bg-negative