Foundations

Color System

Towbook's palette is designed for high legibility, long sessions, and clear hierarchy. The primary surface is black and the accent is a confident, signal-strong blue.

Blue / Primary Brand

HEX
#1F6BFF
RGB
31, 107, 255
VAR
--color-tb-blue
Role
  • Primary brand color
  • Action and emphasis color
Characteristics
  • Strong, confident blue
  • Reads as reliable and technical
  • High contrast on both dark and light backgrounds
Usage
  • Primary CTAs
  • Key icons and indicators
  • Brand icon accent
  • Active states
Do
  • ✓Use sparingly for emphasis
  • ✓Maintain consistency for “active” or “in progress” meanings
Don’t
  • ✕Overuse across large backgrounds
  • ✕Use for non-interactive decorative elements

Blue / Secondary

HEX
#2E7BFF
RGB
46, 123, 255
VAR
--color-tb-blue-secondary
Role
  • Secondary blue for hierarchy and motion
Characteristics
  • Slightly brighter and more energetic than the primary blue
  • Feels dynamic without becoming electric
Usage
  • Hover and focus states
  • Secondary actions
  • Motion-related states (e.g., towing, transitioning)
Do
  • ✓Pair with Primary Blue for state changes
  • ✓Use to indicate progression or interaction
Don’t
  • ✕Replace the primary blue for core brand moments
  • ✕Use as body text color

Amber / Accent

HEX
#F4B400
RGB
244, 180, 0
VAR
--color-tb-amber
Role
  • Accent and attention color
Characteristics
  • Warm, muted amber
  • Noticeable without being aggressive
  • Designed to avoid “warning yellow” fatigue
Usage
  • Waiting / pending statuses
  • Highlights and badges
  • Limited accent moments
Do
  • ✓Use as a signal, not a theme
  • ✓Pair with neutral text for clarity
Don’t
  • ✕Use as a primary action color
  • ✕Use in large solid blocks

Black / Primary Background

HEX
#050608
RGB
5, 6, 8
VAR
--color-tb-black
Role
  • Primary background color
  • Foundation for dark mode
  • Default backdrop for brand expressions
Characteristics
  • Near-black with a subtle cool bias
  • Avoids the harshness of pure black
  • Improves contrast and reduces eye fatigue
Usage
  • App backgrounds
  • Headers and navigation
  • Hero sections and brand moments
Do
  • ✓Pair with white or light gray text
  • ✓Use as the base layer for dark UI
Don’t
  • ✕Use pure black (#000000) alongside it
  • ✕Use for text on dark backgrounds

Dark Neutral / Surface

HEX
#14181F
RGB
20, 24, 31
VAR
--color-tb-surface-2
Role
  • Secondary surface and structural color
Characteristics
  • Slightly lighter than the primary black
  • Creates depth and separation in dark UIs
Usage
  • Cards and panels
  • Sidebars and tool surfaces
  • Secondary backgrounds
Do
  • ✓Layer over the primary black
  • ✓Use to create visual hierarchy
Don’t
  • ✕Use interchangeably with the primary black
  • ✕Use for primary brand moments

Call status colors

A dedicated palette for call lifecycle states. These pills appear across dispatch lists, call cards, and live map pins — so each color must read clearly on dark UI, light UI, and over satellite or terrain map tiles.

Waiting
#E0A42E
Dispatched
#003FA8
Enroute
#2FAE8A
On Scene
#1D6349
Towing
#2C7AED
Destination Arrival
#BA43A8
On dark surface #07090C
Waiting Dispatched Enroute On Scene Towing Destination Arrival
On light surface #F5F6F8
Waiting Dispatched Enroute On Scene Towing Destination Arrival
On map Live dispatch
Waiting Dispatched Enroute On Scene Towing Destination Arrival

Contrast & accessibility notes

All combinations below meet WCAG 2.1 AA at minimum. Aim for AAA on body copy where possible.

Text on dark surface
Text White
on Black / Primary Background
20.4 : 1
AAA
Text Secondary Text (#C7CCD4)
on Black
13.1 : 1
AAA
Text Blue / Primary Brand
on Black
5.2 : 1
AA
Text Amber / Accent
on Black
11.6 : 1
AAA
Text White
on Blue / Primary Brand
4.6 : 1
AA
Text on white surface
Text Primary Text (#050608)
on White
20.4 : 1
AAA
Text Secondary Text (#3A4250)
on White
10.7 : 1
AAA
Text Tertiary Text (#6A7384)
on White
4.6 : 1
AA
Text Blue / Primary Brand
on White
4.2 : 1
AA Large
Text Amber / Accent
on White
1.7 : 1
Fail

Recommended pairs

Use these pairings for high-impact surfaces. Avoid unique blends outside the system.

White on Black
#FFFFFF / #050608
White on Blue
#FFFFFF / #1F6BFF
Amber on Black
#F4B400 / #050608

Color philosophy

  • ●Lead with black. Black is our canvas, not a fallback.
  • ●Blue is a tool, not a decoration. If everything is highlighted, nothing is.
  • ●Amber earns its place — reserve it for moments that need attention.
  • ●Type carries the message; color reinforces hierarchy, never replaces it.