Website. First look

A site that starts with the business, not the technology.

Design direction and six home-page directions. Prepared for Andrés Carranza. Tuesday 3 November 2026.

01. Diagnosis

What we read, and what we found.

Thirty-one pages of brand guidelines. Fifteen pages and 5,664 words of first-pass copy. Forty-three FAQs. One strong idea running through all of it.

Keep

The idea is the asset.

"What is preventing this business from handling more?" Diagnose, Implement, Prove. The tagline. The avoid-list. These stay. Around them, plain words a busy owner reads in one pass.

Change

The pictures must carry the mood.

Glowing globes and network lines say "AI vendor". The site should say "people who enjoy their work, handling more". Bright rooms, polished people aged 35 to 55, real smiles, one idea per screen.

Add

A face, a story, a first offer.

A day-one firm cannot show case studies. It can show Andrés, one labelled illustrative walkthrough, a written diagnosis as the first deliverable, and a free 30-minute call as the only ask.

Fix

Fewer words, more weight.

Headlines of three to seven words. One sentence under each. Eight or nine screens, not fifteen pages. The detail moves to an Answers hub built for people first and answer engines second.

02. The system

One contract behind every direction.

Every direction shares the same copy, the same people rules and the same page grammar. What differs is the look. That is what makes the comparison honest.

Type

Inter Tight

Display and text in Inter Tight and Inter, the faces your wordmark already uses. One direction tries a serif so you can see the contrast. Self-hosted, no external requests.

Colour

Deep Navy Slate Steel Teal

Your four colours are the base for four of the six directions. Two directions step outside the palette on purpose, so the choice is made with eyes open.

Mark

Clarivus360 logo with tagline

Vectors extracted from the brandbook. Seven files for light, dark and photo use, plus favicons. The orbit becomes the site's diagram language.

Photography

Three colleagues laughing at a standing table Nurse smiling at a bright clinic station Advisor laughing with a couple across a desk

Bright, warm, people who enjoy their work. Everyone between 35 and 55, polished, smiling. Photos run full width and set the mood of every page.

03. Six directions

Six ways to tell the same story.

Each is a complete home page at desktop and phone width, built from the same words and the same people. Click any one to open it live.

Direction 1

Apple Light

The clearest page of the set. White and navy bands, one idea per screen, headlines of a few words, full-width photography. It reads the way an Apple product page reads: you understand it before you finish scrolling.

Hero: "More capacity. Same team."

Open direction 1
Apple Light at desktop width Apple Light at phone width

Direction 2

Apple Story

The same grammar, told as a story. As you scroll, one placement moves from accepted offer to first shift, today and after, while the picture changes beside it. The method appears while the story unfolds.

Hero: "Handle more. Without hiring more."

Open direction 2
Apple Story, pinned scene with beat three active Apple Story at phone width

Direction 3

Dark Cinematic

Deep navy to black, white type, teal as light. A moving hero of a bright team at work. Your brand at its most premium, built for a screen share and a boardroom.

Hero: "Built to handle more."

Open direction 3
Dark Cinematic hero with the video playing Dark Cinematic at phone width

Direction 4

Warm

A deliberate step outside the palette. Cream paper, deep ink, one coral accent, serif headlines, sunlit photography. Optimistic and human. Shown so the navy and teal can be chosen with eyes open.

Hero: "Room to grow."

Open direction 4
Warm at desktop width Warm at phone width

Direction 5

Bold Blocks

Full-width bands of teal, navy, white and one new lime accent. Oversized type. The most confident page of the set, built to be remembered after one visit.

Hero: "Stop chasing. Start growing."

Open direction 5
Bold Blocks at desktop width Bold Blocks at phone width

Direction 6

Editorial

The premium consultancy journal. Large quiet type, hairlines instead of boxes, numbered chapters, your own words in full. The most complete telling of the method, for the reader who wants the whole story.

Hero: "Remove Bottlenecks. Unlock Capacity."

Open direction 6
Editorial at desktop width Editorial at phone width

04. Hero copy

Three ways to open.

Your tagline stays in the logo and above the headline. The question is which plain line a staffing owner or an agency principal reads first.

A. Outcome

More capacity. Same team.

We find where work gets stuck in your business and fix it, so your team can take on more without burning out.

B. Promise

Handle more. Without hiring more.

We find the slow part, fix that workflow, and build the system that keeps it moving.

C. Problem

Fix what slows your business down.

Growth should not mean more chasing. We find where work gets stuck and clear it, one workflow at a time.

05. Next steps

What we need from you to start.

Scope, timeline and price follow in a separate one-pager.

Appendix. Explorations

Four more ideas we tested along the way.

Earlier studies from the same copy. Each holds a mechanism worth keeping: a lead generator, a self-check, a sticky story rail, a page that composes itself from what the visitor types.

StoryBrand study StoryBrand Donald Miller's wireframe with a packaged-services menu and a worksheet lead generator. Diagnostic study Diagnostic An eight-question Bottleneck Check and a capacity calculator, for the visitor not ready to call. Walkthrough study Walkthrough One placement from accepted offer to first shift on a sticky rail, today and redesigned. Capacity Room study The Capacity Room The visitor describes the work that slows them down and the page composes itself. The seed of the voice option.