Pivitt
Diagnostic
The work · Optima Sports and Capital

Where sport creates opportunity.

A website engineered to sort every enquiry.

A website for a Dubai business connecting athletes, brands, investors and rights holders across global sport. Five practice areas shown as one business, one model for delivering them, and an enquiry form that names its discipline before anyone replies. Designed and built by Pivitt, live now.

The Optima Sports and Capital home page: a stadium at night, the line Where Sport Creates Opportunity, and a call to start a conversation
The home page at 1440 wide, captured from the live build on 2 November 2026.
Pivitt / Work / Optima Sports and Capital

Optima Sports and Capital

Website · Sports partnerships and investment

A website, designed and built by Pivitt.

Optima Sports and Capital builds partnerships across global sport: sponsorship, talent representation, investment, consultancy and a grassroots programme for emerging athletes. Its website had to present five practice areas as one business, explain how a deal is delivered, and turn interest into a conversation with the right person. We treated it as an engineering problem: the business in one line, a page built in the order a buyer’s questions arrive, five disciplines carried from the first band to the enquiry form, and a build that arrives in a single request.

The Challenge

Five practices can read as five small firms.

Sponsorship, talent, investment, consultancy and grassroots each have their own buyers. Set side by side without a shared idea, they read as a list. The site had to show one business with one way of working, and let each buyer find their own door.

What Was At Stake

The first thing a partner checks.

In sport and investment, the website is where an introduction gets checked before a call is taken. It had to read as credible to rights holders, governing bodies and investors from the first screen.

The Brief

Live, on Optima’s own account.

Designed and built by Pivitt, published on hosting in Optima’s own name, with enquiries captured by the host from the first day.

5
Disciplines, named at five points down the page.
4
Stages in the delivery model, with sustain as a stage of its own.
10
Sections, in the order a buyer’s questions arrive.
1
Request loads the whole site: page, fonts and photographs.

Measured on the live site on 2 November 2026: section heights at 1440 by 900, type and colour from its stylesheet in the browser, transfer from the network panel.

The Site, As a Visitor Sees It

Scroll the live page.

The whole Optima Sports and Capital page at 1440 wide, from the stadium hero to the footer, captured as a visitor scrolls it
The whole page at 1440 wide, captured from the live build as a visitor scrolls it. Scroll inside the frame.
The hero on a phone, 390 wide
The hero, 390 wide.
The disciplines on a phone, one card in view
The disciplines, one card in view.
The model on a phone, one stage at a time
The model, one stage at a time.
01
Chapter 01

Engineering the proposition

The business in one line, before anything else is asked of the reader.

The One Line

The whole business, in the first screen.

The hero carries the proposition and nothing else: where sport creates opportunity. The line names the outcome every Optima buyer wants, whether they hold rights, capital or talent. Four pillars beneath it carry the proof: precision, networks, execution and long-term value.

The hero line, Where Sport Creates Opportunity, as set on the live site, with the four pillars beneath it: Strategic Precision, Trusted Networks, Execution First and Long-Term Value.Open full size
The hero line as set on the live site, and the four pillars beneath it.
02
Chapter 02

Engineering the architecture

Built in the order a buyer’s questions arrive.

The Page as an Argument

Ten sections, one argument.

Each section answers the question the last one raises. What does Optima do? How is a deal delivered? Where does talent come from? How do I start? Measured at 1440 by 900, the page runs 6,013 px from the proposition to the footer.

The full page as a visitor scrolls it, beside its ten sections in order with their measured heights at 1440 by 900.Open full size
The page as a visitor scrolls it, with each section’s measured height.

The Commercial Spine

Five disciplines, carried down the page.

Each discipline is named in the opening band, given its own card, listed in the enquiry form and repeated in the footer; grassroots also has its own section. Whichever door a buyer comes through, the same five names lead to the same form.

Five disciplines traced through five points on the page: the discipline band, the service cards, the grassroots section, the enquiry form and the footer.Open full size
Each discipline at each point on the page where it appears, with that point’s measured position.

The Model

One way of delivering all five.

The approach section sets out four stages for every discipline: identify, structure, execute, sustain. Sustain is a stage in its own right, because deals fail after signing. Grassroots runs its own four-step pathway for the athlete, from discovery to development.

