Design system

The partsbehind the page.

The tokens, type, icons and components this site is built from. Everything here is original and drawn for Valkr.

Colour

Blue scale and neutrals

b50
#EEF4FF

b100
#D9E6FF

b200
#BCD4FF

b300
#8EB8FF

b400
#5992FF

b500
#2557D6

b600
#1D46B8

b700
#173796

b800
#142D7A

b900
#112461

n50
#F8FAFC

n200
#E2E8F0

n400
#94A3B8

n600
#475569

n800
#1E2536

n950
#090C15

Icons in four tiers

From 16 px UI icons to illustrations

Tier 1: UI icons. 16, 20 and 24 px, 1.75 px stroke, rounded joins.

Tier 2: module pictograms. 32 to 48 px duotone: dark gray plus one module colour.

Tier 3: ideograms. 48 to 64 px emblems for actions, like an orbiting node.

Tier 4: micro-illustrations. 160 to 360 px, one module colour plus neutral gray.

Type

Plus Jakarta Sans and JetBrains Mono

Both open-licensed (SIL OFL) and self-hosted as small subsets. Headings use a fluid scale that grows with the screen.

Motion

Snap, spring and exit

Three easing curves and four durations: 140 ms for hovers, 220 ms for menus, 280 ms for drawers and 420 ms for wiring pulses. All motion stops when you ask your device to reduce it.

Components

Buttons, chips and cards

Glass cards with a light-follow border, magnetic primary buttons, chips, tabs, disclosure menus and slide-over drawers. Every one works with a keyboard.

Stop configuring.
Start operating.

The CRM an agency would build for you, generated from the business you already have.