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

A black and white headshot profile of Simon van Dyk smiling

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

Text file Photo Megaphone Text file Photo Megaphone Text file Photo Megaphone

figure

Dinos on cardboard

Dinos on green grass or red lava

button