Design system

The Knights brand system

The foundations behind the site: a clean light canvas with Primary Black carried by the typography, lifted with Sky Blue and Royal Blue, and punctuated by Yellow and Red. This page is the living reference for colour, type, components and motion.

Colour palette

#FFFFFF

Canvas

--background

#F5F9FC

Surface

--surface

#0F1A24

Primary Black

--ink

#5B6B7C

Ink Muted

--ink-500

#0EA5E9

Secondary Sky Blue

--sky-brand

#38BDF8

Sky Bright

--sky-bright

#3355D8

Royal Blue

--royal

#24409F

Royal Deep

--royal-deep

#B8860A

Accent Yellow

--gold

#F2C94C

Yellow Fill

--gold-fill

#E0342B

Accent Red

--flame

#E2E8EF

Border

--border

Sky to Royal gradient

Used on headings & key accents

Gradient text

.text-gradient-sky

Ambient grid

.bg-grid

Typography

Headings

Space Grotesk

Geometric, engineering-grade and confident. Used for all headings.

AaBbCcDd 0123456789

Body

Inter

Highly legible and neutral. Used for body copy and UI.

AaBbCcDd 0123456789

Display / H1Cool, comfortable spaces

Heading / H2Engineered to last

Subheading / H3F-Gas certified engineers

BodyProfessional air conditioning installation, servicing and repair across Hertfordshire.

Eyebrow / LabelWHAT WE DO

Components

Buttons

Badges & chips

SkyRoyalF-GasEmergencyStevenage

Icon tiles

Accordion

Motion

Reveal on scroll

Sections fade and slide up as they enter the viewport, with a gentle stagger.

Hover lift

Cards and buttons lift and brighten on hover for tactile feedback.

Ambient float

Soft floating glows and a marquee trust bar add life without distraction.

All motion respects the user's reduced-motion preference.