Design System · v0.1

The Evo Clarity styleguide.

Every page is assembled from these tokens and primitives. Re-theming the whole site is a matter of editing the colour block in src/styles/global.css.

Colour tokens

Interim palette, swappable. Final palette pending the boss's choice.

--ink

#0F2740

Primary text · dark sections

--ink-2

#1B3A52

Secondary navy

--paper

#FDFCFA

Main background (barely warm)

--paper-2

#F6F3EE

Alt sections (warm cream)

--accent

#0A8F5F

CTAs · highlights

--accent-d

#0A7A52

Hover / pressed

--muted

#5F656A

Muted body / captions

Typography

Fraunces (display serif, with italic accents) + Manrope (body). Fluid clamp() scale.

Clear, honest hiring Display XL
clamp(2.6rem → 5rem) · Fraunces 500

Clear, honest hiring Display LG
clamp(2.2rem → 3.6rem)

Clear, honest hiring Display MD
clamp(1.75rem → 2.6rem)

Clear, honest hiring Display SM
clamp(1.4rem → 1.9rem)

Body large, set in Manrope. We bring transparency and care to a traditionally opaque industry: clear guidance for employers, and a respectful, supportive experience for every worker we place.

text-body-lg · Manrope 400

Buttons & CTAs

Magnetic hover physics + nested "button-in-button" trailing icon. Hover and click to feel them.

Surfaces & shadows

The "double-bezel": a glass plate sitting in a machined tray. Soft, diffused ambient lifts only.

Bezel

Nested surface

Concentric radii, hairline tray, inner core.

Shadow

Soft lift

shadow-soft: barely-there elevation.

Shadow

Lift

shadow-lift: for hover and floating cards.

Form fields

Full name Message

Motion

Every block on this page fades up as it enters the viewport (you just scrolled through them). Smooth scroll is handled by Lenis. All of it is disabled automatically when the visitor prefers reduced motion.