← Back to site

Design System

Component inventory and brand reference

Brand guide →

Colors

All tokens defined in src/styles/theme.css under @theme static. Use the Tailwind class — never hard-code hex values in components.

brand-navybg-brand-navy · text-brand-navy#1C2E3DHeadings, primary buttons, footer bg, dark sections
brand-slatebg-brand-slate · text-brand-slate#4A5E6DBody text in descriptions, nav links, intro paragraphs
brand-sagebg-brand-sage · text-brand-sage#5E7C6AAccent — nav CTA, hover states, kicker labels, step numbers, hero photo border
brand-creambg-brand-cream · text-brand-cream#F9F7F4Page background — Hero, WhatIDo, About, CaseStudies sections
brand-surfacebg-brand-surface · text-brand-surface#EEF0ECSoft sage surface — Testimonials bg, pre-footer CTA band, hero photo wrapper
brand-inkbg-brand-ink · text-brand-ink#1C1C1CDefault body text (set on <body>)
brand-mutedbg-brand-muted · text-brand-muted#6B7480Subdued text — hero subline, stat labels, step detail, captions

Typography

Heading font: Outfit Variable — weights 600–700. Body font: Jost Variable — weights 400–500. Both self-hosted via @fontsource-variable.

h1 · Hero headline · clamp(2.2rem, 5vw, 4rem) · weight 600 · ls -0.03em

For founders who need more than advice

h2 · Section heading · clamp(2rem, 4vw, 3rem) · weight 600 · ls -0.025em

How I work

h3 · Card / step title · clamp(1.15rem, 2vw, 1.35rem) · weight 600 · ls -0.02em

Diagnose

h4 · Sub-heading · 1.1rem · weight 600

Strategy

Body · Section intro · clamp(1.05rem, 1.7vw, 1.2rem) · Jost · color: brand-slate · lh 1.7

I work with founders who have built a successful business around their own expertise. Service and digital businesses of 5 to 50 people, generating revenue and ready for the next stage of growth.

Body · Standard paragraph · clamp(0.95rem, 1.5vw, 1.05rem) · Jost · color: brand-slate · lh 1.75

He holds a PhD in Electronic Engineering from Queen Mary University of London. His background spans AI research, commercial operations and hands-on business building.

Body · Card description · clamp(0.875rem, 1.3vw, 0.975rem) · Jost · color: brand-slate · lh 1.7

Too many priorities pulling in different directions. I work with founders to identify the real constraint and build a plan the business can execute.

Kicker / label · 0.75rem · Jost · uppercase · ls 0.2em · color: brand-sage

Services

Stat number · clamp(2.8rem, 6vw, 5rem) · Outfit · weight 700 · ls -0.04em · color: brand-navy

£1M+

Step number (display) · clamp(3rem, 5vw, 5rem) · Outfit · weight 700 · ls -0.04em · color: brand-sage · opacity 0.5

1

Button · 0.9–0.95rem · Jost · weight 500 · ls 0.02em

Atoms

No standalone atom components yet. Buttons, cards, and kickers are currently styled within their parent section components. When atoms are extracted to their own files in src/components/, add them here.

Sections

Every reusable section component from src/components/. Rendered as-is — scroll to inspect each one. The label bar above each component shows its name and file path.

Navsrc/components/Nav.astroSticky site navigation. Transparent on load, adds shadow on scroll. Nav links hidden on mobile.
Herosrc/components/Hero.astroTwo-column layout. Photo left (eager-loaded), content right. Mobile: stacked, photo above. Sage left-border on photo container.
Riccardo Mazzon

You've built the business. Now you need to scale it.

I'm a strategic advisor to founder-led businesses of 5 to 50 people. I find what is blocking the next stage and fix it, working directly with you until the problem is solved.

Book a discovery callSee how I work
Problemsrc/components/Problem.astroNavy background. Full-width centered text. Visual contrast after the hero — the only dark section on the page.

Building the business was the hard part. Growing it turns out to be harder.

Decisions are slower, costs are rising, and the real constraint is rarely where it looks from the inside.

That is where finding the real constraint and fixing it changes everything.

Statssrc/components/Stats.astroWhite background. 3 stat items (2-col mobile → 3-col desktop). Large Outfit number, Jost label, subdued detail text.

13+

Years in AI, tech and business operations

From PhD research to commercial leadership across multiple sectors.

£1M+

Revenue scaled from zero across founder-led businesses

Working directly with founders from idea to sustainable growth.

15+

Companies, startups and teams worked with

Across the UK and wider European markets.

WhatIDosrc/components/WhatIDo.astroCream background. Header row: text + speaking photo. Card grid: 1→2→4 col. White cards with sage hover border. ICP is 5–50 people.

