UI Library

Tokens

`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

`typography`

Font styles include two font faces, a playful serif for large headings and a soft and relaxed font for body copy.

Note that the font-weight is adjusted when prefers incresed contrast mode is active in order to, you know, increase the visual contrast against the background.

title

Sally sells sea shells on the sea shore

heading1

Sally sells sea shells on the sea shore

body

Sally sells sea shells on the sea shore

body-small

Sally sells sea shells on the sea shore

detail-subtle

Sally sells sea shells on the sea shore

`size-and-space`

Space and size are defined in terms of rem.


      --size-1px:


      --size-2px:


      --size-3px:


      --size-5px:


      --size-7px:

Space is a scale determined by scale factor which changes at different viewport widths in order to scale the negative space in the app as the available space becomes larger.


      --space-xxs:


      --space-xs:


      --space-s:


      --space-base:


      --space-m:


      --space-l:


      --space-xl:


      --space-xxl:

Components

`title-mark`

Include it with a custom html tag name, for example as a header:

Simon van Dyk

`profile-mark`

`intro-blurb`

Hi, I’m Simon. Based in London, I lead the engineering team at Wealthbit. I enjoy crafting digital products, taking photos, and making good food and coffee.

Here you’ll find some writing, speaking engagements, and photos of mine. You can also find me on GitHub and LinkedIn, and occasionally on Twitter and Instagram.

`icon`

Include it specifying the icon name and optionally it's iconSize, strokeWidth and color

`nav-links`

`footer`

The default footer

The footer can be rendered with the intro-blurb

`feed-item`

20 August 2024
Landmark Trust stay at Whiteford Temple

First stay in a Landmark Trust property in Callington, Cornwall

`figure`

Dinos on cardboard — Dinos on green grass or red lava

`button`

`gallery-controls`

Gallery size