Case study · B2B IT consultancy

ITSD

Leadership Redefined.

A consultancy with Big4 pedigree, delivery inside Greece's systemic banks, and no website. Nothing was verifiable. We built the proof.

Client
IT Servant Leaders LP
Our role
Brand, Design, Build, SEO
Scope
30+ pages, zero templates
Stack
WordPress · Elementor · vanilla JS
Scroll

ITSD existed everywhere except the internet.

The reputation was real. The delivery record inside two of Greece's systemic banks was real. The Big4 background was real. None of it was verifiable. In a market where the ticket is high and the sales cycle is long, a CIO who hears your name in a referral needs somewhere to land. There was nowhere to land.

The problem

Four problems. None of them
were design problems.

01
No point of verification

EY and PwC on the CVs. Delivery inside Alpha Bank, NBG and Eurobank. Invisible to anyone who went looking. Trust that only exists in a room does not scale.

02
A product you cannot see

Project management. Digital transformation. AI adoption. The same words as every global integrator and every freelance profile. The real differentiator, a named leadership philosophy, does not survive a bullet list.

03
A network that reads as a weakness

Nineteen independent senior professionals have to read as one company. Structured badly, a partner network says "they have no team" instead of "they scale to the job".

04
Four services cancelling each other out

Shown as a menu, a visitor picks one item and leaves. The commercial value of ITSD is that hiring, training and delivering are one continuous route. The site had to sell the route.

The insight

The answer was sitting
in the logo brief.

We asked what it should feel like. The answer came back: an inverted pyramid, something moving upward, gradient blue. That was not a styling note. That was the entire company. Servant leadership means the leader stands underneath and holds things up, not on top and gives orders. That is, literally, an inverted pyramid.

▼ ORDERS DOWN
LEAD
PMBA
DEVQAOPS
TEAMTEAMTEAMTEAM
▲ SUPPORT UP
Model: Command

One shape.
Said four times.

Once we had it, we stopped decorating and started repeating. The same geometric argument runs through the mark, the philosophy page, the direction of every gradient and the shape of the services section. Nobody notices it consciously. Everybody feels the coherence.

01
The mark

A layered symbol built on the inverted form, drawn from zero. There was no prior logo.

02
The gradient

#2563EB to #0EA5E9. Deep to bright, always travelling upward. Direction as meaning, not taste.

03
The philosophy page

The pyramid returns full size, animated, with flowing dots running base to tip. The argument, shown.

04
The services stepper

Four phases that climb rather than sit side by side. The menu became a staircase.

The structure

We sold the route,
not the menu.

Hire, Train, Deliver, Additional. Presented as four products they compete. Presented as four phases they compound. Open them.

Finding the person is the entry point, not the product. Permanent, contract, RPO and global placement, all feeding the same downstream capability. The hardest thing to prove here is depth, so we stopped claiming it and started mapping it.

PermanentContractRPOGlobal placement

Certification tracks and AI adoption programmes. Built around a role selector: pick who you are, then toggle what you want to become. The gap between the two bars is the pitch, and the visitor draws it themselves.

PMPCAPMPSMPRINCE2AI adoptionAI governance

The phase where a consultancy is judged. So instead of promises we showed objects: a tilted stack of the five artefacts a client actually receives, opening on hover. "What exactly do I get" answered with nouns.

Project ManagersBusiness AnalystsTech LeadsQAAI Transformation

The vaguest category in the model: legal, forensics, expert witness, creative. Things with no obvious relationship to each other. We gave them a centre of gravity instead of a list.

Legal for ITExpert witnessDigital forensicsDigital & Creative
Signature moves

Nothing here
is a screenshot.

Every component below is the real thing, rebuilt live inside this page. Same technique, same zero-library approach as the site itself. The aurora field behind the hero has been running since you landed. Touch things.

Servant leadership, made touchable

Thirteen principles nobody would read as a list. On the homepage they run as a snake that changes direction three times, so the eye follows a route. On /philosophy they become a sphere you rotate yourself, which is the philosophy performing itself.

13Principles
Principle 01
Listening

Receptive to what is said and what is left unsaid, before deciding anything.

Why it existsThis is the only asset no competitor has. Everyone claims expertise, nobody names their leadership model. The snake is not a list, it is a path that turns, which says the principles apply in sequence inside a project rather than hanging on a wall. The sphere goes one step further and hands control to the visitor, which is the argument itself.
Thirty answers instead of one claim

Recruitment is the service that sounds most like a commodity. So we stopped describing it and started indexing it. Six industries, five roles, one sticky panel. Pre-opened on Banking × Tech Lead, which is not a random default: banking is the client's strongest proof.

Project
Manager
Business
Analyst
Tech
Lead
QAAI
Transf.
Banking × Tech Lead
Tech Lead in Banking

