Elizabeth Singer

Elizabeth Singer

London

*

20:34

FleetWorks

Agentic Freight Marketplace

FleetWorks

FleetWorks

About the Client

About the Client

FleetWorks is an AI-driven platform transforming the $1T freight brokerage industry. By automating carrier communications, bookings, and scheduling, their AI agents replace billions of manual calls and emails each year. Backed by Y Combinator and 1st Round, FleetWorks helps brokers cut costs, move faster, and focus on building stronger customer relationships.

FleetWorks is an AI-driven platform transforming the $1T freight brokerage industry. By automating carrier communications, bookings, and scheduling, their AI agents replace billions of manual calls and emails each year. Backed by Y Combinator and 1st Round, FleetWorks helps brokers cut costs, move faster, and focus on building stronger customer relationships.

About the Project

About the Project

Following FleetWorks’s Series A, the company was ready to advance its brand and refine its design system to support growth. My project focused on reworking the color palette to improve accessibility, consistency, and semantic clarity while maintaining the energy of their new brand identity. Using tools like Colorbox and Figma, I developed a refreshed green scale that met WCAG contrast guidelines and gave the product team a stronger, more flexible foundation for future design work.

Following FleetWorks’s Series A, the company was ready to advance its brand and refine its design system to support growth. My project focused on reworking the color palette to improve accessibility, consistency, and semantic clarity while maintaining the energy of their new brand identity. Using tools like Colorbox and Figma, I developed a refreshed green scale that met WCAG contrast guidelines and gave the product team a stronger, more flexible foundation for future design work.

My Role:

My Role:

UX Consultant

UX Consultant

Year:

Year:

2025

2025

Service Provided:

Service Provided:

UX Design, User Interface

UX Design, User Interface

FleetWorks Design System: Color Accessibility After Rebrand

FleetWorks Design System: Color Accessibility After Rebrand

Original Color Palette

Foundation

Tailwind Zinc

Brand

Tailwind Indigo

Success

Tailwind Emerald

Warning

Tailwind Zinc

Error

Tailwind Zinc

Error! Primary brand and success have low contrast (<3:1)

Solution: Adjust hue of semantic green

Warning! Primary brand fails WCAG contrast requirements against white

New FleetWorks Brand Colors

#FFFFFF

#9BFFBB

#3C4536

#000000

Step 1. Scale out brand color

Tweaking hue, adjusting saturation & brightness

Tools used: colorbox, InclusiveColors, manual adjustments on Figma

Move #9BFFBB towards 300

Make sure tones keep their signature brightness

Track accessibility and document uses

InclusiveColors mockup

scaling #9BFFBB

25

#F5FFF8

50

#F0FFF7

100

#D9FFE9

200

#BFFFD8

300

#9BFFBB

400

#63F5A1

500

#24DB84

600

#1DB56D

700

#008151

800

#0E6640

900

#09422B

950

#041E14

Step 2. Change semantic green

Looking at established green scales

FleetWorks Brand

25

#F5FFF8

50

#F0FFF7

100

#D9FFE9

200

#BFFFD8

300

#9BFFBB

400

#63F5A1

500

#24DB84

600

#1DB56D

700

#158D55

800

#4E805E

900

#2F4D38

950

#17261C

Current Green

tailwind emerald

semantic green has low brand contrast !

WCAG Rating > 3

25

#F5FFF8

50

#F0FFF7

100

#D9FFE9

200

#BFFFD8

300

#9BFFBB

400

#63F5A1

500

#24DB84

600

#1DB56D

700

#008151

800

#0E6640

900

#09422B

950

#041E14

Semantic green options

tailwind teal

Success green is most effective as a vivid hue in the yellow–green range. When it shifts too far toward blue, it loses its immediate success affordance and instead risks being read as informational, neutral, or even brand-related.

tailwind green

Insufficient contrast between Tailwind green and brand color weakens semantic signaling.

tailwind moss

Moss feels muted and clashes with Fleetworks’ bright color palette.

tailwind green light

Green Light provides external consistency with other applications by offering a strong, saturated green that aligns with user expectations for success states

The New Color Palette

Foundation

tailwind zinc

B-Primary

