BrandKit Express
All case studies

Field service automation software

Voltloop

A kinetic, dark-first identity for field service software, with lime used only as signal.

  • Curated example kit
  • Dark-first, light variant
  • Signal BluePrimary: #245CFF
  • Circuit FogSecondary: #DCE2F5
  • Arc LimeAccent: #A4F85B
A brushed electric-blue metal ring with one lime segment set into its break, standing on a lined near-black card.
01 / 07

From brief to audit

The brief

A fictional field service automation product for operations leaders running multi-location service teams. The brief asked for bold, fast, and technical, with the credibility a buyer expects from systems software.

Audience
Operations leaders modernizing multi-location service teams
Asked for
  • bold
  • fast
  • technical

What the audit found

Operations software tends to look either sleepy and enterprise or chaotic and consumer. The position to take is energy with control: a brand that looks as fast as the workflows it automates while staying legible in dense product UI.

Audience promise
A brand that looks as fast as the workflows it automates.
Differentiator
Pairs aggressive energy with systems-grade credibility.
Design direction
High-voltage contrast with strong geometry and generous negative space.

The system

Dark-first with a light variant. Afterglow Ink as the canvas, Signal Blue for actions, and Arc Lime used only as a status signal. Space Grotesk headings over DM Sans. The mark is a closed loop with a single break, the lime segment marking where work completes.
02 / 07

Logo directions

Three hand-drawn marks, each shown on the kit's canvas and reversed, with where each one is meant to be used.

  • Voltloopvoltloop
    Voltloopvoltloop
    Loop WordmarkHomepage and product header
  • Voltloopvoltloop
    Voltloopvoltloop
    Voltage StackCampaign graphics and shirts
  • Voltloop
    Voltloop
    VL SignalMobile and favicon
03 / 07

Type specimen

The heading and body faces set at working sizes, with the full hierarchy each screen is built from.

Space Grotesk / DM Sans

Voltloop

Voltloop feels kinetic, product-led, and operationally sharp, built for teams that want movement and control. A brand that looks as fast as the workflows it automates.

Space Grotesk and DM Sans keep the identity fast, digital, and decisively product-led.

RoleSizeSample
H164/70Move service ops at full voltage
H242/48Move service ops at full voltage
H330/36Move service ops at full voltage
Body18/28Fast, competent, and operator-first.
Meta14/18Fast, competent, and operator-first.
04 / 07

Palette

Six roles with hex and OKLCH values, and WCAG contrast measured against the kit's own background and text colors.

  • primarySignal Blue#245CFFoklch(0.57 0.22 264)

    Primary actions and links

    Contrast against Pale Voltage:Bg 5.09:1 · AAContrast against Afterglow Ink:Text 3.43:1 · AA Large
  • secondaryCircuit Fog#DCE2F5oklch(0.92 0.03 265)

    Secondary panels and rails

    Contrast against Pale Voltage:Bg 1.27:1 · Fill onlyContrast against Afterglow Ink:Text 13.78:1 · AAA
  • accentArc Lime#A4F85Boklch(0.89 0.18 129)

    Highlights and signal badges

    Contrast against Pale Voltage:Bg 1.27:1 · Fill onlyContrast against Afterglow Ink:Text 13.71:1 · AAA
  • surfaceStatic White#F7F9FFoklch(0.98 0.01 264)

    Cards and app chrome

    Contrast against Pale Voltage:Bg 1.03:1 · Fill onlyContrast against Afterglow Ink:Text 16.93:1 · AAA
  • backgroundPale Voltage#FCFDFFoklch(0.995 0.004 264)

    Canvas background

    Contrast against Afterglow Ink:Text 17.51:1 · AAA
  • foregroundAfterglow Ink#10172Aoklch(0.18 0.03 264)

    Body copy

    Contrast against Pale Voltage:Bg 17.51:1 · AAA
05 / 07

Live components

Real shadcn/ui components, themed only by this kit's CSS variables. Nothing here submits.

Voltloop
Move service ops at full voltage
Decisive

Sample fields. Read-only.

Rendered in Voltloop tokens
The same shadcn/ui components, themed only by CSS variables.
Dark theme, the default.
Voltloop
Move service ops at full voltage
Decisive

Sample fields. Read-only.

Rendered in Voltloop tokens
The same shadcn/ui components, themed only by CSS variables.
Light variant, from the same tokens.
06 / 07

Voice and messaging

Fast, competent, and operator-first.

  • Decisive
  • High-energy
  • Practical

Do

  • Lead with speed
  • Use concrete operations language
  • Show before/after improvements

Don't

  • Write vague innovation copy
  • Overcomplicate features
  • Use sleepy enterprise tone
“Move service ops at full voltage”
Tagline, Voltloop
“Automation for teams in motion”
Tagline, Voltloop
“Built for operational velocity”
Tagline, Voltloop
07 / 07

Handoff

Both themes ship as tokens, so the product can default to dark in the field and switch to light for print. The same exports feed Tailwind, shadcn, and the voice rules an agent reviews copy against.

globals.cssPaste into your Tailwind v4 stylesheet.
@theme {
  --color-background: oklch(0.995 0.004 264);
  --color-foreground: oklch(0.18 0.03 264);
  --color-card: oklch(0.98 0.01 264);
  --color-card-foreground: oklch(0.18 0.03 264);
  --color-popover: oklch(1 0 0);
  --color-popover-foreground: oklch(0.18 0.03 264);
  --color-primary: oklch(0.57 0.22 264);
  --color-primary-foreground: oklch(0.995 0.004 264);
  --color-secondary: oklch(0.92 0.03 265);
  --color-secondary-foreground: oklch(0.22 0.03 264);
  --color-accent: oklch(0.89 0.18 129);
  --color-accent-foreground: oklch(0.16 0.03 264);
  --color-muted: oklch(0.95 0.02 265);
  --color-muted-foreground: oklch(0.46 0.03 264);
  --color-border: oklch(0.9 0.02 265);
  --color-input: oklch(0.99 0.01 264);
  --color-ring: oklch(0.57 0.22 264);
}

Keep exploring

See Voltloop as an interactive brand book.

The same curated kit, laid out as the brand book view a team or an agent works from.

Open the brand book preview
A dark metal eight-point compass star with copper inlay resting on cream paper over a graphite grid.

Next case study

Northforge StudioB2B AI product design