Why it existsA matrix proves depth instead of asserting it. Thirty specific intersections are harder to dismiss than one paragraph about "senior IT talent", and the visitor does the convincing themselves by clicking the cell that matches their own problem.
A centre of gravity for the miscellaneous

Legal for IT, expert witness, forensics, creative. Four things with nothing in common except one thing: they all orbit the client's project. So we built a solar system, put the project in the middle, and let the unrelated stay unrelated. Hover to hold the orbits still.

Your
project
Why it exists"Additional services" is where most consultancy sites lose the plot, because the category has no internal logic. The metaphor supplies one: different objects, same centre of mass. At the bottom of the page a constellation draws itself, joining scattered points into a shape right before the call to action. The argument closes literally.
The one page allowed to break the rules

Digital & Creative is the only service where the deliverable is taste. Presenting it in the same corporate blue as everything else would refute it on sight. So the palette flips: pink and amber, flowing bands, sparkles, paint bursts on click. Press the button.

Brand. Build. Promote.

Currently in house style: deep navy, blue to cyan, enterprise composure. Correct for the other five services. Wrong for this one.

Why it existsThis is the only service Octopush itself sells through the client's site, so the section doubles as portfolio disguised as a service description. Six zigzag rows, each with its own live visual: glyphs flipping in 3D, a typing cursor, a Pinterest focus mode, a re-animating chart, server slots filling, a globe drawing connection lines. The palette change is not decoration, it is the argument.
The system

Built once,
stretched everywhere.

One typeface. Six colours that matter. One easing curve. The same language later survived six service pages, nineteen partner profiles, an Instagram carousel and a set of 85×200cm roll-up banners without a single exception being carved out.

Palette
Primary Blue#2563EB · CTAs, icons, gradient start
Accent Cyan#0EA5E9 · gradient end, AI content
Dark Navy#0F172A · primary text
Deep Navy#060D1A · every hero, every dark band
Light BG#F8FAFC · light sections
Text Muted#64748B · body, subtitles
Type · Plus Jakarta Sans
Display · 800 · clamp(2.4, 6vw, 4.4rem)
We Design Tomorrow
Section title · 800
Mind the gap
Body · 400 · line-height 1.7
One family carries the whole site. Self-hosted locally, no render blocking.
Eyebrow · 700 · 11px · 3px tracking
PHASE 01 · HIRE
Motion & grid
Primary easingcubic-bezier(.16,1,.3,1)
Micro / hover.3s
Standard.35s – .45s
Scroll reveal.5s
Stagger80ms
Idle pulse2.5s infinite
Container90% / 1400px max
Radius50px · 24px · 12px
Reveal triggerIO, once, -60px
Touch ruleno parallax ≤768px
The cutting room

What we killed,
and why.

The site did not arrive on the first attempt, and pretending otherwise would be the least useful thing a case study can do.

Particle network hero

The most tired cliché in tech web design. The aurora field costs the same to build and belongs to nobody else.

Greek hero copy

The first draft opened in Greek. The audience is enterprise and increasingly international. The whole site turned English.

Five concepts for /deliver

All five rejected in one pass. None had a breadcrumb, one broke the light-hero pattern, one introduced a monospace face that exists nowhere else on the site. Rebuilt from zero as the deliverables stack.

Philosophy as five radial pillars

It compressed thirteen principles into five, and a circle tells no story of progression. The pyramid it replaced was not thrown away, it came back as a full section with room to explain itself.

Logo manager with localStorage

A genuinely nice admin panel for reordering client logos. Also per-browser, so no visitor would ever see the changes. Deleted in favour of a hand-kept list.

Bottom CTA banner on every service page

Built, then removed. The footer already converts. Two calls to action stacked on top of each other is one call to action.

Three perfectly good navbars

Mega menu, compact dropdown, hybrid split. All correct, all predictable. We shipped a cinematic phase theatre instead, on its fourth theme.

Scope, honestly

The numbers we
can actually stand behind.

0
Pages designed
and built
0
Partner profiles,
each with its own OG card
0
Client logos in the
trusted-by carousel
0
Homepage sections,
all custom code
0
JavaScript frameworks
or animation libraries
0
Page-builder templates
or purchased blocks
0
Self-hosted fonts,
zero render blocking
0
Typeface carrying
the entire system

Read this before you read those

These are scope numbers, not performance numbers. The site is recent and we do not publish traffic, ranking or conversion figures we have not been given and cannot verify. When ITSD shares its analytics, this section will change and it will say so. An agency that invents a percentage to fill a gap will invent one about your project too.

Got something
nobody can see yet?

That is usually the interesting part. Bring us the thing that is hard to explain.