#9BFFBB scaled

B-Secondary

tailwind indigo

Success

tailwind green light

Warning

tailwind amber

Error

tailwind rose

Information

tailwind light blue

Key Brand Components

Buttons

Button CTA

Button-primary

Button CTA

Button-hover

Button CTA

Button-disabled

Text

Link

Text-link

Badges & Tags

Label

10

Label

New user

Badge

Misc.

Toggle

Toggle-hover

Checkbox

Charts & Graphs

Active users

1,000

800

600

400

200

0

Jan

Mar

May

Jul

Sep

Nov

Dec

Month

Active users

Series 1

Series 2

Series 3

1,000

800

600

400

200

0

Jan

Mar

May

Jul

Sep

Nov

Dec

Month

Colors, applied.

Engineering Handoff

Adjusting existing css file

Original Semantic Green

/* Green scale (aligned with Tailwind emerald) */

--fw-green-300: 167 72% 60%; /* emerald-300: #6ee7b7 */

--fw-green-400: 167 70% 40%; /* emerald-400: #10b981 */

--fw-green-500: 167 70% 40%; /* emerald-500: #10b981 */

--fw-green-600: 168 84% 29%; /* emerald-600: #059669 */

New Semantic Green

/* Green scale (aligned with Green Light) */

--fw-green-300: 92 57% 94%; /* green-300: #A6EF67 */

--fw-green-400: 93 74% 88%; /* green-400: #85E13A */

--fw-green-500: 94 86% 78%; /* green-500: #66C61C */

--fw-green-600: 95 92% 64%; /* green-600: #4CA30D */

Original Brand Scale

/* Brand scale - Updated to match Tailwind Indigo */

--fw-brand-25: 224 100% 97%; /* indigo-25: #f0f5ff */ --fw-brand-50: 226 100% 97%; /* indigo-50: #eef2ff */ --fw-brand-100: 226 100% 94%; /* indigo-100: #e0e7ff */ --fw-brand-200: 228 96% 89%; /* indigo-200: #c7d2fe */ --fw-brand-300: 239 94% 82%; /* indigo-300: #a5b4fc */ --fw-brand-400: 234 89% 74%; /* indigo-400: #818cf8 */ --fw-brand-500: 239 84% 67%; /* indigo-500: #6366f1 */ --fw-brand-600: 243 75% 59%; /* indigo-600: #4f46e5 */ --fw-brand-700: 245 58% 51%; /* indigo-700: #4338ca */ --fw-brand-800: 244 55% 41%; /* indigo-800: #3730a3 */ --fw-brand-900: 242 47% 34%; /* indigo-900: #312e81 */ --fw-brand-950: 244 47% 20%; /* indigo-950: #1e1e3e */

New Brand Scale

/* Brand scale - Updated to match #9BFFBB Scaled */

--fw-brand-25: 138 4% 100%; /* brand-25: #F5FFF8 */

--fw-brand-50: 148 6% 100%; /* brand-50: #F0FFF7 */

--fw-brand-100: 145 15% 100%; /* brand-100: #D9FFE9 */

--fw-brand-200: 143 25% 100%; /* brand-200: #BFFFD8 */

--fw-brand-300: 139 39% 100%; /* brand-300: #9BFFBB */

--fw-brand-400: 145 60% 96%; /* brand-400: #63F5A1 */

--fw-brand-500: 151 84% 86%; /* brand-500: #24DB84 */

--fw-brand-600: 152 84% 71%; /* brand-600: #1DB56D */

--fw-brand-700: 158 100% 51%; /* brand-primary-700: #008151 */

--fw-brand-800: 154 86% 40%; /* brand-800: #0E6640 */

--fw-brand-900: 156 86% 26%; /* brand-900: #09422B */

--fw-brand-950: 157 87% 12%; /* brand-950: #041E14 */

Misc Brand Changes

/* fg-typography */
--text-brand: var(--fw-brand-700);

--text-brand-secondary: var(--fw-brand-600);


/* Brand */

--brand: var(--fw-brand-700);

--brand-alt: var(--fw-brand-800);

--brand-secondary: var(--fw-brand-600);

Success

Thanks for reviewing my project!