Color Codes and Status Indicators

🟡Intermediate 5 min read

Understand FlowDule's color system for practitioners, booking status, and service types.

FlowDule’s calendar uses a layered color system to convey multiple information dimensions — practitioner, status, and service type — without creating visual chaos. The system is designed to be intuitive and accessible, including for colorblind users.

The three visual layers

Each booking card in the calendar communicates three types of information through three distinct visual layers.

Layer 1: Practitioner color (who?)

A 4px colored border on the left side of the booking card shows which practitioner the appointment belongs to. The card also has a subtle background tint in the same color.

This answers the question: “Whose appointment is this?” at a glance.

Layer 2: Status indicator (what’s the status?)

A small colored dot (6-8px) with an accompanying icon shows the booking’s current status:

Status	Color	Icon	Description
Confirmed	Green	Checkmark	Appointment is confirmed
Pending	Amber	Clock	Awaiting confirmation
Cancelled	Red	Cross	Appointment is cancelled
Completed	Grey	Checkmark (filled)	Appointment is completed
No-show	Dark red	Exclamation	Client didn’t show up

Layer 3: Service type (what?)

The service type is displayed as text and an optional icon — never as a background color, since that would clash with the practitioner color. In compact calendar cells, only the client name and time are shown; the service name is revealed by tapping the card.

Booking card information hierarchy

Text on a booking card follows a fixed priority:

1. Client name — Largest and most prominent (14px, semibold)
2. Time range — Secondary text (13px, medium)
3. Service name — Only in agenda view or on tap (12px, regular)

In compact calendar cells, only the first two levels are displayed. The remaining details are revealed when you tap the card.

Color accessibility

FlowDule uses a colorblind-safe palette based on the Wong/Krzywinski standard. The eight base colors are distinguishable by users with deuteranopia, protanopia, and tritanopia:

• Orange, Sky blue, Bluish green, Yellow, Blue, Vermilion, Reddish purple, and more

For businesses with more than 8 practitioners, the palette is automatically extended with colors that differ in lightness (not just hue).

Dark mode

The calendar supports full dark mode. Colors are automatically adjusted:

• Practitioner colors are desaturated and shifted to lighter tones to maintain contrast
• Grid lines are reduced to faint white
• Status indicators use lighter variants (e.g., confirmed shifts from dark to light green)
• The time indicator changes to coral red for visibility against dark surfaces

Next steps

• Calendar layers and data types
• Multiple locations
• Navigation and filtering