DESIGN SYSTEM · v0.1
Materially smarter
construction.
The brand and design system for Nexus ReGen — the intelligence layer running at the heart of UK construction. Every material, visible. Every movement, defensible. Every decision, informed.
Tagline
Materially smarter construction.
Category
The intelligence layer at the heart of UK construction
Modules
MEP · Nexus Assurance · Nexus Trading (soon)
System
v0.1 · June 2026
Design principles
Four rules we design around.
The product is construction-native and proof-led. The brand reads the same — calm, credible, and built for people who need the answer now.
01
Evidence over ornament
Named case studies — £255k saved on a single Leeds project, 2,196 tCO₂e avoided — earn trust faster than adjectives. Talk traction in scale; every concrete claim ships with a receipt.
02
Calm by default
Navy and white do the heavy lifting. Aureolin yellow is reserved for a single action or callout per view — never two.
03
Built for the field
Type sizes, hit targets and contrast tested for gloved hands, dusty screens and split-second decisions on a live site.
04
One system, every surface
A haulier form, a housebuilder dashboard and an investor deck share the same grid, type ramp and token names. No forks.
01 · Logo
Our marks.
Three marks carry Nexus ReGen: the arrow emblem, the NR lockup, and the full wordmark. Each has a job — and a surface it belongs on.
The family
One mark, three appearances.
01 · Emblem
The arrow
Our primary graphic asset. Use wherever the brand is established — favicons,
app icons, social avatars, loading states, pattern work.
02 · NR lockup
The short form
Arrow + NR monogram. Used at small scales or where the full wordmark is
too heavy — partner tiles, chrome, event signage, merch.
03 · Primary lockup
The wordmark
Emblem + NR + "NEXUS / REGEN". The default on first impression — web
header, pitch deck title, press, signatures, PDFs.
Anatomy
Pulled apart from the Split Master.
Emblem
+
NR monogram
One glyph, one story.
The outer L-bracket is a site boundary — where the material comes from. The inner chevron cuts up and to the right through that boundary: material moving out, moving up, moving on to its next useful life.
The NR monogram sits to the right as a logotype — a custom draw of "N" and "R" with the same chunky stroke as the arrow.
Arrow ratio
1 : 1 square
Arrow angle
45° upper-right
Clear space
1 × stroke (X)
Min emblem
24 px · 10 mm
Corner joins
Square miter
Inter-mark gap
0.5 × emblem
Clear space
Always 1× stroke of air on every side.
X
X
X
X
Emblem variants
One glyph, six approved colourways.
Yellow on navy SVG
Navy on yellow SVG
Navy on white SVG
Yellow on white SVG
Boxed · app icon SVG
White on black SVG
NR lockup variants
Yellow on navy SVG
Navy on yellow SVG
Navy on white SVG
Reversed · white SVG
Primary wordmark variants
Full colour · navy SVG
Full colour · navy rounded SVG
Navy mark · white bg SVG
Mono · all navy SVG
Mono · reversed SVG
Accent — promo SVG
Clearspace
Always pair the emblem with whitespace. Don't crowd the mark.
X
X
X
X
X = ½ × emblem-height
The mark needs room to breathe.
- Minimum clearspace = 0.5 × the emblem height on every edge
- Inside this clearspace: no other graphics, type, or photographic content
- Increase clearspace generously when the mark sits near a page edge or content with high visual weight
- This rule applies to all logo variants (emblem, NR lockup, full wordmark)
Minimum size
If the mark is smaller than this, switch to the favicon emblem.
16 px
Favicon territory · thick-stroke variant
24 px
Web minimum · thick-stroke emblem
8 mm
Print minimum (~30 px on screen)
Web minimum: 24 px Print minimum: 8 mm Favicon (16px): use favicon-thick-yellow / favicon-thick-blue
Do & don't
Rules that keep the marks consistent across every surface.
DO
DO
DO
DON'T
DON'T
✓
Pair with navy or yellow
The marks always sit on one of our two primary brand fields, or on white.
✓
Hold the clear-space rule
1× stroke of air on all four sides. More is welcome — less is not.
✓
Use the right mark
Emblem for small surfaces, wordmark for first impressions.
×
Never skew, tilt or stretch
The marks are always upright and at native proportions.
×
Never recolour
Only the approved fills — navy, yellow, white, black.
×
Never rebuild the wordmark
Use the provided artwork. Do not set NEXUS REGEN yourself.
Minimum sizes
Emblem
DIGITAL
24px
PRINT
10mm
NR lockup
DIGITAL
80px
PRINT
20mm
Wordmark
DIGITAL
160px
PRINT
32mm
02 · Colour
Penn Blue, Aureolin, and a lot of white space.
A two-colour identity with a neutral engine. Navy carries authority, yellow signals action. Everything else is there to let those two breathe.
Core palette
The only colours that should feel like 'Nexus ReGen' at a glance.
Primary
Penn Blue #121541
CMYK 100 · 97 · 40 · 48 Pantone 2765 C
Accent
Aureolin #F7EC33
CMYK 7 · 0 · 90 · 0 Pantone 102 C
Canvas
Paper #FFFFFF
CMYK 0 · 0 · 0 · 0 —
Extended accents
Supporting colours. Use sparingly — one per view.
Data · links
Dodger Blue #1E96FC
CMYK 80 · 36 · 0 · 0
Destructive
Signal Red #FF331F
Success (dark)
Pine Green #17301C
Earthy neutral
Humus #484538
Colour scales
Every base colour has a 12-step ramp. The anchor step is the brand-true hue.
Brand (Penn Blue)
--brand-*
25
F8F9FC
50
F1F2F9
100
DDDFE9
200
B4B7D4
300
8488B6
400
5558A0
500
2A2D78
600
121541
BRAND
700
0E1034
800
0A0C28
900
06081C
950
03040E
Accent (Aureolin)
--accent-*
25
FFFDE8
50
FEF8B8
100
FDF17D
200
FCEB55
300
FDE033
400
F7EC33
BRAND
500
E0D420
600
B8AC10
700
8A7F0A
800
5A5405
900
2E2B02
Neutral
--neutral-*
25
FCFCFD
50
F9FAFB
100
F2F4F7
200
EAECF0
300
D0D5DD
400
98A2B3
500
667085
600
475467
700
344054
800
1D2939
900
101828
950
0C111D
Semantic colours
Success #17B26A
CMYK 80 · 0 · 70 · 10
Warning #F79009
Error #F04438
Info #1E96FC
Approved pairings
These are the only background/foreground combos we sign off on.
Materially smarter.
The intelligence layer.
Brand 600 / White 17.3 : 1 · AAA
Materially smarter.
The intelligence layer.
Brand 600 / Aureolin 12.1 : 1 · AAA
Materially smarter.
The intelligence layer.
Aureolin / Brand 600 12.1 : 1 · AAA
Materially smarter.
The intelligence layer.
White / Brand 600 17.3 : 1 · AAA
Materially smarter.
The intelligence layer.
Neutral 50 / 900 16.6 : 1 · AAA
Materially smarter.
The intelligence layer.
Brand 800 / Aureolin 14.7 : 1 · AAA
The 60·30·10 rule
How we balance colour on any given surface.
60% · Paper & neutral
30% · Penn Blue
10% · Aureolin
White & neutrals carry the canvas. Navy owns the chrome — headers, nav, primary
buttons, important statements. Aureolin is a spotlight: one CTA, one highlight, one
piece of data per view — never more.
03 · Typography
Inter, set tight.
One family, nine scale steps, three weights in active rotation. We use display sizes sparingly and let dense body copy do the real work of explaining material flows, compliance detail and the numbers behind the claim.
Family
Primary
Inter
Variable sans by Rasmus Andersson. Neutral, highly legible at small sizes, extensive
language coverage — suited to dense data tables and terse UI labels.
USE
All body, UI, display
FALLBACK
system-ui, Segoe UI, Arial
Monospace
JetBrains Mono
For code, IDs, reference numbers, and any data that needs to tabulate cleanly.
NR-2026-04-18-4102
Weights in rotation
We lean on 400/500/600. Reserve 700+ for numerals and display.
Nr
Light
300
Nr
Regular
400
Nr
Medium
500
Nr
Semibold
600
Nr
Bold
700
Nr
Extrabold
800
Nr
Black
900
Scale
Names match Tailwind + Untitled UI's display-* / text-* tokens.
display-2xl
72px / 90px · 600 · -1.44px
Materially smarter.
display-xl
60px / 72px · 600 · -1.2px
Every material, visible.
display-lg
48px / 60px · 600 · -0.96px
The intelligence layer.
display-md
36px / 44px · 600 · -0.72px
Every movement, defensible.
display-sm
30px / 38px · 600
The intelligence layer at the heart of UK construction.
display-xs
24px / 32px · 600
Manage compliance risk with confidence.
text-xl
20px / 30px · 500
Every material, visible. Every movement, defensible. Every decision, informed.
text-lg
18px / 28px · 400
Every material, visible. Every movement, defensible. Every decision, informed.
text-md
16px / 24px · 400
Every material, visible. Every movement, defensible. Every decision, informed.
text-sm
14px / 20px · 400
Every material, visible. Every movement, defensible. Every decision, informed.
text-xs
12px / 18px · 400
Every material, visible. Every movement, defensible. Every decision, informed.
Type scale
Exact values for every text role. Click a row to copy the CSS shorthand.
Role
Sample
Size · LH · Weight · Tracking
Class
Display (hero)
Materially smarter.
clamp(48px, 6.5vw, 84px) · 1.02 · 600 · -0.03em
.t-display H2
Section heading.
40px · 1.1 · 600 · -0.02em
.t-h2 H3
Block title.
18px · normal · 600 · 0
.t-h3 Body
Every tonne tracked. Every decision auditable.
16px · 1.6 · 400 · 0
.t-body Body small
Supporting copy and dense list rows.
14px · 1.55 · 400 · 0
.t-body-sm Caption
Metadata, helper text.
13px · 1.5 · 500 · 0
.t-caption Eyebrow
SECTION EYEBROW
11px · 1 · 700 · .12em
.t-eyebrow Code / mono
NR-2026-04-18-4102
13px · 1.5 · 500 · 0
.t-mono Typographic voice
Tight display, generous body, tabular numbers.
Display
Compliance is the
problem we solve.
problem we solve.
60px · semibold · -2.8% tracking
Body
Nexus ReGen is the intelligence layer at the heart of UK construction. When a load of crushed concrete leaves Site A at 08:42 and arrives at Site B at 11:17, weighing 28.4t, that's what the ledger reads — and that's the defensible record the audit shows.
16px · regular · 1.65 line-height · tabular numerals for figures
Hard rules
- Display sizes (30px+) never go below 600 weight.
- Body text runs 400 or 500. Never 300 below 18px — it disappears.
- All numbers in tables and data displays use
font-variant-numeric: tabular-nums. - Don't track out all-caps labels beyond
0.12em. - Max measure for paragraphs: 72 characters. Use
text-wrap: pretty. - Never italicise Inter — we use weight or colour for emphasis instead.
04 · Foundations
Spacing, radius, elevation.
A strict 4-point grid. Two radius defaults (8 and 12). A six-step shadow ramp. Everything composable, everything token-named.
Spacing scale
All padding, gap and margin values come from this scale.
s-1
4px
s-2
8px
s-3
12px
s-4
16px
s-5
20px
s-6
24px
s-8
32px
s-10
40px
s-12
48px
s-16
64px
s-20
80px
s-24
96px
When to use which step
A practical guide to picking spacing values. Click a row to copy the token.
Step
Token
Pixels
Typical use
1
--s-1 4px
Tight chip/badge interior padding, hairlines between related elements
2
--s-2 8px
Icon-to-label gap, dense list rows
3
--s-3 12px
Form field interior, small card padding
4
--s-4 16px
Default gap between siblings, card padding
5
--s-5 20px
Slightly looser card padding
6
--s-6 24px
Card padding, mid-density block separation
8
--s-8 32px
Block separation in a section
10
--s-10 40px
Section padding L/R, headline → body gap
12
--s-12 48px
Section vertical rhythm
16
--s-16 64px
Major content separation
20
--s-20 80px
Hero padding
24
--s-24 96px
Page-level top/bottom padding on hero sections
Layout grid
12-column, 1240px max. 80px page gutter at desktop.
Columns
12
Gutter
16px
Max width
1240px
Page padding
40px → 80px
Radius
We're deliberately low-radius — it signals industrial, not consumer-cute.
None
0px
Xs
2px
Sm
4px
Md
6px
Lg
8px
Xl
12px
2xl
16px
Full
9999px
Elevation
Shadows are soft, never more than 2xl in product UI. 3xl is marketing-only.
xs
shadow-xs
sm
shadow-sm
md
shadow-md
lg
shadow-lg
xl
shadow-xl
2xl
shadow-2xl
Motion
Purposeful, fast, never bouncy.
Instant
State changes
0ms · cubic-bezier(.2,.8,.2,1)
Fast
Hover, focus, small toggles
150ms · cubic-bezier(.2,.8,.2,1)
Default
Most transitions, menus
250ms · cubic-bezier(.2,.8,.2,1)
Slow
Page transitions, large reveals
400ms · cubic-bezier(.2,.8,.2,1)
05 · Iconography
Lucide, 24px, 2px stroke.
One icon library across the whole system. Sharp corners (no line-join rounding), 2px stroke, 24px canvas. For key concepts — arrow, truck, scale, shield — we draw bespoke versions that echo the emblem's L-bracket geometry.
Icon library
Use this library by default in product UIs.
Library
Lucide —
lucide-react.
The de-facto open-source set; predominant import in the nexus4 product code.
Some product surfaces also use @untitledui/icons via the Untitled UI components — confirm with the lead engineer before locking in for new work. Install
pnpm add lucide-reactSizes
16px inline with text · 20px in buttons · 24px standalone / toolbar.
Stroke
strokeWidth={1.5} — matches the system's drawn weight.
Colour
Inherit
currentColor — never hardcode a hex; the icon recolours via parent text colour.
import { ArrowUpRight, Truck, Shield } from 'lucide-react';
// Inline with text (16px), inherits colour
<span className="text-brand-600">
<ArrowUpRight size={16} strokeWidth={1.5} /> View report
</span>
// Standalone (24px) on a button
<button className="icon-btn">
<Shield size={24} strokeWidth={1.5} aria-hidden />
</button>
System icons
Drawn from the Lucide set. Never use filled + outline in the same view.
arrow-up-right
truck
package
map-pin
check-circle
shield
scale
bar-chart
file-text
clock
layers
globe
user
settings
search
filter
Sizes
16px
20px
24px
32px
40px
56px
Brand marks
06 · Components
The kit.
The building blocks that ship in every Nexus ReGen product. Lean, accessible, built on Untitled UI primitives with our tokens baked in.
Buttons
Six variants · four sizes
Variants
Sizes
Inputs
Text fields
Weight & volume — toggle units (ported from product MaterialVolumeInput)
Selections
Badges & status
Colour × variant
Draft Scheduled Review Verified Action needed Rejected v0.1 10 items
Cards
Material diverted · April
1,284t
Verified chain-of-custody
Every movement digitally signed at weighbridge, yard and site. One ledger, zero
paperwork gaps.
This quarter
8,400 tonnes of waste turned back into product.
Data table
Tabular numerals, dense rows, status badges with dots.
Today's movements
18 April 2026 · 4 loads · 102.6t
| Ref | Material | From | To | Weight | Status |
|---|---|---|---|---|---|
| NR-04182-A | Crushed concrete 6F2 | Newcastle Quays | Gateshead Link | 28.4t | Delivered |
| NR-04182-B | Asphalt planings | A1 Western | Hexham Depot | 24.1t | In transit |
| NR-04182-C | Topsoil, class A | Sage Gateshead | Stockton Plot | 18.9t | Queued |
| NR-04182-D | Recycled aggregate | Tyne Yard 4 | Jarrow East | 31.2t | Delivered |
Alerts
!
New verification standard
ISO 14064-3 evidence is now attached to every ledger export.
!
Load NR-04182-A delivered
28.4t crushed concrete arrived at Gateshead Link at 11:17.
!
Driver certificate expiring
B. Okafor · HGV Class 2 · expires in 6 days.
!
Weighbridge offline
Newcastle Quays node has not reported since 08:12. Check connectivity.
07 · Patterns
The system, applied.
How the tokens, type and components come together on real surfaces — marketing, product and document output.
Marketing hero
Brand navy, one accent, one image-style CTA pair.
nexusregen.com / home
At the heart of UK construction
The intelligence layer running at the heart of UK construction.
Every material, visible. Every movement, defensible. Every decision, informed. Find more value in your materials and manage compliance risk with confidence.
Product dashboard
Dense, utilitarian, navy chrome + white canvas.
app.nexusregen.com / dashboard
Portfolio overview
Good afternoon, Jonathan.
12 active projects · 2 need attention
Value found this quarter
£182k
vs disposal baseline
Diverted from landfill
4,280t
Across 12 projects
Assurance score
94%
DWT aligned evidence
Today's movements
4 loads · 102.6t
| Ref | Material | From | To | Weight | Status |
|---|---|---|---|---|---|
| NR-04182-A | Crushed concrete 6F2 | Newcastle Quays | Gateshead Link | 28.4t | Delivered |
| NR-04182-B | Asphalt planings | A1 Western | Hexham Depot | 24.1t | In transit |
| NR-04182-C | Topsoil, class A | Sage Gateshead | Stockton Plot | 18.9t | Queued |
| NR-04182-D | Recycled aggregate | Tyne Yard 4 | Jarrow East | 31.2t | Delivered |
Ledger receipt
Output document — used in exports, PDFs, partner systems.
Document · PDF-ready
LEDGER ENTRY
NR-2026-04-18-4102
From
Newcastle Quays
Site A · Weighbridge 2
→
To
Gateshead Link
Site B · Bay 3
Material Crushed concrete 6F2
Weight 28.4t
Departed 18 Apr · 08:42
Arrived 18 Apr · 11:17
Haulier Tyneside Aggregates Ltd
Driver B. Okafor · HGV Class 2
Verified · 3 signatures 0x7a2f…c9e1
08 · Messaging
What we say.
The single reference for how Nexus ReGen describes itself — internally and externally. Everyone on the team should be able to work from this.
The messaging house
Tagline → hero line → three pillars of value. Everything else hangs off this.
TAGLINE
Materially smarter construction.
HERO LINE
Nexus ReGen is the intelligence layer running at the heart of UK construction.
Every material, visible. Every movement, defensible. Every decision, informed.
Intelligence
— The brain
One layer beneath everything.
Nexus Intelligence reads, interprets and connects material data, compliance records and project requirements across every site and stage — continuously. The more it is used, the smarter it gets.
Materials
— The value we unlock
Find more value in your materials.
The Materials Exchange Platform attacks cost on both sides — reducing what you pay to dispose and cutting reliance on expensive virgin supply. It recovers value the industry has always left on the table.
Compliance
— The risk we manage
Manage compliance risk with confidence.
Nexus Assurance builds a defensible record on every movement, before exposure becomes liability. Duty of Care you can prove, not just hope holds up.
The architecture
One intelligence layer. Modules you put it to work with. This is the structure everything else maps to.
NEXUS INTELLIGENCE · THE BRAIN
The intelligence layer that sits beneath everything.
Not a dashboard. Not a reporting tool. The central repository construction organisations point their data to — reading,
interpreting and connecting it across every site and stage, learning from every listing, movement and decision. The more
it is used, the smarter it gets.
MEP
Live Materials Exchange Platform
Connects sites that have material with sites that need it — intelligently, efficiently and compliantly. One environment to list, find and agree material opportunities across your own estate and the wider UK market.
Compliance
Live Nexus Assurance
Makes sure the compliance evidence is already there when it matters. It captures proof at the point of movement, verifies it against what was declared, and assembles a defensible record across every contractor, site and project.
Coming soon
Coming soon Nexus Trading
The next module on the intelligence layer. More to share soon.
How it works together
The brain and the modules — and why the entry point is never the destination.
Nexus Intelligence is the brain. MEP and Nexus Assurance are how you put it to work.
Customers do not buy Nexus ReGen. They buy the module that solves their most immediate problem — the materials cost that is
eating margin, or the compliance exposure sitting quietly in their supply chain. But every module runs on the same intelligence
layer, so every listing, every movement and every compliance check feeds the same intelligence. The picture gets clearer. The
decisions get smarter. The advantage compounds.
The entry point is a module. The destination is a different way of operating.
The two-beat pitch
Compliance opens the door. Materials value closes the deal. Both run on the same layer.
Beat 1 · The problem
"Every material movement carries compliance exposure — and Duty of Care stays with you."
Door-opener. Creates urgency. Why they take the meeting. Manage that risk with confidence, not hope.
Beat 2 · The value
"And the same intelligence layer finds more value in your materials — disposal down, virgin supply down."
Deal-closer. Proves the return. Why they sign.
The materials lifecycle
Plan → Source → Move → Prove. The workflow that runs through the modules — powered by Nexus Intelligence. A lifecycle, not a grab-bag.
01 · PLAN
Know what you've got before you move a tonne.
What it does
Add projects at tender stage, read material data and build a live picture of surplus, deficit and reuse opportunities in minutes.
Module
MEP
02 · SOURCE
The right material, matched to the right job.
What it does
AI smart matching reads listing data, testing results and documents to find the right counterpart — not just by location, but by spec, compliance and timing.
Module
MEP
03 · MOVE
Every movement proposed before a wagon turns.
What it does
The supply chain submits intent before material moves, validated against site rules so compliance gaps are caught before movements happen, not after.
Module
Nexus Assurance
04 · PROVE
The evidence is already there when it matters.
What it does
Evidence is captured, verified against what was declared, and assembled into a one-click pack — aligned with CL:AIRE DoW CoP, BS 3882 and Digital Waste Tracking.
Module
Nexus Assurance
ℹ️
Lead with the module, not the verbs.
Plan, Source, Move and Prove describe how work flows — useful shorthand for the lifecycle. But customers buy a
module (MEP or Nexus Assurance), not a four-step process. Open on the problem the module solves, then show how the
lifecycle runs through it. Reporting is a capability across both modules, not a standalone product.
MEP — what's included
The Materials Exchange Platform. Feature → what it does → what it means for you.
| Feature | What it does | What it means for you |
|---|---|---|
| Material listings | List surplus or required materials with full supporting information | Full market visibility of what you have and what you need. No more missed opportunities |
| Private internal environment | Manage materials across your own sites before publishing externally | Maximise internal reuse first and keep value within the business before going to market |
| AI smart matching | Reads and interprets listing data, testing results and documents to identify the best matches | Find the right counterpart faster, not just by location but by spec, compliance and timing |
| Tender stage projects | Add projects at tender stage before construction starts | Get ahead on material strategy, pricing and carbon reduction before a single wagon moves |
| Document and data management | Centralise all project documents, data and material information in one place | One environment for material planning, matching, reporting and compliance across every project |
| Reporting | View material activity at project, regional, divisional or national level | Leadership gets a clear picture of what is available, what is progressing and where the opportunities are |
| DataPoint | A secure intake for supply chain paperwork, turning tickets, delivery notes and transfer records into structured, auditable data | Full visibility across projects without chasing emails and PDFs |
| Direct messaging | Communicate with counterparts about opportunities directly on the platform | Efficient, documented and all in one place |
| Supplier directory | Access a list of verified supplier partners across the UK construction market | Connect with the right material providers quickly, without starting from scratch |
Nexus Assurance — what's included
The compliance module. Feature → what it does → what it means for you.
| Feature | What it does | What it means for you |
|---|---|---|
| Site rules engine | Client sets compliance rules upfront that apply to every movement on their sites | Consistent standards across all sites and contractors. No more every team doing it differently |
| Movement proposals | Supply chain submits intent before a wagon moves | A clear record of what should happen, giving clients visibility and control before it is too late to act |
| Pre-check | Automatically validates proposals against site rules before approval | Compliance gaps caught before movements happen, not after. Reduces incidents, disputes and regulatory exposure |
| AI evidence extraction | Reads and extracts data from tickets, PDFs and documents automatically | Removes hours of manual checking. Teams focus on exceptions, not admin |
| Evidence verification | Cross checks extracted data against the original proposal | Identifies mismatches and missing paperwork the moment they occur, not at audit time |
| Gaps management | Flags fixable compliance items and assigns them to owners with deadlines | Clear accountability. Everyone knows what needs fixing and who owns it |
| Findings management | Records deviations that cannot be fixed, with a full audit trail | An honest, defensible record of what happened, not a sanitised version assembled after the fact |
| Assurance score | Generates a compliance performance score per movement, site, project or contractor | A simple risk signal for leadership. Instantly see where to focus attention across the portfolio |
| Evidence pack | One click export of all plans, movements, tickets, evidence, gaps and findings | Walk into any audit or regulator visit prepared, in minutes not days |
| DWT readiness | Structured data capture aligned to Digital Waste Tracking requirements | Get ahead of incoming regulation before it becomes a business problem |
One-liner variants
Same story, different rooms. Pick the line that fits the moment.
Canonical / hero
"Nexus ReGen is the intelligence layer running at the heart of UK construction."
Click to copy
The triad
"Every material, visible. Every movement, defensible. Every decision, informed."
Click to copy
50-word opener
"Nexus ReGen is the intelligence layer at the heart of UK construction, helping organisations find more value in their materials and manage compliance risk with confidence."
Click to copy
MEP
"The Materials Exchange Platform connects sites that have material with sites that need it — intelligently, efficiently and compliantly."
Click to copy
Nexus Assurance
"Every material movement carries compliance exposure. Nexus Assurance makes sure the evidence is already there when it matters."
Click to copy
With attitude
"This is construction, running smarter."
Click to copy
Headline proof
Talk traction in scale, not specific counts. Use named case studies for concrete savings.
Traction language
"Trusted by hundreds of organisations, used by thousands of people and deployed across thousands of live projects."
Lead with scale, not specific numbers. Don't publish exact org, project or value counts, and don't quote a single headline
percentage as the proof. Where you need something concrete, reach for a named case study below.
Project
Result
Best used for
Leeds project
£255k saved on a single project
Commercial / cost-led audiences
Reuse link-up
£300k saved, 30,000 m³ reused
Scale of opportunity
Reading project
£210k saved through reuse
Cost + reuse combined
Topsoil reuse
£36k saved · 210 tCO₂e avoided · 6,000 tonnes reused
Sustainability + operational
Single carbon link-up
2,196 tCO₂e avoided (≈ 1,400 cars off the road for a year)
Sustainability / ESG audiences
Customer reference
Trusted by leading UK housebuilders and major infrastructure programmes — including some of the country's most recognised
construction names.
Framing: inclusive scale — "at the heart of UK construction", not "the biggest programmes". Name specific customers only
where you have sign-off to do so.
Who we talk to
Six personas. Pain led, with self identification — both modules are relevant to all of them.
| Persona | Their pain (in their words) | Open with |
|---|---|---|
| Main Contractors Managing materials and compliance across many sites and subcontractors. | "Every site and every team does it differently, and I have no consistent view of materials or compliance across the job." | Set the rules once and they apply to every movement on every site. A defensible record across every contractor, and one environment to find value in materials across the project. |
| Developers & Housebuilders Cost, margin and portfolio visibility across the estate. | "Materials costs keep going up, we're overpaying for disposal, and I can't see what's happening across our sites." | MEP finds more value in your materials across the estate — reducing disposal costs and reliance on virgin supply — while Nexus Assurance lets you manage compliance risk with confidence across every project. |
| Groundworks Contractors On the ground, moving material every day. | "I'm paying to dispose of material that another site down the road is paying to import." | MEP connects what you have with what someone else needs — recovering value the industry leaves on the table, reducing disposal costs and cutting reliance on expensive virgin material. |
| Suppliers & Hauliers Want to win work and fill capacity. | "We only hear about opportunities through word of mouth, and half our trucks go back empty." | Get in front of live projects looking for exactly what you offer — matched by material, location and timing. Verified supplier directory, direct messaging, backload opportunities so return journeys earn. |
| Environmental & Compliance Leads Carry the Duty of Care exposure. | "Duty of Care stays with us, but I have limited visibility of what the supply chain actually does once material leaves site." | Nexus Assurance closes the blind spot — capturing proof at the point of movement and assembling a defensible record before exposure becomes liability. Structured for Digital Waste Tracking from October 2026. |
| Major Projects Programmes where scrutiny, audit and long-term liability are constant. | "I need an honest, defensible audit trail across every contractor and a clear signal of where the risk is." | One assurance record across every contractor, site and stage, with an assurance score that tells leadership where to focus. An honest record of what happened, not a sanitised version assembled after the fact. |
The regulatory tailwind
Why urgency is real, and why compliance is increasingly the door-opener.
⚠️
Regulation is accelerating, not easing.
UK construction compliance is tightening — evolving waste regulations, Environment Agency enforcement,
CL:AIRE DoW CoP, BS 3882. For some buyers, legal obligation is the buying driver: Schedule 16,
Duty of Care, long-term liability on contaminated land. The financial consequences of getting it wrong are significant —
landfill tax liability, penalties, remediation costs, legal action.
Digital Waste Tracking arrives from October 2026. Enforcement is increasing. The organisations already on Nexus ReGen are already ahead.
Talking about the marketplace
The nuance that matters — a marketplace at the heart of MEP, not the whole company.
Say
"A marketplace sits at the heart of MEP — matching material surplus with demand, including direct reuse."
"MEP and Nexus Assurance are modules on the Nexus Intelligence layer."
"We connect sites that have material with sites that need it — through direct reuse or nearby sourcing."
Don't say
"Nexus ReGen is a marketplace for construction materials."
"We're just a marketplace."
"A platform for trading materials." (Nexus Trading is a separate, coming module.)
Boilerplate library
Pre-approved, ready to paste. Click Copy on any block.
50 words
Directories, profiles, short intros
Boilerplate
Nexus ReGen is the intelligence layer at the heart of UK construction. It helps organisations find more value in their materials and manage compliance risk with confidence, connecting the people, materials and data the industry has always kept apart.
100 words
About pages, proposals
Boilerplate
The construction industry has always moved on fragmented data, buried paperwork and assumptions. Nexus ReGen changes that.
The intelligence layer at the heart of UK construction, Nexus ReGen gives organisations full visibility of their materials and a defensible record of every movement. The Materials Exchange Platform attacks cost on both sides, reducing disposal costs and cutting reliance on expensive virgin material. Nexus Assurance manages the compliance risk that sits quietly in every waste movement, giving organisations the defensible record they need before exposure becomes liability.
Already trusted by hundreds of organisations, used by thousands of people and deployed across thousands of live projects. This is construction, running smarter.
150 words
Press releases, long form
Boilerplate
Trusted by hundreds of organisations, used by thousands of people and deployed across thousands of live projects, Nexus ReGen is the intelligence layer already running at the heart of UK construction.
The industry has always moved on fragmented data, buried paperwork and assumptions. The organisations on Nexus ReGen do not.
The Materials Exchange Platform is already recovering value that most of the industry is still leaving on the table — saving organisations through material reuse, reducing what they pay to dispose and cutting reliance on expensive virgin supply.
Nexus Assurance exists because the biggest compliance risk in construction is not what you know about. It is what you do not. Duty of Care does not leave with the waste. Nexus Assurance builds a defensible compliance record on every movement before it happens, so when someone does ask, the answer is already there.
Digital Waste Tracking is coming. Enforcement is increasing. The organisations already on Nexus ReGen are already ahead. Materially smarter construction. This is what it looks like.
MEP — short
Materials Exchange Platform
50 words
The Materials Exchange Platform connects sites that have material with sites that need it, intelligently, efficiently and compliantly. Already saving organisations through material reuse, MEP gives construction organisations one environment to list, find and agree material opportunities across their own estate and the wider UK market.
MEP — long
Materials Exchange Platform
100+ words
The construction industry has always had a material problem. One site paying to dispose of what another site is paying to import. The opportunity to connect them has always existed. The intelligence to do it consistently, at scale, and with confidence has not, until Nexus ReGen's MEP.
The Materials Exchange Platform is the digital environment where construction organisations list what they have, find what they need, and connect with the right counterpart. Powered by Nexus Intelligence, MEP reads material data, testing results and project requirements to find the right match, not just by location, but by spec, compliance and timing.
Already deployed across thousands of live projects, MEP is recovering value the industry has always left on the table. Reducing disposal costs. Cutting reliance on expensive virgin supply. Giving organisations a central point of visibility across their entire material portfolio, from tender stage through to project completion.
The opportunity has always existed. MEP is the intelligence that makes it real.
Nexus Assurance — short
Compliance module
50 words
Every material movement carries compliance exposure. Nexus Assurance makes sure the evidence is already there when it matters. It gives construction organisations real visibility of their supply chain, so Duty of Care is something they can prove, not something they are hoping holds up.
Nexus Assurance — long
Compliance module
100+ words
Every material movement carries compliance exposure. Nexus Assurance makes sure the evidence is already there when it matters.
Duty of Care stays with the producer. But most organisations have limited visibility of what their supply chain is actually doing once material leaves site. Who is carrying it. Where it is going. Whether the paperwork matches the movement. That blind spot is where exposure lives.
Nexus Assurance closes it. It captures the right proof at the point of movement, verifies it against what was declared, and assembles it into a clear auditable record across every contractor, every site and every project. The result is real supply chain visibility and a compliance position you can defend, not just describe.
Built to sit above existing site systems and structured for Digital Waste Tracking from October 2026, Nexus Assurance gives teams a compliance record that holds up when scrutiny arrives.
Nexus Intelligence
The layer beneath the modules
The brain
The brain behind every Nexus ReGen module, Nexus Intelligence is the central repository that construction organisations point their data to. It reads, interprets and connects material data, compliance records, market conditions and project requirements across every site and every stage of construction, continuously, automatically and in real time.
It is not a dashboard. It is not a reporting tool. It is the intelligence layer that sits beneath everything, learning from every listing, every movement and every decision made across the platform. The more it is used, the smarter it gets.
Most construction tech solves a problem in isolation. Nexus Intelligence builds an advantage that compounds.
Conversational
When someone asks what you do
Pub / DM
We're the intelligence layer behind UK construction. We help companies find more value in their materials — connecting a site that has material with one that needs it — and prove their compliance on every movement, so when someone asks for the paperwork, it's already there.
Email signature taglines
Pick one. Rotate if you like.
"Materially smarter construction."
Click to copy
"This is construction, running smarter."
Click to copy
"Every material, visible. Every movement, defensible. Every decision, informed."
Click to copy
"A different way of operating."
Click to copy
"Making reuse the default in construction."
Click to copy
09 · Voice
How we sound.
Confident, plain-English, construction-native — with enough wit to feel human, enough rigour to feel credible, and enough ambition to feel like the category-definer we're becoming.
Voice in one sentence
We write like someone who's been on site — not someone who's read about it.
Five voice principles
The rulebook for every word we publish.
01
Plain English, construction-native
Use the words our customers use — tonnes, loads, movements, SI reports, WTNs, backloads, spec, surplus. Avoid tech-industry jargon that makes construction people switch off.
02
Verbs over nouns
Lead with what things do, not what they are. We find more value in materials, manage compliance risk, build a defensible record. Active voice. Short sentences.
03
Specific outcomes over vague claims
A named case study beats three paragraphs of adjectives — £255k saved on a single Leeds project beats "significant cost savings". Talk traction in scale (hundreds of organisations, thousands of projects), not exact counts.
04
Confident, not cocky
We are at the heart of UK construction, trusted by hundreds of organisations. State it plainly and inclusively. No hedging, no overselling, no "biggest programmes" chest-beating.
05
Intelligence without the hype
The platform is intelligent — that is the whole point of Nexus Intelligence. But we don't shout "AI-POWERED" on every surface. Describe what the intelligence does. Save the label for where it earns its keep.
Tone by context
Voice is constant. Tone flexes. Same Nexus ReGen in every room — we just read the room.
Context
Tone
Example
Homepage hero
Confident, punchy, declarative
"The intelligence layer running at the heart of UK construction. Every material, visible. Every movement, defensible. Every decision, informed."
Enterprise proposal, RFP
Measured, module-framed, proof-heavy
"Nexus Assurance gives you a defensible record on every movement, across every contractor and site — a compliance position you can defend, not just describe."
Sales deck opening
Problem-first, then module
"Every material movement carries compliance exposure, and Duty of Care stays with you. Nexus Assurance makes sure the evidence is already there — and the same layer finds more value in your materials."
LinkedIn, thought leadership
Opinionated, observational, some attitude
"The industry has always moved on fragmented data, buried paperwork and assumptions. The organisations on Nexus ReGen do not."
Pub, networking, DM
Relaxed, no jargon, human
"We connect a site that has material with one that needs it, and make sure the compliance paperwork is already there when someone asks."
Regulatory / legal buyer
Serious, governance-led
"A defensible compliance record on every movement, before exposure becomes liability. Structured for Digital Waste Tracking from October 2026."
Board / investor
Strategic, scale-led, category-defining
"This is not problem solving. This is a different way of operating — an advantage that compounds with every movement on the platform."
Say this, not that
We write
"A defensible record on every movement, before exposure becomes liability."
Not this
"End-to-end compliance risk elimination leveraging AI-driven insights."
We write
"Nexus Intelligence reads your testing results and matches surplus to demand by spec, compliance and timing."
Not this
"Our AI-powered platform provides document analysis capabilities for material matching."
We write
"£255k saved on a single project in Leeds."
Not this
"Significant cost savings across our client base."
We write
"A marketplace sits at the heart of MEP — matching surplus with demand, including direct reuse."
Not this
"Nexus ReGen is a marketplace for construction materials."
We write
"Duty of Care stays with you. Nexus Assurance makes sure the answer is already there when someone asks."
Not this
"Nexus ReGen helps you prepare for upcoming regulatory changes in a compliance-ready manner."
Do & don't
✓
Lead with the module, not the company
Customers buy MEP or Nexus Assurance, not Nexus ReGen. Open on the problem the module solves; Nexus ReGen is the umbrella they trust.
✓
Compliance opens, materials value closes
Two-beat: compliance exposure is the door-opener, more value in your materials is the deal-closer.
✓
Name the layer: Nexus Intelligence
The brain beneath the modules. Describe what it does — it learns from every movement and the advantage compounds.
✓
Manage compliance risk with confidence
Build a defensible record. Never claim to "eliminate" or "remove" risk.
✓
Talk traction in scale
Hundreds of organisations, thousands of people, thousands of projects. Named case studies (£255k Leeds) for concrete proof.
✓
British English, Oxford comma, sentence case
organisation, optimise, colour, centre, programme. Capital R, capital G in Nexus ReGen.
×
Don't publish exact counts or a headline %
No "4,500+ projects", "260+ orgs", "£320B" or "26% average" as the proof. Use scale language and case studies instead.
×
Don't say "eliminate risk" or "single source of truth"
Say "manage compliance risk with confidence" and "document and data management".
×
Don't call us "just a marketplace" or a broker
A marketplace sits at the heart of MEP. Nexus Trading is a separate, coming module — don't conflate them.
×
Don't hedge
No "we believe", "we think we can help", "potentially". State it.
×
Don't say "AI-powered" as a label
Describe what Nexus Intelligence does — reads testing results, matches supply to demand. The capability carries the signal.
×
Don't write Regen, RE:GEN, re-gen or NexusRegen
It's Nexus ReGen. Always. And avoid decorative hyphens — only hyphenate to separate words grammatically.
Banned phrases
If you catch yourself reaching for one of these, swap it.
AI-powered platform
→
Nexus Intelligence reads your project data and matches supply to demand
Eliminate / remove compliance risk
→
Manage compliance risk with confidence
Single source of truth
→
Document and data management
Digital platform for trading materials
→
The intelligence layer at the heart of UK construction
Powering regenerative construction
→
Materially smarter construction
The biggest programmes / clients
→
At the heart of UK construction
4,500+ projects · 260+ orgs · 26% average
→
Hundreds of organisations, thousands of projects
End-to-end / holistic / comprehensive
→
One intelligence layer. Every material. Every movement.
Leverage / utilise / synergise
→
Use
Regen / RE:GEN / re-gen / NexusRegen
→
Nexus ReGen
Filler words we cut
journey synergy leverage unlock game-changer revolutionary seamless simply effortless empower harness ecosystem holistic disrupt next-gen best-in-class cutting-edge paradigm shift robust streamline utilise
Writing mechanics
Numbers & units
- Traction in scale: hundreds of organisations, thousands of projects.
- Concrete proof: named case studies — £255k Leeds, 2,196 tCO₂e.
- £ with no space. Use
k,m,Bfor scale. - Weight: tonnes or t. Volume: m³ with a space.
- Carbon:
tCO₂e— lower t, upper CO, subscript 2, lower e.
Grammar
- British English: organisation, optimise, colour, programme.
- Oxford comma: yes.
- Em dashes — with spaces — for asides. En dashes (–) for ranges.
- Sentence case for headings. Proper nouns keep their caps.
- Never italicise Inter — use weight or colour for emphasis.
Dates & names
- Dates: 17 April 2026. No ordinals.
- Company: Nexus ReGen — capital R, capital G. Always.
- Layer:
Nexus Intelligence. Modules:MEPNexus AssuranceNexus Trading. - Lifecycle verbs lowercase in prose: plan, source, move, prove.
- Domain:
nexusregen.comlowercase in URLs.
Pre-publish checklist
Run through before it goes out.
Brand · voice guide
Found a gap or want to propose a new boilerplate? Email
brand@nexusregen.com
10 · Security
Who you're trusting.
How we talk about security and trust. Adopting new technology means placing trust in the organisation behind it — and when that technology sits at the centre of how you manage materials, movements and compliance, the question of who you are trusting deserves a serious answer.
The position
The trust argument, in our words.
CERTIFIED
Nexus ReGen is ISO 27001 certified.
Your intelligence is protected to the standard your procurement team would require —
because we met it before they asked.
ISO 27001
What the certification means
Plain-English explanation for proposals, RFPs and security questionnaires.
ISO 27001
The internationally recognised standard for information security management — independently audited and rigorously maintained. It covers confidentiality, integrity and availability: the right people can access the right information, and nobody else can.
Many enterprise procurement processes now treat ISO 27001 as a prerequisite, not a nice
to have. It is a high bar. Deliberately so. Before you sign with anyone, ask them the
same question. The answer will tell you everything.
How to talk about it
The lines that carry the trust message without overclaiming.
Say
"Nexus ReGen is ISO 27001 certified — we met the standard before your procurement team asked."
"Your intelligence is protected to the standard your procurement team would require."
"Independently audited. Rigorously maintained."
Don't say
"Bank-grade / military-grade security."
"100% secure" or "unhackable".
Claiming certifications or controls we don't hold.
10 · Assets
Download anything.
Every brand asset we produce, ready to drop into a deck, a site, a social profile or a vehicle wrap. Pre-rendered for common sizes; the live generators live on the Generators page.
The marks
PNG & SVG, every approved colourway.
Favicons & app icons
Drop-in package for any web property.
favicon-16
16×16 px
favicon-32
32×32 px
favicon-48
48×48 px
favicon-64
64×64 px
favicon-96
96×96 px
favicon-128
128×128 px
favicon-192
192×192 px
favicon-256
256×256 px
favicon-512
512×512 px
Apple touch icon
180×180
Safari pinned tab
SVG · mono
HTML head — favicons
<!-- Nexus ReGen favicons -->
<link rel="icon" href="/favicons/favicon.svg" type="image/svg+xml" />
<link rel="icon" href="/favicons/favicon-32.png" sizes="32x32" type="image/png" />
<link rel="icon" href="/favicons/favicon-192.png" sizes="192x192" type="image/png" />
<link rel="apple-touch-icon" href="/favicons/apple-touch-icon.png" sizes="180x180" />
<link rel="mask-icon" href="/favicons/safari-pinned-tab.svg" color="#121541" />
<link rel="manifest" href="/favicons/site.webmanifest" />
<meta name="theme-color" content="#121541" />
HTML head — social
<!-- OG / Twitter meta -->
<meta property="og:title" content="Nexus ReGen — Materially smarter construction" />
<meta property="og:description" content="The intelligence layer at the heart of UK construction. Find more value in your materials and manage compliance risk with confidence." />
<meta property="og:image" content="https://nexusregen.com/og/og-default.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://nexusregen.com" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Nexus ReGen — Materially smarter construction" />
<meta name="twitter:description" content="The intelligence layer at the heart of UK construction. Find more value in your materials and manage compliance risk with confidence." />
<meta name="twitter:image" content="https://nexusregen.com/og/og-default.png" />
Open Graph & social cards
1200×630 preview cards for every page and launch.
Custom social cards
Need a one-off? Use the live generator on the Generators page.
Banner generator
OG, LinkedIn, X, IG story — generated on demand.
Twitter / X · Instagram
Patterns
Tileable arrow motifs — use as section backgrounds, slide divides, fabric prints.
Desktop & mobile wallpapers
Email & presentation
For developers
Drop-in token files for CSS, Tailwind and design-token pipelines.
/* Nexus ReGen — CSS custom properties */
:root {
--brand-25: #F8F9FC;
--brand-50: #F1F2F9;
--brand-100: #DDDFE9;
--brand-200: #B4B7D4;
--brand-300: #8488B6;
--brand-400: #5558A0;
--brand-500: #2A2D78;
--brand-600: #121541; /* Penn Blue */
--brand-700: #0E1034;
--brand-800: #0A0C28;
--brand-900: #06081C;
--brand-950: #03040E;
--accent-400: #F7EC33; /* Aureolin */
--accent-500: #E0D420;
--font-body: 'Inter', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, monospace;
}
// tailwind.config.js — Nexus ReGen
export default {
theme: {
extend: {
colors: {
brand: {
25: '#F8F9FC', 50: '#F1F2F9', 100: '#DDDFE9',
200: '#B4B7D4', 300: '#8488B6', 400: '#5558A0',
500: '#2A2D78', 600: '#121541', 700: '#0E1034',
800: '#0A0C28', 900: '#06081C', 950: '#03040E',
},
accent: {
400: '#F7EC33', 500: '#E0D420', 600: '#B8AC10',
},
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
mono: ['JetBrains Mono', 'ui-monospace', 'monospace'],
},
},
},
};
{
"$schema": "https://tokens.studio/schema.json",
"color": {
"brand": {
"600": { "value": "#121541", "type": "color" },
"700": { "value": "#0E1034", "type": "color" }
},
"accent": {
"400": { "value": "#F7EC33", "type": "color" }
}
},
"typography": {
"family": {
"body": { "value": "Inter", "type": "fontFamilies" },
"mono": { "value": "JetBrains Mono", "type": "fontFamilies" }
}
}
}
Machine-readable manifest
A JSON index of every asset on this page, for automation and coding agents.
11 · Hosted assets
Stable URLs for everything visible.
Every brand asset on this page is served from the public-assets R2 bucket at https://assets.nexusregen.com — already CDN-cached and ready to embed in product code, READMEs, partner tiles, and email signatures. SVG is preferred for everything web; PNG / JPG mirrors exist for places vector isn't supported.
Search
Favicons & app icons
Pre-baked, 16/32/180/192/512 ready.
Favicon 1
nr/icon/favicon1 
Favicon 2
nr/icon/favicon2 
Favicon · filled
nr/icon/favicon-filled 
Favicon · thick blue
nr/icon/favicon-thick-blue 
Favicon · thick light blue
nr/icon/favicon-thick-lblue 
Favicon · thick yellow
nr/icon/favicon-thick-yellow 
Icon · blue rounded
nr/icon/nr-icon-blue-rounded 
Icon · blue square
nr/icon/nr-icon-blue-sq 
Icon · square arrow (yellow on blue)
nr/icon/nr-icon-sq-arrow-yellow_on_blue Backgrounds
Branded background fills. Use for hero sections, decks, social.
Background 1
nr/bg/nr-bg-1 Legacy
Stable URL retained for backward compatibility.
Legacy logo
logo Notes
Limitations and quirks to be aware of.
- The bucket also contains an older
Nexus-ReGen-Brand-Kit/…hierarchy (~140 files) — not surfaced here. Prefer thenr/…paths above for new work. - The user-supplied
nr-icon-blue-squareentries (large variant) return 404 — only the smallnr-icon-blue-sqexists. The large one was never uploaded. - SVGs are the source. PNG / JPG are pre-rendered exports — convenient, but use SVG wherever a vector is acceptable.
- Bucket is public + CDN-fronted by Cloudflare, so caching is aggressive. Expect ~1 hour TTL on changed assets unless you cache-bust.
12 · Motion
Motion & easing
Motion communicates causality. Keep it brief, predictable, and quiet — animation should never compete with content.
Duration scale
Click any row to copy the millisecond value.
--motion-fast 120ms
Micro-interactions — hover, focus ring, button press, ripple.
--motion-normal 200ms
Default for state changes — open/close panels, switch tabs, toggle.
--motion-slow 320ms
Substantive transitions — modal open, page route, drawer slide.
--motion-graceful 480ms
Content reveal, list-stagger root, hero-section choreography.
Easing curves
Click a row to copy the cubic-bezier string.
--ease-out Default for "entering" elements — panels opening, content revealing.
cubic-bezier(0.0, 0.0, 0.2, 1) --ease-in For "exiting" elements — panels closing, content dismissal.
cubic-bezier(0.4, 0.0, 1, 1) --ease-in-out For elements travelling across the screen — sliders, sortable rows.
cubic-bezier(0.4, 0.0, 0.2, 1) --ease-out-expressive Celebratory reveals — success states, confetti. Use sparingly.
cubic-bezier(0.16, 1, 0.3, 1) Rules of thumb
When in doubt, snap a 200ms ease-out and move on.
- 01 Default any new transition to 200ms ease-out.
- 02 Never animate more than two properties simultaneously.
- 03 Respect prefers-reduced-motion (compress all durations to 0 or sub-50ms).
- 04 Don't animate properties that cause layout (margin, top, width); prefer transform and opacity.
- 05 Match the animation polarity: opening → ease-out, closing → ease-in.
- 06 List entry/exit can use a 30-50ms stagger between siblings.
Reduced motion
Wrap any non-essential transition in a media-query guard. The system tokens above are the
"full motion" defaults; when the user has reduced motion enabled, collapse them.
@media (prefers-reduced-motion: reduce) {
:root {
--motion-fast: 0ms;
--motion-normal: 0ms;
--motion-slow: 0ms;
--motion-graceful: 0ms;
}
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}