Colours

Orange

Dark grey

Medium grey

Off-white

Peach 100

Peach 400

White

Typography

H1 heading sample

H2 heading sample

H3 heading sample

H5 heading sample

H6 heading sample

Body large — supporting intro copy at the larger body size.

Body regular — standard paragraph copy, the default reading size.

Body small — captions, tags and small print.

Headers: capitalised, with an outlined word

H1–H6 are set uppercase. The .is-outline combo (on any heading class) makes that word hollow: color: transparent, -webkit-text-stroke 2–3px in white — e.g. the homepage's "WHAT WE DO" heading outlines "WHAT".

Heading OUTLINE

Corner radius

Two different shape languages: the standard Regular 30 radius (all four corners, e.g. cards and panels) vs. the hero marquee's signature diagonal cut (only top-left + bottom-right rounded).

Regular 30 (standard)

Hero marquee cut

Hero marquee card shape

The actual .hero-marquee-block-01 class: 180×230px, overflow hidden, the diagonal-cut radius above.

Circle shapes

Three overlapping orange circles (.orange-circle, one combo'd .overlay with mix-blend-mode: soft-light), used in the footer.

Gradient blobs (hero + footer)

Same shape system both places — three overlapping 330px circles (.gradient-inner, .01/.02/.03) in a wrapper at 40% opacity — but each place has its own colour override. Hero: soft transparent pink/purple/blue. Footer: solid orange/purple/peach with hard-light blending.

Muted background arrows

A large rotated arrow (-45deg, bottom-right, 60% height) at 12% opacity in dark grey — a quiet directional cue behind content, used in the project showcase section.

Blurred glass panel (“Who we are”)

The .container-16 class: dark grey at 70% opacity, backdrop-filter: blur(13px), Regular 30 radius, 50% width (max 650px). Sits over a background image/video to read as frosted glass.

Frosted glass content panel

Icons

Service card icons (shared Icons component) vs. the two separate arrow implementations: Navbar's own static arrow (used only on its “Say hello” pill) and the Button component's own goo-morphing circular arrow (used everywhere else).

Base variant

What we do (all 6 cards)

How we work, variant A

How we work, variant B

Button

Service Card — all 3 variants

Dark – Icon bottom (base), Dark – Icon top, Light – Icon top. Hover reveals a background video or image plus a bold-text cross-fade (fixed 19 Oct 2026).