● Truehost · Brand System v2.0

The visual language of the modern web platform.

A confident, modern identity built on midnight navy, sky blue, and sunrise orange — designed to scale across the 15 markets we serve. Every colour, type pair, button, border and surface you need to ship on-brand.

TypeOutfit · Figtree

AnchorsNavy · Blue · Orange

ToneConfident · Warm

UpdatedMay 2026

01 — Logo

The Truehost mark.

An orange cloud paired with the Truehost wordmark — the cloud signals hosting, the wordmark signals trust. Keep clear space around the mark equal to the height of the cloud. Minimum width 96px on screen, 24mm in print.

Primary · Light

Cream surface

Reverse · Dark

DoUse on cream, white, or navy backgrounds. Maintain full colour. Pair with generous clear space.

Don’tRecolour the cloud. Don’t add shadows, outlines or effects. Don’t place on busy photography.

File/truehost-logo.png — request SVG from [email protected].

02 — Colour

Three anchors. One global system.

Every shade below has a job. Click the hex to copy. Navy carries authority, blue carries trust and product, orange carries action. Cream is the canvas.

Primary · Midnight Navy

The anchor of the system. Headlines, primary surfaces, footers.

Navy 900

Footers, terminal-style code blocks, deepest surfaces.

#001028

Navy 800

Hero overlays, premium tier cards, dark mode surfaces.

#001A4D

PRIMARYNavy 700

All headings, secondary CTAs, navigation, body text on cream.

#091F53

Navy 500

Decorative mid-tone for illustration shading and chart fills.

#1A2F8A

Navy 200

Skeleton loaders, table-row hovers on navy themes, subtle chips.

#D6E4F9

Action · Sunrise Orange

Reserved for action: primary CTAs, key highlights, hover states.

Orange 700

CTA hover end-stop, gradient anchor — never as a flat fill.

#E89200

Orange 600

Section eyebrows, icon strokes, gradient start-stop.

#FF9500

PRIMARYOrange 500

Brand primary — logo cloud, badges, accent strokes, highlight underlines.

#FFA500

Orange 400

Gradient mid-tone, illustration highlights, decorative dots.

#FFB733

Orange 100

Badge/pill bg, icon tile background, hover wash on cream.

#FFF4DC

Support · Sky Blue

Trust + product accent. Powers links, focus rings, info chips, illustration backdrops.

Blue 700

Visited links in long-form, deep gradient end-stop.

#1E40AF

Blue 600

Inline links in body copy. Default link colour.

#2563EB

ACCENTBlue 500

Focus rings, info icon strokes, accent borders on tiles.

#3B82F6

Blue 300

Illustration fills, soft data-viz, hover tints on blue chips.

#93C5FD

Blue 100

Info pill bg, skeleton bars, label backgrounds, soft section bands.

#DBEAFE

Neutrals · Cream & Ink

Cream is our default page surface — warmer and friendlier than pure white.

Cream 50

Page background — every long page starts here.

#FFFDF6

Cream 100

Inline code bg, table headers, hover wash on light cards.

#FAF8F3

Ink Soft

Body paragraphs at 16–18px. The default reading colour.

#475569

Ink Mute

Captions, timestamps, eyebrows, helper text.

#64748B

Ink

Dense data only — fine print, numerical tables, legal copy.

#0A0A0A

Functional · System feedback

For status only. Never mix with brand accent colours in the same component.

Success

Confirmation toasts, status chips, success states.

#10B981

Info

Informational banners, tooltips, helpful nudges.

#3B82F6

Warning

Soft warnings — uses our brand orange so it stays on-system.

#FFA500

Error

Validation errors, destructive actions, failed states.

#EF4444

Use case	Token	Hex	Notes
Page background	`--cream-50`	`#FFFDF6`	Default surface for every page.
Headings H1–H4	`--navy-700`	`#091F53`	All display + heading type.
Body paragraphs	`--ink-soft`	`#475569`	16–18px long-form copy.
Captions / meta	`--ink-mute`	`#64748B`	Eyebrows, timestamps, helper.
Inline link	`--blue-600`	`#2563EB`	Underline on hover.
Visited link	`--blue-700`	`#1E40AF`	Long-form articles only.
Primary CTA fill	`--grad-sunrise`	`#FFA500`	Always the Sunrise gradient.
Secondary CTA fill	`--navy-700`	`#091F53`	Solid navy on cream.
Badge background	`--orange-100`	`#FFF4DC`	Pairs with Navy 700 text.
Info pill background	`--blue-100`	`#DBEAFE`	Pairs with Blue 700 text.
Hairline border	`--line`	`#E2E8F0`	Cards, dividers, tables.
Strong border	`--line-strong`	`#CBD5E1`	Inputs, table heads.
Focus ring	`--blue-500`	`#3B82F6`	4px halo at 18% opacity.
Error / destructive	`--error`	`#EF4444`	Validation, danger buttons.
Success	`--success`	`#10B981`	Confirmation toasts.
Highlight underline	`--orange-500`	`#FFA500`	Editorial underline under one headline word.
Code block bg	`--cream-100`	`#FAF8F3`	Inline code on light pages.
Dark surface	`--navy-900`	`#001028`	Footers, terminal blocks.

