Design story

Designing GIO4X

A palette taken from the logo, a layout taken from one number, two typefaces and a single recurring shape. This page explains the system by being built from it.

or press G

1.618 : 1. Remove a square and the same rectangle remains.

One number

Here each point is turned from the last by the golden fraction of a circle, and no two ever line up. Move the pointer off centre and spokes appear at once. Spacing, type, layout and even timing on this site step by the same number.

Logo DNA

Four colours were already chosen.

The palette was not invented. It was sampled from the supplied logo, then each colour was tuned until it passed contrast on ivory and on graphite. One metal was added, and it is rationed.

Market Blue

Brand and information. The “4”.

--brand…

Teal

Secondary accent. The rosette mid-tone.

--teal…

Emerald

Positive and success. The “X”.

--emerald…

Platinum

Secondary information. The “GIO”.

--platinum…

Champagne

Prestige only: numerals, rare rules.

--prestige…

The stage: ivory to graphite

Ivory

The page

--bg…

Paper

Alternate chapters

--paper…

Surface

Objects: tools, forms

--surface…

Sunken

Wells and tracks

--sunken…

Ink 3

Captions, labels

--ink-3…

Ink 2

Body text

--ink-2…

Graphite

Headings, emphasis

--ink…

Meaning

Positive

With ▲ and a plus sign

--pos…

Negative

With ▼ and a minus sign

--neg…

Caution

Pre-open, attention

--warn…

Accent

Follows your chosen mood

--accent…

The values under each swatch are read from this page as you view it. Change the theme or the accent in Display & privacy and they change with it. No component on the site contains a colour of its own.

The φ system

One number decides the proportions.

φ is 1.618…, the ratio at which a whole relates to its larger part as the larger part relates to the smaller. Spacing, type, layout and even timing step by it, so nothing on a page is an arbitrary size.

61.8

The statement. A heading, an argument, the main object.

38.2

The aside. A figure, a note, a way onward.

The split applies from 1080 pixels up. Below that the two parts stack, statement first. It is reversed from section to section so the page does not lean.

Spacing: a Fibonacci scale

Each step is the sum of the two before it, and the ratio between neighbours settles on φ. There is no 4, no 10 and no 12 in the system; a class such as p-21 is exactly 21 pixels.

Time: six durations

100 msA press
160 msHover, colour
260 msA link’s rule, a menu
420 msTheme change
680 msContent arriving
1100 msA hero, once

Each duration is roughly φ times the one before. Motion is used to explain a change of state, never to decorate one.

Type: eleven sizes

12Proportion
14Proportion
16Proportion
18Proportion
21Proportion
26Proportion
34Proportion
43Proportion
55Proportion
70Proportion
89Proportion

From 21 upwards, neighbouring sizes differ by about 1.27, the square root of φ, so two steps up is one golden step.

Typography

Inter × TT Norms

Two typefaces with two jobs. One speaks for the brand; the other does the work.

TT Norms · display

Gentlemanly standards.

300: Light
400: Regular
500: Medium
700: Bold

Headings and brand moments only. Geometric, open and calm at large sizes, where its light weight can afford to be light.

Inter · interface

Everything functional: paragraphs, labels, forms, tables, the words on a button.

0123456789

Tabular figures: every numeral has the same width, so columns of numbers align and a changing value does not shiver.

Label ABCDEFGHIJKLM · abcdefghijklm · ▲ ▼ ◆ × φ

The signature

One blade, turned eight times.

The logo mark is a pinwheel of eight blades around a point. The rosette redraws that geometry from first principles: each blade is a pair of arcs whose radii relate by φ, rotated by 45°. It is never a substitute for the logo. It is how the brand stays present where the logo is not.

Outer: R
Edge: R ÷ φ
Core: R ÷ φ²

Eight
The full signature, in the logo gradient.
Eight, turning
Loading and thinking. One turn in thirteen seconds.
Seven
The 404. One blade is missing, like the page.
Five
Empty states: something is not here yet.
Three
A fragment, for the quietest corners.
Solid
Filled blades, for small sizes.

Light and dark

The same building at 10 AM and 10 PM.

Light is the flagship: a private-wealth office in the morning. Dark is not a second design. It is the same rooms after hours, with the same furniture in the same places.

Markets

Open

The same building.

Ivory becomes graphite, graphite becomes ivory, and every relationship between them holds.

Direction, up: positive
Direction, down: negative

PrimaryGhostReference data

10:00Warm ivory, graphite ink.

Markets

Open

The same building.

Ivory becomes graphite, graphite becomes ivory, and every relationship between them holds.

Direction, up: positive
Direction, down: negative

PrimaryGhostReference data

22:00Graphite ground, ivory ink.

Both panels above are the same markup. Only one attribute differs, and every colour follows from it. Backgrounds never respond to price direction in either theme.

Accessibility

A page that some people cannot use is not finished. These are the rules every page is built to.

Comfort settings

Keyboard first: Every control is reachable and operable without a pointer, with a visible focus ring. The command bar opens with Ctrl or ⌘ and K.
Contrast: Text meets WCAG AA in light, dark and every accent. A higher-contrast profile is one switch away.
Never colour alone: Direction carries an arrow and a sign. States carry a shape and a word. A table read in greyscale loses nothing.
Motion is optional: Reduced motion is honoured from the system setting and from the site’s own switch. Every page is finished with animation off.
Text that scales: Spacing and type are set in rem, so a larger text setting enlarges the whole composition in proportion.
Touch: Targets are at least 44 pixels on a phone, and mobile layouts are composed, not shrunk.
Structure: One heading per page at level one, landmarks, captions on tables, text equivalents for charts and canvases.
No autoplay: No sound or video starts by itself, anywhere.

Data honesty

Five words for what a number is.

No licensed live market-data feed is connected to this site, so nothing on it is labelled live. Every figure carries one of these labels instead, and the label is part of the design.

Data methodology

Reference data
An official figure published by a named body at a fixed time. Not a price you can trade at.
European Central Bank euro reference rates, with their fixing date.
Indicative
A trading condition GIO4X has published, such as a minimum spread. It varies with the market and the account.
“Spread from” on an instrument page.
Schedule
A timetable computed from your own clock. It says when a market is normally open, not that it is trading now.
The session strip and the world market clock.
Simulation
Arithmetic on figures you typed in. A worked example, not a forecast and not advice.
Every calculator in the Trader Toolkit.
Data unavailable
The data could not be loaded, or is not connected. The page says so rather than showing a zero or yesterday’s value.
The system status page.

Continue

Fetching the page

One blade, turned eight times.

Outer

Edge

R ÷ φ

Core

R ÷ φ²