FieldNexus
The visual language, principles, and standards that define how FieldNexus shows up — from marketing site to product UI and partner materials.
Edition 1 · 2026
Brand essence
FieldNexus is the operating system for home service businesses. Our language is confident and direct — we respect tradespeople's time. Electric blue and deep navy signal precision and trust; generous whitespace keeps dense operational UI scannable.
“The operating system for home service businesses.”
Professional, not stiff
Speak like a partner who has run dispatch — never like a faceless enterprise.
Accents with restraint
Brand blues are energy. Use them for CTAs, links, and highlights — not full-page washes by default.
Technicians first
The hero is the pro on site and the homeowner experience. Software is the enabler in the story.
Logo
The mark pairs a rounded field-device silhouette with a strong wordmark. The icon uses FieldNexus blue; the wordmark uses navy on light backgrounds and reverses to white on dark.
Default — light background
Reversed — navy / dark UI
Maintain clear space equal to the cap height of the “F” on all sides. Do not place competing marks, text, or busy imagery inside this zone.
Illustrative clear-space frame — align to cap height in production files
Do not distort, recolour outside approved pairs, add effects, or change proportions.
Don’t stretch or squash
Don’t rotate or skew
Don’t add glow / shadows
Don’t use off-palette colours
Don’t rearrange mark + word
Don’t outline for “style”
Colour
Interfaces and marketing pages are mostly neutral and navy for readability. Electric blue (#1800FF) is the primary accent — links, key buttons, focus, and brand moments. Mid blue supports gradients and secondary emphasis.
FieldNexus Blue
#1800FF
Primary accent, links, primary filled buttons, icon mark.
Blue Mid
#4B72FF
Secondary accent, gradients, illustration highlights.
Navy
#022047
Headings, body on light surfaces, dark hero sections.
CTA hover
#2040EE
Button hover / pressed states derived from primary blue.
Success
#16A34A
Positive states, growth metrics.
Warning
#F59E0B
Attention without alarm — scheduling, ratings.
Critical
#DC2626
Errors, destructive actions — use sparingly.
Page tint
#F8FAFF
Default marketing background; keeps blue family cohesion.
Border
#E0E8F4
Cards, dividers, tables.
Text secondary
#3A5474
Supporting copy, descriptions.
Muted
#6B8AB0
Captions, meta, disabled-adjacent text.
linear-gradient(135deg, #1800FF 0%, #4B72FF 100%)
Reserved for hero headlines, large feature bands, and celebratory moments — not for body backgrounds or dense data tables.
Do
Don't
Typography
Roboto is the display and heading family site-wide (via font-display and default h1–h6 styles).
Poppins is the body and UI family for paragraphs, buttons, and supporting copy — loaded from Google Fonts in the root layout.
Optional: Maison Neue may be used for premium print or licensed decks; on the web, stay on Roboto + Poppins unless you self-host Maison Neue.
CSS variables (Next.js)
/* Headings — Roboto */ font-family: var(--font-roboto), 'Roboto', sans-serif; /* Body — Poppins */ font-family: var(--font-poppins), 'Poppins', sans-serif;
Large display moments (sparingly).
Subheads when weight should stay calm.
UI chrome paired with heading scale.
Section titles and marketing subheads.
Hero lines and high-impact headlines.
Body copy, FAQs, long-form help content.
Navigation, form labels, table headers.
Emphasis within body, card meta.
Inline stress in marketing paragraphs.
Numeric highlights and compact UI.
Align with Tailwind defaults where possible for dev velocity.
Iconography
Product and marketing use Lucide icons with consistent stroke weight. Size with Tailwind (w-4 h-4 to w-6 h-6). Prefer currentColor so icons inherit text colour.
Photography
Imagery should feel candid and trustworthy: technicians at work, vans on residential streets, clear daylight or soft office light. Avoid hyper-stylised stock where everyone is grinning at the camera.
Voice & tone
Direct, capable, and optimistic. We explain outcomes before features. We never talk down to contractors or office staff.
Friendly
“You’ll see every truck on one board — no more radio tag.”
Confident
“Invoices go out the moment the job closes.”
Specific
“Average dispatch time drops under two minutes for most teams.”
Reassuring
“Your data stays yours. Export any time.”
Language hygiene
In use
Examples of tokens applied to common UI blocks.
Marketing hero
Run every job from one place.
Scheduling, dispatch, invoicing, and customer comms — built for HVAC, plumbing, electrical, and more.
Card
Today's board
14 active jobs · 6 techs on route
LiveAlert
Payment received for Invoice #4821.
Customer card · $1,240.00