Configularity

:root {
–bg: #f5f7fb;
–bg-soft: #eef3f9;
–surface: rgba(255, 255, 255, 0.78);
–surface-strong: #ffffff;
–surface-2: #edf2f8;
–text: #111827;
–muted: #5b6474;
–line: rgba(148, 163, 184, 0.22);
–purple: #7c2db5;
–purple-2: #a23cc2;
–green: #19b34f;
–green-2: #9cd53a;
–accent: linear-gradient(135deg, var(–purple-2), var(–purple), var(–green), var(–green-2));
–shadow: 0 24px 70px rgba(15, 23, 42, 0.08);
–shadow-lg: 0 28px 100px rgba(15, 23, 42, 0.12);
–radius: 28px;
–radius-sm: 18px;
}

body.dark-mode {
–bg: #05070c;
–bg-soft: #0a1020;
–surface: rgba(12, 18, 34, 0.78);
–surface-strong: #0f1728;
–surface-2: #121c31;
–text: #f5f7fb;
–muted: #9ea8bc;
–line: rgba(148, 163, 184, 0.14);
–shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
–shadow-lg: 0 28px 100px rgba(0, 0, 0, 0.5);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
margin: 0;
font-family: Inter, Arial, Helvetica, sans-serif;
color: var(–text);
background:
radial-gradient(circle at top left, rgba(124,45,181,0.12), transparent 30%),
radial-gradient(circle at top right, rgba(25,179,79,0.12), transparent 28%),
linear-gradient(180deg, var(–bg), var(–bg-soft));
line-height: 1.6;
transition: background .25s ease, color .25s ease;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.container {
width: min(1220px, calc(100% – 40px));
margin: 0 auto;
}

.site-header {
position: sticky;
top: 0;
z-index: 100;
backdrop-filter: blur(16px);
background: color-mix(in srgb, var(–bg) 74%, transparent);
border-bottom: 1px solid var(–line);
}

.nav-wrap {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 18px 0;
}

.brand-logo {
max-height: 60px;
width: auto;
}

.nav-links {
display: flex;
gap: 24px;
align-items: center;
color: var(–muted);
font-size: 15px;
}

.nav-links a:hover { color: var(–text); }

.header-actions {
display: flex;
align-items: center;
gap: 12px;
}

.btn,
.mode-toggle {
border: 1px solid var(–line);
background: var(–surface);
color: var(–text);
border-radius: 999px;
padding: 12px 18px;
font: inherit;
cursor: pointer;
transition: transform .2s ease, background .2s ease, border-color .2s ease;
box-shadow: var(–shadow);
}

.btn:hover,
.mode-toggle:hover { transform: translateY(-1px); }

.btn-primary {
border: none;
color: #fff;
background: var(–accent);
background-size: 180% 180%;
}

.hero {
padding: 70px 0 48px;
}

.hero-shell {
position: relative;
overflow: hidden;
border: 1px solid var(–line);
border-radius: 36px;
background: linear-gradient(180deg, color-mix(in srgb, var(–surface-strong) 84%, transparent), var(–surface));
box-shadow: var(–shadow-lg);
padding: 34px;
}

.hero-shell::before,
.hero-shell::after {
content: “”;
position: absolute;
border-radius: 50%;
filter: blur(10px);
pointer-events: none;
}

.hero-shell::before {
width: 360px;
height: 360px;
top: -120px;
left: -110px;
background: radial-gradient(circle, rgba(124,45,181,.16), transparent 65%);
}

.hero-shell::after {
width: 340px;
height: 340px;
right: -120px;
bottom: -120px;
background: radial-gradient(circle, rgba(25,179,79,.16), transparent 65%);
}

.hero-grid {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1fr 0.95fr;
gap: 40px;
align-items: center;
}

.eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-radius: 999px;
border: 1px solid var(–line);
background: var(–surface);
color: var(–muted);
font-size: 13px;
margin-bottom: 20px;
}

h1, h2, h3 {
margin: 0 0 16px;
line-height: 1.08;
letter-spacing: -0.03em;
}

h1 { font-size: clamp(40px, 5.5vw, 72px); }
h2 { font-size: clamp(30px, 4vw, 46px); }
h3 { font-size: 22px; }

.gradient-text {
background: var(–accent);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}

