Design Guidelines

The system behind the site.

Colours, type, and the small decisions underneath them. Pulled directly from the live site, so this page can’t say something the site doesn’t already do.

Logo

Two versions.

Download SVG Download PNG

Download SVG Download PNG

Photography

Editorial.

Icons

Two systems, different jobs.

Animated, for section-level moments.

Online builds

Design Guidelines

Systems thinking

AI-ready guidelines

Workflow design

Static, for utility and inline use.

Phosphor, Light weight, always this suffix. A sample below, 1,412 in the full set.

chat-centered-dots

calendar-blank

camera

cloud-arrow-down

file-archive

folder-dashed

gear

globe-hemisphere-east

heart

house

image-broken

lightbulb-filament

lightning-a

lock-key

map-pin-area

moon

music-notes

paint-brush-broad

palette

paper-plane

phone-call

rocket-launch

shopping-cart

star

sun

target

trash

trophy

umbrella

user-check

video-camera

wallet

wifi-high

bell

book-open

bookmark

browser

compass

download

upload

eye

gift

globe-hemisphere-west

magic-wand

puzzle-piece

Browse the full library, 1,412 icons

Colour

Bold and clean.

Surface colours.

Purecards, surfaces

Neutraldefault page

Darkhero slabs, footer

Primary palette.

Accent · primary

Mint

--lki-green-primary

Accent · secondary

Lime

--lki-green-lime

Accent · everyday

Green-deep

--lki-green-deep

Text · muted

Slate

--lki-grey-1

CTA.

CTA · default

Pink

--lki-cta

CTA · hover

Pink dark

--lki-cta-dark

CTA · wash

Pink light

--lki-cta-light

Type

Inter for everything structural. Instrument Serif italic, once per page.

Display / UI

Aa

Inter · Light 300 / Black 900

Editorial accent

Aa

Instrument Serif · 400 italic

Mono

Aa

JetBrains Mono · 400 / 500

Eyebrow

.eyebrow
Inter · 900 · tracked

Section heading

.display-h2
Inter · 900 · fluid

Component title

.h3
Inter · 900

Lead paragraph, for openings and introductions.

.lead--big
Inter · 300

Body copy, the standard reading size used everywhere else.

.body-copy
Inter · 300

Editorial accent

.accent
Instrument Serif · italic

Spacing

A 4px base, extended.

4

8

12

16

24

32

48

64

80

120

Radius.

0

Square

6px

Dense UI

14px

Cards

20px

Image wells

32px

Large surfaces

pill

CTAs

Elevation.

Flat

Hairline border, default rest

Shadow XS

Hover lift on cards

Inset hairline

Pill button bottom edge

Buttons

One dark pill. One flash of pink.

On light

Outline Ghost link

On dark

Book a call Ghost link

Let's talk

If you're trying to make something clearer or more cohesive or more useful, let's talk.

Book a discovery call