Brand guidelines

Colour

Two backgrounds, three text colours, one primary per brand — and the three rules that keep them from being misapplied.

Only the primary colour differs between brands. Everything else here is identical across all four.

01 — Palette

The palette

Small on purpose. It was reduced from the internal design system, and the values that were cut were cut deliberately — do not re-add them.

Backgrounds

Two, and only two

The three-step elevation ladder and the 4% white overlay increments are component-level implementation detail, not brand rules.

Base

The page. Everything sits on this.

Raised

Cards, panels, anything lifted off the page.

Foreground

Three text colours, and a gradient

#F0EDEC is the default text colour in every case, headlines included, with no condition attached. The #D4CFCD step is cut — a three-level text hierarchy only earns its keep in dense product UI.

Pure white is scarce, not forbidden. The rule is one highest-priority element per view. On a screen with a primary CTA, that is the CTA. On a social or marketing graphic with a single headline and no button, the headline can take it — or the gradient.

The headline gradient is available to marketing and social for headline type. Apply it with background-clip: text; the full declaration is on the swatch.

Default

Headlines and most text. The standard text colour, unconditionally.

Muted

Body copy and secondary text.

PureScarce

The single highest-priority element in a view — a primary CTA, or a headline with nothing competing against it.

Headline gradient

White 100% to white 82%, at 173.4°. Available for headline type, including social and marketing artwork.

Primary

One per brand

The only value that differs between brands. Everything else on this page is shared.

Futures

Futures, and the umbrella brand, which has no primary of its own.

24/7

Tradeify 24/7

FX

Tradeify FX

02 — Rules

Three rules that get broken

Each of these is counterintuitive, and each is violated constantly unless it is impossible to miss.

Rule 01

Primary CTAs are always white

Never green, never red, never cyan. The primary is a brand colour, not a button colour.

It follows from the palette: pure white is the scarcest value in the system and is reserved for the highest-priority element on a screen. A primary CTA is that element. The brand primary is doing a different job — identifying the brand — and a button is not where that job gets done.

Start an evaluation

Correct

Pure white, #FFFFFF. The highest-priority element on the screen, using the scarcest value in the palette.

Start an evaluation

Incorrect

The brand primary as a button fill. Wrong in every brand — green, red or cyan, a primary is never a button colour.

Rule 02

The primary is an accent, not a surface

Large fills of the primary are wrong. It works as small marks, thin strokes, glows and single emphasised words.

A screen with a big green panel on it is not more on-brand than one with a green underline. It is less.

Funded accounts up to $150,000

Correct

One emphasised word. The colour carries because it is rare.

Funded accounts up to $150,000

Incorrect

A surface. The colour stops meaning anything.

Rule 03

#3E71FF is not in the palette

Documented only as a restriction. It may appear solely as decoration — blurred, at low opacity, or as an overlay glow behind a surface. Never a fill, button, border, icon or text colour.

It is written down rather than omitted because omission invites improvisation: someone finds it in an old file, sees no rule against it, and uses it as an accent.

Surface

Permitted

Blurred, low opacity, behind a surface. Decoration only.

Open account

Never

As a fill, button, border, icon or text colour.

03 — Treatment

The headline gradient

A treatment, not a colour. White at 100% falling to white at 82%, on an axis 6.6° off vertical.

Trade futures with real capital and keep up to 90% of the profit

One gradient across the whole block, not one per line. The text block is the gradient's extent, so the first line is brighter than the last — intended, and the reason it is applied to the element rather than to each line.

The dotted line is straight down (180deg). The solid line is the gradient's travel direction, 173.4deg — 6.6° off, with the bright end upper-left.

No accessibility contrast guidance is documented yet. The pairings above are brand rules, not verified ratios — muted text on raised surfaces in particular needs checking against WCAG before this page is complete.