Five disciplines feeding one four-stage model, Identify, Structure, Execute and Sustain, with grassroots also feeding a four-step pathway: Discovery, Assessment, Connection, Development.Open full size
The commercial model and the grassroots pathway, as the site sets them out.
03
Chapter 03

Engineering the experience

Tone and timing, set by the page’s own code.

The Tone

Light to read, dark to deliver.

As the page turns from what Optima does to how it delivers, a layer tied to the scroll darkens the whole screen, and lifts again for the enquiry. Plotted from the site’s own script at 1440 by 900, the page is fully dark from 2,975 to 4,275 px of scroll: the approach and the grassroots pathway.

The opacity of the dark layer against scroll position: zero through about and services, rising to full from 2,975 to 4,275 px through approach and grassroots, then falling to zero for the contact section.Open full size
The dark layer’s opacity at every 25 px of scroll, from the site’s script.

The Opening

The first four seconds, in order.

The opening is timed in the stylesheet so the message lands in sequence: the name loads first, five vertical rules draw in, then the location, the headline line by line, the description and the call to action, all between 2.6 and 4.1 seconds.

A timeline of the opening from 0 to 4.5 seconds: loader name, rule and fill, five vertical rules, the loader lifting, then location label, headline lines one and two, description, call to action and scroll cue.Open full size
Start times and durations from the live stylesheet.
04
Chapter 04

The design, part by part

Each section lifted out at 1440 and 390, and every component in its states.

Sections, Lifted Out

The hero, lifted out.

Every section captured from the live build at real size, at 1440 and at 390, read band by band as a visitor scrolls it. Dimensions sit above each capture; the numbers point to the type described beside it.

The hero section of the Optima site at 1440 wide, captured from the live build1234
The hero section at 390 wide
1234
390 wide
  1. 1
    Location labelPlus Jakarta Sans 11 px at 1440 · 10 px on a phonewhite over the photograph
  2. 2
    HeadlineInstrument Serif 120 px at 1440 · 30 px on a phonewhite over the photograph
  3. 3
    DescriptionPlus Jakarta Sans 14.4 px at 1440 · 14 px on a phonewhite over the photograph
  4. 4
    Call to actionPlus Jakarta Sans 12 px at 1440 · 11 px on a phonewhite over the photograph
The hero as it lands, 1440 and 390 wide. Margins 72 px at 1440 and 20 px on a phone.

About and the pillars, measured.

The about section of the Optima site at 1440 wide, captured from the live build12345
The about section at 390 wide
12345
390 wide
  1. 1
    EyebrowPlus Jakarta Sans 11 px at 1440 · 10 px on a phonesignal red on paper, 4.5 : 1
  2. 2
    HeadingInstrument Serif 64 px at 1440 · 24 px on a phoneink on paper, 19.6 : 1
  3. 3
    Body copyPlus Jakarta Sans 14.4 px at 1440 · 14 px on a phonebody grey on paper, 9.1 : 1
  4. 4
    FigureInstrument Serif 36 px at 1440 · 24 px on a phoneink on paper, 19.6 : 1
  5. 5
    Pillar titlePlus Jakarta Sans 14 px at 1440 · 14 px on a phoneink on paper, 19.6 : 1
Two columns of 612 px with a 72 px gutter at 1440; one column of 350 px at 390.

The five disciplines, as cards.

The services section of the Optima site at 1440 wide, captured from the live build12345
The services section at 390 wide
12345
390 wide
  1. 1
    HeadingInstrument Serif 64 px at 1440 · 24 px on a phoneink on white, 21.0 : 1
  2. 2
    IntroPlus Jakarta Sans 14.4 px at 1440 · 14 px on a phonebody grey on white, 9.7 : 1
  3. 3
    Card titleInstrument Serif 23 px at 1440 · 20 px on a phoneink on paper, 19.6 : 1
  4. 4
    Card copyPlus Jakarta Sans 12 px at 1440 · 12 px on a phonebody grey on paper, 9.1 : 1
  5. 5
    TagPlus Jakarta Sans 9 px at 1440 · 9 px on a phonefaint grey on paper
Cards 360 px wide, 14 px apart, at 1440; one card in view at 390.

The four stages, on the dark page.

