Brand and UI system

The Fluxaro brand

Our logo, colours, fonts and interface parts, with files you can download. The same settings are used across the website through the design tokens in styles.css.

Logo

How the logo works

The mark is three bars that get shorter from top to bottom. Their square left edges line up to make an F, and the rounded right ends suggest movement. The bottom bar is the only one in colour.

Fluxaro

Main version, on light backgrounds

Fluxaro

Reversed, on dark backgrounds

Fluxaro

On Flux Blue

Mark and app icon

Drawn on a 96-unit grid. Each bar is 20 units high with a 6-unit gap, and they are 60, 44 and 28 units long. The rounded ends are exact half circles.

Clear space

Keep at least one bar height clear on every side of the logo.

Fluxaro

Minimum size

Logo 88px wide on screen (24mm in print). Mark alone 16px (5mm).

Fluxaro

Don't change the colours

Don't stretch it

Don't rotate it

Don't add effects

Products

Fluxaro and Docketry

Docketry's logo is a docket shape with a square left edge and a rounded right edge. The Fluxaro mark is built the same way, so the two look related. Each product keeps its own colour, and Fluxaro stays mostly black and white.

Fluxaro

Fluxaro, Flux Blue

Docketry.

Docketry, Docketry red

Palette

Colour

Most of each page is Paper and Ink. Use Flux Blue sparingly, for links, focus states and the logo. Green and amber are only used to show status.

#F4F3EE

Paper

Page background

#ECEBE4

Paper 2

Sunken surfaces

#FBFAF7

White

Cards and panels

#0E0F11

Ink

Text, primary buttons, dark sections

#5B5D65

Graphite

Secondary text. 5.9:1 contrast on Paper

#3A3FE4

Flux Blue

Our one accent colour, for links, focus states and the logo. 6.3:1 on Paper

#8B8FFF

Flux Glow

Accent on Ink

#177A48

Signal

Status only, for live or done

#9A6500

Amber

Status only, for waiting

Typography

Fonts

Geist for all text, Geist Mono for small labels and numbers, and Instrument Serif italic for a word or two in a heading. Never set a whole sentence in the serif. All three are free on Google Fonts.

We build software for UK businesses.

Geist, weights 400, 500 and 600

Instrument Serif, italic

Geist Mono, weights 400 and 500

Display XL

Geist 500, 44 to 102px, tracking -4.8%

Fluxaro

Display LG

Geist 500, 36 to 64px, tracking -4.2%

Section title

Display MD

Geist 500, 26 to 36px, tracking -3.5%

Card title

Lead

Geist 400, 17 to 20px, line height 1.55

The opening paragraph of a section.

Body

Geist 400, 15 to 16px, line height 1.6

Normal text for everything else.

Eyebrow

Geist Mono 500, 12px, capitals, tracking +6%

Section label

Components

Interface parts

Buttons have fully rounded ends to match the logo bars. Sections are separated with thin borders instead of heavy shadows, and the small bar from the logo is used as a bullet point.

Buttons

Labels and status

Live In pilotNewTypeScript

Section label

List item with a bar bullet

Form field

EmailInline link

Ink sections

Add the theme-ink class to a container and everything inside it switches to the dark colours, including text, borders, buttons and the logo. Use it for one section per page, plus the contact card.

Writing

How we write

Write it the way you'd explain it to a customer on the phone. Be specific and use British spelling. Don't use em dashes, slogans or buzzwords, and never make up numbers, client logos or testimonials.

Orders from Deliveroo, Uber Eats and your own website go into one kitchen queue.

Seamless omnichannel solutions that drive growth.

You get a fixed-price quote before we start.

Flexible, value-driven engagement models.

An AI assistant that answers customer questions and takes bookings.

AI-powered digital transformation.