.hero-copy p,
.section-intro,
.lead {
color: var(–muted);
font-size: 18px;
max-width: 62ch;
}

.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 28px;
}

.hero-metrics {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
margin-top: 28px;
}

.metric {
padding: 18px;
border-radius: 20px;
background: var(–surface);
border: 1px solid var(–line);
box-shadow: var(–shadow);
}

.metric strong {
display: block;
font-size: 26px;
margin-bottom: 4px;
}

.hero-visual-wrap {
display: grid;
gap: 14px;
}

.hero-visual {
border-radius: var(–radius);
overflow: hidden;
border: 1px solid var(–line);
background: linear-gradient(180deg, var(–surface-strong), var(–surface-2));
box-shadow: var(–shadow-lg);
min-height: 500px;
}

.hero-visual img {
width: 100%;
height: 100%;
object-fit: cover;
min-height: 500px;
}

.visual-note {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}

.glass-card,
.card,
.business-card,
.journey-step,
.consult-card,
.form-card,
.testimonial,
.feature-panel {
background: var(–surface);
border: 1px solid var(–line);
border-radius: var(–radius);
box-shadow: var(–shadow);
backdrop-filter: blur(12px);
}

.glass-card {
padding: 18px;
color: var(–muted);
}

section { padding: 62px 0; }

.section-head {
display: flex;
justify-content: space-between;
gap: 24px;
align-items: end;
margin-bottom: 28px;
}

.cards,
.journey,
.business-grid,
.support-grid {
display: grid;
gap: 18px;
}

.cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.business-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.journey { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.support-grid { grid-template-columns: 1.2fr 0.8fr; align-items: start; }

.card,
.business-card,
.journey-step,
.feature-panel,
.consult-card,
.testimonial { padding: 26px; }

.step-number,
.journey-number,
.icon-badge {
width: 46px;
height: 46px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
color: #fff;
background: var(–accent);
margin-bottom: 14px;
flex: 0 0 auto;
}

.card p,
.journey-step p,
.business-card p,
.feature-panel p,
.consult-card p,
.testimonial p,
.footer-copy { color: var(–muted); margin: 0; }

.business-card ul,
.feature-panel ul,
.consult-list {
margin: 14px 0 0;
padding-left: 18px;
color: var(–muted);
}

.support-grid .feature-panel {
min-height: 100%;
}

.consult-grid {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: 20px;
align-items: stretch;
}

.consult-card {
background: linear-gradient(180deg, color-mix(in srgb, var(–surface-strong) 86%, transparent), var(–surface));
}

.form-card { padding: 24px; }

.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}

.field,
.field-full {
display: flex;
flex-direction: column;
gap: 8px;
}

.field-full { grid-column: 1 / -1; }

label {
font-size: 14px;
font-weight: 600;
}

input,
select,
textarea {
width: 100%;
border-radius: 14px;
border: 1px solid var(–line);
background: color-mix(in srgb, var(–bg) 75%, var(–surface-strong));
color: var(–text);
font: inherit;
padding: 14px 16px;
}

textarea {
min-height: 140px;
resize: vertical;
}

.small-note {
margin-top: 12px;
font-size: 13px;
color: var(–muted);
}

.site-footer {
padding: 30px 0 44px;
border-top: 1px solid var(–line);
}

.footer-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
}

