Reference
Style guide
The Knowledge Work elements this site is built from: the logo, colour, type, buttons, labels, cards and form fields.
01 · Logo
Stacked wordmark, live type
"Knowledge" in Regular over "Work." in Extrabold, with the full stop in amber. Set as type, never as an image. The KW lettermark is the companion for favicons and app icons.
02 · Colour
Paper and ink, amber for action
Paper carries the page and ink carries the type. Amber is reserved for CTAs, eyebrow labels and the wordmark's full stop — never for body copy or decoration. Maximum two backgrounds on any one surface.
Ink
#26272E · text, dark surfaces
Amber
#EA8A2E · accent only
Slate
#6F685C · muted text
Cloud
#F2EEE7 · cards, panels
Paper
#FAF8F4 · page background
03 · Type
Hanken Grotesk, 300–800
Display — 56px Extrabold
Heading one — 40px
Heading two — 30px
Heading three — 21px Bold
Body copy at 17px, Regular, 1.6 line-height — set for reading across services, case studies and support notes.
Muted body in slate at 16px, for supporting copy under a heading or inside a card.
Eyebrow label — 13px Bold uppercase, amber
04 · Buttons & labels
Actions and tags
05 · Cards
Two weights
Filled
Cloud card
The default: cloud fill on paper, for service and case content.
Outlined
Paper card
Used beside a filled card so the two don't compete — contact details, sidebars.
06 · Form fields
Native, 48px minimum
This field is required.