03 — Gradients

Three signature gradients.

Each gradient stays inside one hue family so the brand always reads as one system. Use on heroes, CTAs, and feature illustrations — never on body text or fine UI.

Sunrise

Primary CTAs, hover glows, key highlights.

–grad-sunrise

Midnight

Hero backgrounds, footers, premium tiers.

–grad-midnight

Sky

Product surfaces, illustration backdrops, info banners.

–grad-sky

Cream Glow

Soft section bands, illustration backdrops on light pages.

–grad-cream

04 — Typography

Outfit for impact. Figtree for clarity.

A geometric display paired with a humanist body. Modern, friendly, unmistakably Truehost — at any size, in any market.

Outfit

Display · Headlines · Numbers

RegularMediumSemiboldBoldExtraBold

Figtree

Body · UI · Long-form

RegularMediumSemiboldBold

DisplayOutfit 800 · 72/76

One day is now day one.

H1Outfit 700 · 48/52

Build, host, grow.

H2Outfit 600 · 32/38

Pricing tiers for every team.

H3Outfit 600 · 24/30

What’s included with every plan

BodyFigtree 400 · 18/28

Describe what you want — our AI ships a working site in seconds, hosted on fast servers across 15 markets.

EyebrowMono 500 · 13 · 0.16em

● TRUEHOST · GLOBAL PLATFORM

05 — Buttons

Six button styles. One job each.

Only one primary button per view. Secondary, outline and ghost handle navigation and supporting actions.

Primary

Get started free →

The single most important action on the page.

Secondary

View pricing

Solid navy. The second-most-important action.

Outline

Learn more

Tertiary actions inside cards and forms.

Ghost

Cancel

Destructive or dismissive actions. Quiet by design.

Link

Read the full guide

Inline calls-to-action in body copy.

On dark

Start free Sign in

Reversed pair for navy and midnight surfaces.

Small Default Large Disabled With icon

06 — Borders & dividers

Quiet lines. Loud focus states.

Borders are soft so content carries the page. The only loud borders are focus rings, errors, and accent strokes used to denote category.

Hairline · default

1px slate. Every card, divider, table row.

Stronger

1px deeper slate for inputs and table heads.

Card

Hairline + shadow-sm. The default surface.

Accent · left

4px orange to mark category, callout, or quote.

Accent · top

3px blue cap for blog cards and product tiles.

Focus ring

1px blue + 4px halo at 18%. Every interactive control.

Error ring

1px red + 4px halo at 14% for invalid input.

Dashed

For empty states, upload zones, “add new” placeholders.

Gradient · premium

Sunrise gradient border for upgrade prompts.

07 — Surfaces & cards

How we frame content.

Cards live on cream. Borders are subtle. Shadows are soft and warm — never grey-blue or harsh.

PRODUCT CARD

Warm, human, globally relevant.

We favour custom illustrations and high-contrast product shots over stock photography. When we do use photography, it features real founders from across the 15 markets we serve.

Illustration

Hand-drawn, cream backgrounds, orange & blue accents.

Photography

Real founders. Warm-toned, never desaturated.

Product UI

Cropped, focused, with a single highlighted state.

09 — Iconography

Light strokes. Rounded ends. Copy-ready.

Icons are stroked at 1.75px on a 24px grid with rounded line caps. They sit inside a 64px Orange 100 tile with an Orange 600 stroke. Tap “Copy SVG” to grab the source.

Hosting

hosting.svg

Domains

domains.svg

AI Builder

ai-builder.svg

email.svg

10 — Spacing, radius & elevation

The invisible system.

An 8-point spacing scale, a five-step radius scale, and soft warm shadows. These tokens keep every page feeling like the same product.

Spacing

4

8

16

24

32

48

64

Radius

8

12

18