@media (max-width: 1080px) {
.hero-grid,
.consult-grid,
.support-grid,
.cards,
.journey,
.business-grid { grid-template-columns: 1fr 1fr; }
.hero-metrics { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
.nav-wrap { flex-wrap: wrap; }
.nav-links {
width: 100%;
overflow-x: auto;
white-space: nowrap;
order: 3;
}
.hero,
section { padding: 42px 0; }
.hero-shell { padding: 20px; border-radius: 24px; }
.hero-grid,
.cards,
.journey,
.business-grid,
.support-grid,
.consult-grid,
.form-grid,
.visual-note { grid-template-columns: 1fr; }
.section-head { display: block; }
.hero-visual,
.hero-visual img { min-height: 300px; }
.brand-logo { max-height: 46px; }
}

Premium configuration journeys for product-led businesses

Turn static websites into interactive buying experiences.

Configularity helps businesses show design options clearly online, so customers can experiment with colours,
layouts, finishes, and features before they enquire or place an order.

Built for WordPress, designed for clarity, and focused on helping your visitors move from curiosity to confidence.

Claim your free 30 minute consultation
Explore the process

Visual choice
Show customers exactly what their preferred design could look like.

Better leads
Capture more qualified enquiries with stronger purchase intent.

Less friction
Reduce repetitive pre-sales questions with guided online journeys.

Use your own visual
Place your product animation, mockup, or feature image here.

Day/night mode ready
Your light and dark logos swap automatically with the toggle.

How Configularity works

A clear, high-value process from first idea to live experience

We turn complex product choices into a guided digital experience that feels simple, premium, and conversion-focused.

Audit your options

We identify the design choices, product combinations, and decision points your customers need to understand.

Structure the visuals

We organise your imagery, configuration rules, and product logic into something visitors can explore with confidence.

Build the journey

We create a polished website experience that leads users from inspiration to configuration to enquiry.

Launch and refine

Once live, we help improve the flow, strengthen conversion points, and keep the experience aligned with your offer.

Who we support

Best suited to businesses where visual choice matters

If your customers need to compare styles, finishes, layouts, upgrades, or combinations, Configularity can help.

Automotive and specialist vehicles

Ideal for camper conversions, leisure vehicles, transport adaptations, and brands with custom layouts or upgrade packs.

Exterior colour options
Interior materials and layout choices
Accessory packs and upgrades

Interiors, home and fitted products

Perfect for businesses selling configurable products where buyers want to see combinations before they commit.

Colours, fabrics, finishes and textures
Room-specific or layout-specific options
Premium product bundles

Custom product brands

For businesses that need to present multiple versions of the same offer without overwhelming the customer.

Personalised design combinations
Side-by-side option comparison
Quote-first enquiry journeys

What makes this different

We are not just adding visuals. We are shaping the decision journey.

The goal is not simply to make a page look better. It is to help your visitors understand options faster, picture their preferred outcome, and take the next step with less hesitation.

Premium presentation of design choices
Less confusion around options and upgrades
Stronger handoff into enquiry, consultation, or sales

Why businesses use Configularity

“We want our website to do more than describe our product. We want it to help customers imagine their own version of it.”

Customer journey

The four stages from discovery to action

This is the simple framework your customers move through when a configuration experience is working well.

Discover

They quickly understand what you offer, what can be customised, and whether your solution fits their needs.

Explore

They browse visuals, compare combinations, and interact with design options in a way that feels intuitive.

Configure

They narrow down their preferred choice and build a clearer picture of the product or package they want.

Convert

They request a consultation, share their details, or move into the next stage of your sales process.

Free 30 minute consultation

Invite businesses to start with a simple conversation.

Offer a no-pressure consultation to understand their website, product range, and where a configuration journey could create more value.

Review their current website and buying journey
Identify the best products or services to configure online
Discuss what content and visuals already exist
Recommend a practical next step

Name

Business name

Email address

Phone number

Website URL

Business type

Select your business type
Automotive and specialist vehicles
Interiors, home and fitted products
Custom product brand
Other

What would you like help with?

WordPress tip: replace this form with a WPForms, Gravity Forms, or Contact Form 7 shortcode for submission handling.

(function () {
var body = document.body;
var toggle = document.getElementById(‘modeToggle’);
var logo = document.getElementById(‘siteLogo’);
var storedMode = localStorage.getItem(‘configularity-mode’);

function applyMode(mode) {
var isDark = mode === ‘dark’;
body.classList.toggle(‘dark-mode’, isDark);
toggle.textContent = isDark ? ‘☀️ Day mode’ : ‘🌙 Night mode’;
if (logo) {
logo.src = isDark ? logo.getAttribute(‘data-dark-logo’) : logo.getAttribute(‘data-light-logo’);
}
}

applyMode(storedMode === ‘dark’ ? ‘dark’ : ‘light’);

toggle.addEventListener(‘click’, function () {
var nextMode = body.classList.contains(‘dark-mode’) ? ‘light’ : ‘dark’;
localStorage.setItem(‘configularity-mode’, nextMode);
applyMode(nextMode);
});

document.getElementById(‘year’).textContent = new Date().getFullYear();
})();