The approach section of the Optima site at 1440 wide, captured from the live build1234
The approach section at 390 wide
1234
390 wide
  1. 1
    HeadingInstrument Serif 64 px at 1440 · 24 px on a phonewhite on ink, 21.0 : 1
  2. 2
    Stage labelPlus Jakarta Sans 11 px at 1440 · 11 px on a phonesignal red on ink
  3. 3
    Stage titleInstrument Serif 25.9 px at 1440 · 18 px on a phonewhite on ink, 21.0 : 1
  4. 4
    Stage copyPlus Jakarta Sans 13 px at 1440 · 12 px on a phonewhite at 45% on ink
Four columns of 323 px, 1 px apart, at 1440; one at 390. The page is dark here.

The grassroots pathway, measured.

The grassroots section of the Optima site at 1440 wide, captured from the live build1234
The grassroots section at 390 wide
1234
390 wide
  1. 1
    HeadingInstrument Serif 64 px at 1440 · 24 px on a phonewhite on ink, 21.0 : 1
  2. 2
    Body copyPlus Jakarta Sans 14.4 px at 1440 · 14 px on a phonewhite at 50% on ink, 5.3 : 1
  3. 3
    Card titleInstrument Serif 18 px at 1440 · 16 px on a phonewhite on ink, 21.0 : 1
  4. 4
    Card copyPlus Jakarta Sans 12 px at 1440 · 12 px on a phonewhite at 40% on ink
The pathway two by two at 1440, one column at 390.

The enquiry block, measured.

The contact section of the Optima site at 1440 wide, captured from the live build12345
The contact section at 390 wide
12345
390 wide
  1. 1
    HeadingInstrument Serif 64 px at 1440 · 24 px on a phoneink on paper, 19.6 : 1
  2. 2
    Field labelPlus Jakarta Sans 11 px at 1440 · 10 px on a phonefaint grey on paper
  3. 3
    SubmitPlus Jakarta Sans 12 px at 1440 · 12 px on a phonewhite on signal red, 4.8 : 1
  4. 4
    Detail labelPlus Jakarta Sans 11 px at 1440 · 11 px on a phonesignal red on paper, 4.5 : 1
  5. 5
    Detail textPlus Jakarta Sans 14 px at 1440 · 14 px on a phonebody grey on paper, 9.1 : 1
The form and the details at 1.1 to 1, with a 72 px gutter, at 1440; stacked at 390.

The footer, measured.

UI Parts, Isolated

The navigation, in every state.

Each component pulled out the way a design system documents it, from the site’s real markup and stylesheet, shown at its true size in every state the site defines.

Over the hero
Over the hero
Scrolled, on paper
Scrolled, on paper
Link on hover
Link on hover
On the dark page
On the dark page
  • 712 × 56 px pill, radius 100, 16 px from the top
  • White glass at 65%, blur 24 px; on the dark page, near black at 55%
  • Links Plus Jakarta Sans 10 px, tracking 0.1 em; hover fills black at 4%
Phone bar
Phone bar
Phone menu, open
Phone menu, open
  • Phone bar 366 × 50 px, 12 px from each edge
  • Menu links Instrument Serif 24 px, rows 70 px tall
  • Close button 44 px, round

Three buttons, every state the site has.

Hero call to action
Hero call to action
Hover
Hover
Keyboard focus
Keyboard focus
Submit
Submit
Hover
Hover
Keyboard focus
Keyboard focus
Contact pill
Contact pill
Hover
Hover
  • Call to action 272 × 50 px · Plus Jakarta Sans 12 px, tracking 0.14 em
  • Hover: a red fill wipes in from the left in 0.5 s
  • Submit: white on signal red, 4.8 : 1; hover deep red, 6.5 : 1
  • Focus: the browser’s own ring; the site sets none

The discipline card, at rest and on hover.

At rest
At rest
Hover
Hover
  • 360 × 434 px · photograph 160 px tall · border 1 px
  • Title Instrument Serif 23 px · copy 12 px, body grey on paper 9.1 : 1
  • Hover: border to signal red, lifts 4 px, tags turn red

The stage tile and the grassroots card.

Stage tile
Stage tile
Hover
Hover
Grassroots card
Grassroots card
Hover
Hover
  • Stage 323 × 307 px, padding 36 · title Instrument Serif 26 px
  • Grassroots card 306 × 152 px, padding 28
  • Hover: ground to near black; a red rule draws under the stage