Services

What I do

I'm a strategic advisor and work with founders who have built a successful business around their own expertise. Service and digital businesses of 5 to 50 people, generating revenue and ready for the next stage of growth.

At this point, the constraint is rarely commercial. It is the decisions, systems, and team structures that have not kept up. Scaling problems are never in one area. I work across all of them.

Riccardo Mazzon speaking at an event

Direction

Too many priorities pulling in different directions. I work with founders to identify the real constraint and build a plan the business can execute.

Scalability

If the business depends entirely on you, it cannot scale. I find where coordination and processes break down and build what lets you step back.

AI & Automation

Reduce costs and unlock time by using automation, AI, and your existing tools properly. I find the gaps and implement what will actually move the needle.

Team Clarity

Unclear roles and loose accountability slow everything down. I define responsibilities and build the performance structures a scaling team needs.

Methodsrc/components/Method.astroWhite background. 3 steps in cream cards (1→3 col). Large sage step numbers at 50% opacity. Two-column closing row with CTA button.

How I work

Three steps. Every engagement follows the same process, adapted to what the business actually needs.

Diagnose

Find the real constraint, not the stated problem.

Most founders come with a stated problem. I go one layer deeper to find what is actually causing it.

Define

Agree on what success looks like and build a clear plan.

Before touching anything, I work with you to agree on the outcome, then build a tailored plan. Not a template.

Deploy

Implement the plan and build what the business needs to sustain it.

The work is hands-on. The engagement ends with the business running independently of me.

The format is consistent: a mix of calls and work I deliver directly, mostly remote with on-site visits when needed. You work with me throughout, not a team. I stay until the problem is solved.

Book a discovery call
CaseStudiessrc/components/CaseStudies.astroCream background. 3 sage-green cards (1→2→3 col). Each card links to a case study page. Has content-visibility: auto.

Results

A high-tech company

A crisis, a pivot, and from zero to £700k in three years

A product that needed rebuilding and a cash crisis that nearly ended everything. Three years later: £700k in turnover.

Read the full story →

A fast-growing coaching business

20 coaches, 800 clients, no spreadsheets

A fast-growing coaching business with no systems to match its ambition. Manual tracking, commission disputes, a CRM that could not keep up. Three years later: a purpose-built platform, 20+ coaches, and operations that run without the founder in every problem.

Read the full story →

A performing arts school

From COVID closure to £250k in annual revenue

350 students, then COVID. Premises debt, no income, no channel. The school rebuilt online: YouTube, content, a full financial overhaul and reached £250k in revenue.

Read the full story →
Testimonialssrc/components/Testimonials.astroSurface background (#EEF0EC). 3 white cards (1→3 col). Circular photo avatars. Quote + extra line in sage green. Has content-visibility: auto.

What founders say

He guided us through a full company pivot and the operational rebuild that followed. Without that work, the growth would not have happened.

He does not just advise. He stays until the problem is solved.

Samuel V.
Samuel V.Founder, high-tech company

When the business needed restructuring after COVID, Riccardo was the one who made it possible. He saw what needed to change before I did, and helped me build something that could actually last.

The pivot saved the business. But it was Riccardo who made the pivot possible.

Giovanna M.
Giovanna M.Founder, performing arts school

Riccardo's genius is his ability to deconstruct strategic chaos into a clear, logical path forward. He provides a more powerful operating system for how you think. For any founder turning a complex vision into reality, his guidance is an essential competitive advantage.

I came in with three strategic directions pulling me in different ways. After one session with Riccardo, I had one.

Aboutsrc/components/About.astroCream background. Two-column: text left, portrait photo right (3:4 aspect, heavy navy shadow). Responsive: stacked on mobile.

About Riccardo

Riccardo Mazzon works with founders who have built a successful business around their own expertise and are ready for the next stage of growth. He works across strategy, operations and AI to find what is blocking growth and fix it. Not as an outside adviser, but as someone who stays until the problem is solved.

He has helped scale a high-tech software company from zero to £700k, rebuilt a performing arts school to £250k in annual revenue, and managed coaching operations for 800+ clients across 20+ coaches.

He holds a PhD in Electronic Engineering from Queen Mary University of London. His background spans AI research, commercial operations and hands-on business building.

Riccardo is based in London and works with clients across Europe. He works with a small number of clients at any one time, enough to give each one the attention the work requires.

Riccardo Mazzon
Footersrc/components/Footer.astroTwo parts: pre-footer CTA band (surface bg) + footer (navy bg, 3-col: contact left, nav center, CTA right). Copyright bar at bottom.