Brand Guide
The working reference for designers, developers, and marketers. Every value on this page
is read from the token layer in src/styles/globals.css.
The four brand colours are confirmed. Navy #0c2654, deep navy #001645, orange #fb7703, and amber #f5a911. The navy mid-tones, the pale blues, and the neutrals are derived from the brand navy hue and should still be checked against the approved Figma file.
Wordmark
No GoFari mark has been supplied yet. The site currently sets the name as a text wordmark in Outfit ExtraBold with tight tracking. Swap this for the supplied mark when it lands.
Colour
Three rules govern the palette. White is the default page surface. Navy carries authority and structure. Orange is rare, and pale blue stays contained.
Navy — authority and structure
Navy 900
#0c2654 · --color-navy-900
The brand navy. Structure, headings, major CTAs, text on light.
Navy 950
#001645 · --color-navy-950
Deepest navy. The global footer, image overlays, gradient anchors.
Navy 800
#103372 · --color-navy-800
Derived. Hover state for navy actions.
Navy 700
#184493 · --color-navy-700
Derived. Supporting navy for icons and links on light surfaces.
Navy 600
#2959ae · --color-navy-600
Derived. Mid-tone for charts and diagrams.
Navy 500
#4573c4 · --color-navy-500
Derived. Lightest navy that still holds on white.
Orange — used sparingly
Accent
#fb7703 · --color-accent
The brand orange. Conversion actions, arrows, active cues. As a fill it carries NAVY text.
Accent Hover
#de6a02 · --color-accent-hover
Hover state for the conversion action.
Accent Ink
#be5a02 · --color-accent-ink
Orange as TEXT or an icon on a light surface. Raw orange fails contrast there.
Accent Soft
#fff1e3 · --color-accent-soft
Low-emphasis orange wash. Badges and highlight chips only.
Amber — warm emphasis on navy
Gold
#f5a911 · --color-gold
The brand amber. Warm emphasis on navy surfaces, where it reads at 7.44:1.
Gold Hover
#dd9710 · --color-gold-hover
Hover state for amber elements.
Gold Ink
#9e6c07 · --color-gold-ink
Amber as text on a light surface. Raw amber is 1.99:1 on white.
Gold Soft
#fef4de · --color-gold-soft
Low-emphasis amber wash.
Surfaces
Background
#ffffff · --color-bg
The default page surface. Pure white, never cream or warm off-white.
Mist
#e9eff9 · --color-mist
Contained pale blue, derived from the brand navy. Metric tiles, form cards, icon tiles, product framing.
Mist Deep
#d2ddf2 · --color-mist-deep
Hover state for pale blue tiles. Muted text on navy.
Surface
#f5f8fc · --color-surface
Neutral section break when pale blue would be too much colour.
Border
#dfe6f0 · --color-border
Default hairline between surfaces and around cards.
Border Strong
#c3cfe1 · --color-border-strong
Hover and focus borders.
Text
Heading
#0c2654 · --color-heading
All headings. Same value as Navy 900.
Text
#16233f · --color-text
Body copy.
Muted
#55617a · --color-muted
Supporting copy, captions, inactive nav.
Subtle
#8290a8 · --color-subtle
Placeholders and the lowest-emphasis text. Never for body copy.
Do not use pale yellow, cream, or warm off-white as a page surface, and do not wash pale blue across a full page. Both make the platform read as less premium and less technology-enabled.
Contrast — measured
Both warm brand colours are light. Neither can carry white text. Every orange or amber fill on this site uses navy text, and orange text on a light surface uses Accent Ink instead.
Typography
A bold geometric sans-serif voice. Outfit stands in for the brand typeface until the brand guide names one. Inter carries longer body copy for readability.
Lumber trading, built for how the work happens
Lumber trading, built for how the work happens
Lumber trading, built for how the work happens
Lumber trading, built for how the work happens
Lumber trading, built for how the work happens
Lumber trading, built for how the work happens
Buttons
Navy carries most calls to action. Orange is reserved for the single conversion action on a page — usually "Get Access". Two orange buttons competing on one screen is a mistake.
<Button variant="primary | conversion | secondary | ghost" />
Contained pale-blue surfaces
2B+
Board feet traded
94%
Fewer order disputes
3hrs
Trade to confirmed order
180+
Verified traders
Layout
Spacious pacing and architectural edges. Section boundaries stay straight and horizontal — no waves, no curves, including where the hero ends.
- Container
- max-w-7xl · px-4 sm:px-6 lg:px-8
- Section rhythm
- py-24 (--spacing-section: 7rem)
- Card radius
- rounded-2xl · rounded-3xl for large framing
- Section edges
- Straight horizontal only
Voice
Editorial confidence plus operational credibility. The brand should feel impressive before it feels promotional, and trustworthy before it asks for the conversion.
Do
Lead with the outcome, then the proof.
Don't
Open with a feature list.
Do
Name the real problem: phone calls, spreadsheets, email chains.
Don't
Reach for buzzwords like synergy or disruption.
Do
Be specific. "Confirmed in minutes, not days."
Don't
Be vague. "Dramatically faster."
Do
Sound impressive before promotional.
Don't
Ask for the conversion before earning trust.
Open items
Everything still waiting on the branding agency or the GoFari team.
- Pale blue is derived from the brand navy, not supplied. Confirm it against the Figma file.
- The brand typeface and its weights. Outfit is the current stand-in.
- Logo and wordmark files. The site uses a text wordmark today.
- A GoFari favicon. The current one is a placeholder.
- The production domain. gofari.com is assigned in Vercel but its DNS still points at AWS, which redirects it to the product app. www.northstarpilot.com serves the site until the dev team moves it.
- A verified sending domain in Resend before confirmation emails come from a GoFari address.