The pillar row and the form fields.

Pillar
Pillar
Pillar, hover
Pillar, hover
Field, empty
Field, empty
Field, focused
Field, focused
Field, filled
Field, filled
Select
Select
Select, chosen
Select, chosen
  • Pillar row 612 × 81 px; hover insets 8 px and turns its rule red
  • Field 641 px wide, underline 1 px; text 14 px, 16 px on a phone
  • Focus: the label floats to 9 px in signal red

The Type

Two faces, one scale.

Instrument Serif carries the argument and Plus Jakarta Sans the detail. Headlines scale with the screen, from 30 px on a phone to 120 px at 1440, while body copy holds between 14 and 16 px. Every size here was measured in the browser at seven widths.

Type sizes measured at seven widths from 360 to 1920 for the hero headline, section heading, step heading, body copy and label, with the three breakpoints marked.Open full size
Sizes measured in the browser at 360, 390, 768, 1024, 1280, 1440 and 1920.

The Grid

Three breakpoints, and one for the hand.

At 400, 768 and 1024 px the page rebuilds: the four approach steps run as four columns, then two, then one; the service cards go from three and a half in view to one. The custom cursor and the hero parallax only run where there is a mouse.

The page measured at 390, 768, 1024 and 1440: approach columns 1, 1, 2, 4; about columns 1, 1, 1, 2; service cards in view 0.98, 1.13, 2.87, 3.47; section margin 20, 20, 51.2, 72 px; hero headline 30, 36, 72, 120 px.Open full size
The same page at four widths, measured in the browser.

The Palette

Paper, ink and one signal red.

Seven colours, held as tokens in the stylesheet. Body copy on paper measures 9.1 : 1, past the WCAG AAA line of 7 : 1; the signal red is kept for labels, rules and the call to action.

Seven colour tokens by lightness, and contrast pairs: ink on paper 19.6 to 1, body on paper 9.1 to 1, red on paper 4.5 to 1, white on red 4.8 to 1, body on the dark page 5.3 to 1.Open full size
The site’s seven colour tokens, with the contrast of the pairs that carry text.
05
Chapter 05

Engineering the build

One request, and an enquiry that arrives sorted.

The Build

One file, one request.

The page, its seven font faces and its photographs are delivered as a single document: one request, 861 KB transferred, no third-party scripts. The fonts arrive with the page, so the type never swaps after it appears. Measured on the live site on 2 November 2026.

The single document of 1,184,632 bytes by what it carries: photographs 83.7 per cent, fonts 11.8, styles 2.5, markup 1.3, script 0.8; one request, 861 KB transferred, seven font faces, no third-party scripts.Open full size
The delivered file, by what it carries.

The Enquiry

Every enquiry arrives sorted.

Three fields are required, and one of them is the area of interest: the same five disciplines, plus other. Each enquiry names who should take it before anyone replies. A hidden field turns away bots, and the form submits without leaving the page.

The enquiry form’s five fields, three required, with the area of interest branching to Sponsorship, Talent Representation, Investment, Consultancy, Grassroots Programme and Other, and on to one enquiry named by discipline.Open full size
The form’s fields and the six areas of interest it offers.

The Spec

The engineered site, specified.

Every decision on the site can be written down and traced to what the business needs. That is the difference between a website that is engineered and one that is decorated.

The engineered site, specified: proposition, pillars, architecture, spine, model, tone, type, grid, palette and build, each with its measure.Open full size
The engineered site, in ten parts.

What It Proves

A website is engineered, not decorated.

  1. 01One line first

    State the whole business in the first screen, and let everything below it carry the proof.

  2. 02One spine

    Carry the same five names from the first band to the form, so every door leads to the same place.

  3. 03Order is the argument

    Build the page in the order a buyer’s questions arrive.

  4. 04Built to a measure

    Set size, colour, timing and weight as numbers, and check them at every width.

Next caseDentistry.ie →
Where it starts

Where does your brand sit against the business?

Every engagement starts with the Brand Alignment Diagnostic, a fixed first step that scores your brand against the business and shows what to fix first.

Brand Alignment Diagnostic, £1,500More work