Brand and design system

The Futureproof wordmark, icon, colours, type and components, with the rules for using them. Everything shown here is built from the site's own stylesheet.

Logo and icon

The brand is Futureproof; futureproof.dev is its address. The wordmark reads futureproof. in constructed lowercase letters, and its full stop is the domain's dot: the brand's signature, always ultramarine.

PrimaryInk letters and ultramarine dot on white or light surfaces. futureproof-logo.svg

ReverseWhite letters and ultramarine dot on ink. futureproof-logo-reverse.svg

One colourWhere colour is unavailable: engraving, fax, single-colour print. futureproof-logo-mono.svg

Domain lockupWhere the address matters: social cards, slides, print, product sites linking back. futureproof-dev-logo.svg

Domain lockup, reverseThe domain lockup on ink. futureproof-dev-logo-reverse.svg

64px

32px

24px

16px

IconThe f.: white f and ultramarine dot on an ink tile. favicon.svg, icon-512.png, icon-180.png

Clear space

Keep clear space of one x-height (the height of the o, 9.3% of the wordmark's width) on every side, measured from the artwork's box.

Minimum sizes, shown actual sizeWordmark 120px, domain lockup 160px, icon 24px.

Artwork	Screen	Print	Why
Wordmark futureproof.	120px wide	30mm wide	Below this the dot drops under 3.5px and stops reading as a signature.
Domain lockup futureproof.dev	160px wide	40mm wide	The longer lockup needs more width for the same letter size.
Icon f.	16px as a favicon; 24px anywhere else	8mm	The 16px favicon is tuned for browser tabs; in interfaces give it room.

When to use the domain lockup

Use futureproof. everywhere by default, including the site header. Use futureproof.dev only where the address itself matters: the social card, slides, print, and product sites that link back to the umbrella. Leaving .dev out of the everyday logo stops the consumer products looking like developer tools. In running text, write Futureproof; page titles and structured data say Futureproof.dev.

Do

Use the supplied SVGs, generated by npm run build:brand.
Put the primary logo on white or cloud and the reverse logo on ink.
Keep the dot ultramarine in both, and ink in the one-colour version.
Keep the icon tile ink, with rounded corners except where the platform rounds them (the 180px iOS icon is square).

Don't

Put a white f on a blue tile. It reads as Facebook.
Set the wordmark in a font, recolour the letters, or capitalise it.
Place the logo on ultramarine, on a product colour or over a photograph.
Stretch, outline, shadow or animate the logo, or edit the generated SVGs by hand.
Pair the logo with a mascot or a product's mark as one lockup.

Colour

Ink and ultramarine on white. Ultramarine is the only accent. It marks things you can act on and the brand dot, so use it sparingly.

Ink#0A0E27--color-inkText, wordmark, the homepage header and hero, the icon tile.

Ultramarine#3843FF--color-ultramarineThe dot, links, primary buttons, focus rings and the rising dot.

Deep ultramarine#2A34E0--color-ultramarine-deepHover state of ultramarine controls.

White#FFFFFF--color-whitePage background; text on ink and ultramarine.

Cloud#F4F5F9--color-cloudSecondary surfaces, callouts and the footer.

Tint#ECEEFF--color-tintInline code and quiet highlights.

Slate#4B5068--color-slateSecondary text on white and cloud.

Mist#AEB3CC--color-mistSecondary text on ink. Never on white.

Supporting neutrals

Line#E4E6EE--color-lineRow and section dividers.

Line strong#C5C9D8--color-line-2Ghost button borders, link underlines.

Faint#5F6480--color-faintLegal line and metadata.

Contrast

Text needs 4.5:1. Every text pairing below passes. Ultramarine on ink is only 3.1:1, so on ink it carries the dot, the rising dot and other large shapes, never text or links. Links on ink are white.

Pairing	Ratio	Use
Ink on white	19.0:1	Headings and body text.
Slate on white	7.9:1	Secondary text.
Slate on cloud	7.3:1	Secondary text on callouts and the footer.
Faint on white	5.8:1	Fine print only.
Ultramarine on white	6.1:1	Links and accent text.
Ultramarine on cloud	5.6:1	Links on quiet surfaces.
White on ultramarine	6.1:1	Primary button label.
White on deep ultramarine	7.9:1	Primary button label on hover.
White on ink	19.0:1	Text on ink.
Mist on ink	9.2:1	Secondary text on ink.
Ultramarine on ink	3.1:1	Never text. The dot, the rising dot and the 3px focus ring only.

Type

Manrope for headings, Source Sans 3 for everything else, JetBrains Mono for code. All three are self-hosted. Display sizes scale with the viewport. Headings tighten their tracking as they grow.

--type-display-l35–58px · Manrope 600
Brochure headline

Follow your teams.

--type-display-m32–48px · Manrope 600
Page title

Which product can we help with?

--type-display-s28–42px · Manrope 500
Homepage tagline

Software for work and everyday life.

--type-title24px · Manrope 600
Catalogue product names, callout and section headings

AI development consulting

--type-lead20px · Manrope 600 or Source Sans 3
Feature headings, brochure summary, page introductions

A local archive of your AI sessions.

--type-base18px · Source Sans 3 400
Body text

Upcoming games, results and reminders for the teams and competitions you follow.

--type-body16.8px · Source Sans 3 400
Long-form prose and brochure features

Open a game for its summary, standings and available stats.

--type-ui16px · Source Sans 3 400–600
Navigation, buttons, footer

Products Consulting About Support

--type-meta14.4px · Source Sans 3 400–600
Category, status, diagram captions

Sport / iPhone

--type-caption12.8px · Source Sans 3 400
Legal line, figure captions

Space, radius and elevation

Spacing steps on a 4px base. Page content sits within a 74rem column with a responsive gutter. Long text keeps to a 44rem measure.

--space-14px

--space-28px

--space-312px

--space-416px

--space-524px

--space-632px

--space-740px

--space-848px

--space-964px

--space-1096px

Radius

Radius follows the object's role, not a single house value. Controls are barely rounded, surfaces a little more, and artwork panels the most.

--radius-inline 4pxInline code, focus ring corners

--radius-control 6pxButtons

--radius-surface 8pxMonograms, callouts, code blocks

--radius-screen 12pxProduct screenshots

--radius-panel 18pxDiagram and artwork panels

--radius-tile 12.5%Square product icon grounds

--radius-round 50%The dot, status dots, the rising dot

Elevation

Futureproof is flat. Surfaces separate by colour and 1px lines, not shadows. The one shadow, --shadow-overlay, is for things that float over the page, such as the skip link.

PageWhite. Text, rows and dividers.

SurfaceCloud. Callouts, link panels, the footer.

HighlightTint. Inline code, quiet emphasis.

InverseInk. The homepage header and hero.

OverlayWhite with the overlay shadow.

Components

These are the site's real components, rendered with the same markup and classes that the pages use.

Buttons

Primary action Alternative

On whitePrimary is ultramarine and turns deep ultramarine on hover. Use one per view. Ghost is for the alternative.

Primary action Alternative

On inkThe primary button keeps its white label (6.2:1). The ghost button turns white with a mist border.

Links

Body links are ink with a quiet underline that turns ultramarine on hover.

About Futureproof

On whiteUse an accent link (.link-accent) for a single onward action, such as Explore, All products or About.

On ink, links are white with a mist underline.

On inkNever ultramarine: it is 3.1:1 on ink.

Navigation

On whiteEvery page except the homepage. Slate links, and the current page in ink with an underline.

On inkThe homepage, where the header joins the hero. Reverse logo, mist links, and the current page in white.

Product catalogue

Next Game

Sport iPhone

Upcoming games, results and reminders for the teams and competitions you follow.

Coming soon

Explore

Click Dog

Observability ClickHouse

Turn native ClickHouse telemetry into useful query insight in the observability tools you already use.

Public beta

Explore

Catalogue rowsA monogram in the product's own colours, then its name, category and platform, summary and release status, and an Explore link. Rows are divided by lines, not boxed as cards. At phone width they stack.

Brochure hero and diagram

AsOf

The personal flight recorder for your AI chats.

A local, searchable archive of your Claude Code, Codex, Copilot CLI and Gemini CLI sessions, with a debrief of leaked secrets and wasted spend.

In developmentMac and Linux

Ask about AsOf

Brochure heroProduct name, headline, summary, status and platform, and one primary action. The artwork is a real screen, the product's icon on its own ground, or a diagram. Never an invented screenshot.

DiagramInput, product, result. Set in type on the product's ground, with connectors in the product's line colour. The product name is the largest step.

Callout

AI development consulting

Practical help for teams building software with AI, from adopting coding agents to checking what they deliver. From the people who make these products.

Colt Consulting scopes and delivers each engagement.

Talk to Colt Consulting

CalloutOne offer on a cloud surface with a single primary action. It is used for consulting, whose action always goes to Colt Consulting.

Footer

The footer at the bottom of this page is the component. It sits on cloud and shows Futureproof.dev as text (not the logo), a one-line description, site links, and the legal line naming Colt Consulting Ltd in faint.

The rising dot

On the homepage and the social card, the dot grows into a large ultramarine disc rising from the lower right of an ink ground. The horizon it rises from is the frame's lower edge, never drawn: the horizon rule belongs to Colt Consulting. It is the brand's one graphic device.

Copy stays clear of the disc.

The .rising-dot classAdd it to an ink surface and set --rising-dot-size. The disc's offsets scale with its size.

Social cardThe domain lockup and tagline, with the same rising dot. social.png

Do

Use it once per view, on ink, rising from the lower right.
Crop it by the bottom and right edges so that about a quarter of its diameter shows. It is rising, not floating.
Keep it clear of text. Below 850px it sits beneath the copy.
Keep it flat ultramarine.

Don't

Show it as a whole circle, which reads as a second dot, or put it on white.
Add gradients, glows, rings, outlines or other shapes.
Run text or controls over it, or use it on product pages.
Animate it on load.

Product colours

The products own the warm and green hues; Colt Consulting owns teal. The umbrella uses ultramarine because no product has claimed it, and it stays calm beside all of them.

Next Game
Orange

Next Book
Green

Decision Fieldbook
Grey slate

Launch Pane
Cerulean

Secret Pane
Amber

AsOf
Phosphor on ink

Click Dog
Amber brown

Products

Brochures and catalogue monograms keep each product's own colours: its monogram, its artwork ground and its diagram lines.
A product's colours need at least 4.5:1 between its ink and its ground. A product with a dark ground, such as AsOf's phosphor on ink, sets a light --diagram-ground for its diagram and never takes an ultramarine dot.
A product blue stays at least 20° of hue away from ultramarine (237°) and less saturated. Launch Pane's cerulean sits at 210°.
Product websites keep their own designs. They link back with the domain lockup.

The umbrella

Never uses orange, amber, violet or green, nor teal, which belongs to Colt Consulting, the parent company. This covers code highlighting, charts and illustrations too.
Never draws a horizon line: the horizon rule is Colt Consulting's signature.
Status dots, buttons, links and focus rings stay ultramarine, even on a brochure.
A product colour never becomes a Futureproof page background, button or link.