Recusant Website Brand Guidelines
A living design system for practical, consistent digital experiences.
Contents
01
Brand Identity & Colour System
Recusant is bold, pragmatic and high-contrast. The website uses a focused palette of red, white, black and neutrals to keep interfaces clean while still feeling opinionated.
Primary Colours
Recusant Red
#D00000 — Primary actions, highlights, active states.
Deep Jet
#171717 — Headings, dark backgrounds, footer.
Pure White
#FFFFFF — Page and card backgrounds.
Neutrals
Slate Grey
#4B5563 — Body text, muted labels.
Light Grey
#F3F4F6 — Section backgrounds, card hover.
Stroke Grey
#E5E7EB — Dividers, borders, separators.
Usage Rules
- Red is reserved for actions, indicators and key highlights.
- Text sits on white or very light greys for legibility.
- Dark sections should be used sparingly for contrast bands.
02
Typography
The site uses Manrope as the primary sans-serif and Unna for hero and section headings. Sizes follow a clear scale from hero through to small labels.
Hierarchy Examples
Hero Heading (H1)
Section Title (H2)
Card Title (H3)
Body text is set in Manrope at 18px (text-lg) for primary content paragraphs.
Small Label
Type Tokens
03
Layout & Spacing
All pages use a centred content width and generous vertical spacing to keep complex content readable.
Main Container
max-w-7xl mx-auto px-4 sm:px-6 lg:px-8
Ensures content is comfortably readable on large screens while still filling mobile width.
Section Spacing
Standard vertical spacing ispy-16topy-20.
This keeps sections distinct and makes room for large headings.
Grid & Gaps
Common grid gaps aregap-6andgap-8.
Cards align to a simple responsive grid (1 / 2 / 3 columns).
04
Core Components
These are the primary building blocks used across the site. Each example is interactive or rendered with the same props as in production.
Buttons
Feature Card (Light)
Represents the standard white card used across What We Do and capability pages.
Architecture Services
Fit-for-purpose designs that link business capabilities to technology.
View servicePillar Card (Glowing)
Used on the home page to represent core offerings.
Information Management & Engineering Data
Clean, Organise, Govern
We help clients clean, organise, govern, and manage their engineering information.
- •IM Uplift & Data Quality
- •Metadata & Taxonomies
- •Document Control
05
Form Styles
Forms use dark inputs on a subtle textured card to feel deliberate and secure. Validation and messaging should be clear and human.
06
Imagery & Iconography
Imagery should feel real, operational and grounded in energy, resources and industrial contexts. Avoid generic corporate stock wherever possible.
Photography Guidelines
- Prefer real operations, assets, control rooms, and field teams over abstract office scenes.
- Lighting should be natural or slightly moody; avoid overly saturated or neon palettes.
- Composition should leave space for text overlays in hero usage.
Icon Style
Icons are custom, monoline SVGs with 2px strokes, rendered in Recusant red by default and neutral greys when secondary.
07
Live Patterns
These sections reuse production components to show the guidelines in context. Changes here should be reflected in real pages.
Challenges & Solutions Navigator
Stats Section
Delivering Excellence, Measurable Results
Client Retention
Delivery Success
Years Avg Experience
Referenceable Clients
Testimonials Section
What Our Clients Say
"Recusant have continued to provide us with quality designs, solutions and effective outcomes which help support our business in their ongoing success."