Portfolio demo · fictional brand built to showcase design-system work · not a real company · ← Back to PhoJOGrapher
FIELDSTONE
Spec No.
01

Brand Overview

Guidelines for Fieldstone — dispatch software built for skilled trades crews

Fieldstone helps electricians, HVAC techs, and plumbing crews get their next job without digging through a group chat. The brand should feel like it was built by someone who's actually ridden in the truck — direct, sturdy, and never precious about itself.

Positioning

Fieldstone is the dispatch board for crews who'd rather be working than typing. Every screen is designed to be readable at arm's length, in gloves, in bad light. The brand mirrors that: no fuss, high contrast, built to survive a job site.

Brand Personality

Direct

Say the thing. No corporate softening, no buzzwords standing in for a real answer.

Sturdy

Built to hold up — visually and functionally. Nothing about the brand should feel fragile or trendy.

Earned

Confidence that comes from doing the work, not from claiming expertise. Show, don't tell.

Mark

The Fieldstone mark is a stamped arrow-into-a-plate — a nod to a rating plate bolted onto equipment. It should always sit on a solid, high-contrast field. Never stretch, rotate, or recolor it outside the approved palette.

Spec No.
02

Color System

Three working colors, stamped like rating plates, plus supporting neutrals

Amber does the heavy lifting — it's the color of a work light, and it's the only one that should ever draw the eye first. Rust and blueprint-blue are used sparingly, for alerts and information respectively.

Primary Palette

Amber
#FFA630
Primary / CTA
Rust
#C1440E
Alerts only
Blueprint
#2C6E8E
Info / links
Iron
#1B1B1D
Ink / dark UI

Full Scales

Auto-generated tint/shade scales for implementation — 50 (lightest) through 900 (darkest).

Spec No.
03

Typography

Stenciled display, technical body, mono for anything that's a number

Display — Big Shoulders Display, Bold/ExtraBold
Next Job: 4:30 PM
Body — IBM Plex Sans, Regular/Medium
Used for anything a crew member reads on the move — job notes, addresses, customer instructions. Never smaller than 15px on mobile.
Mono — IBM Plex Mono, Medium
JOB #4471 · UNIT 12B · ETA 14:30
Spec No.
04

Components

Buttons and cards, built for glove-thumb tap targets

Buttons

Do / Don't — Buttons

Do

  • One amber primary action per screen
  • Minimum 44px tap height
  • Label buttons by the action taken

Don't

  • Stack two amber buttons together
  • Use rust for anything but a real alert
  • Use vague labels like "Submit"
Spec No.
05

Voice & Tone

Write like a good dispatcher — clear, quick, no wasted words

Do

  • "Job starts at 9. Parts are on the truck."
  • Use trade-native terms: job, crew, dispatch, truck
  • Get to the instruction first

Don't

  • "We're excited to let you know your task has been scheduled!"
  • Say "ticket" when the crew says "job"
  • Bury the instruction under a greeting
Spec No.
06

Night Dispatch Mode

Dark theme for early-morning and after-hours crews

Token mapping

Same three working colors, higher-contrast neutrals for low-light screens.

Amber-500 · CTA
Blueprint-600 · Info
Paper-100 · Text
Iron-700 · Surface