A calmer palette and one icon family.

What's on screen today

Roughly what the current build uses, grouped by role. Each of these is fine on its own — the trouble is they don't share a saturation or temperature, so placed together they compete for attention.

Proposed system

Same roles you already rely on — green as the brand, blue for information, red for cancellations — but every accent is desaturated to a shared earthy tone, plus one coordinated warm pair (clay + honey) that replaces both the rust orange and the bright yellow. Each hue ships as a full scale so states have depth without new colors.

Shift & appointment states

The same states you have now, remapped onto the new scales. Notice each stays distinguishable while sharing a temperature — that's the difference from the current board.

Icon pack — treatment setup

Replacing the emoji (📋 💰 👤 📅 ⚙️ 🗑️) with one line family: 24×24, 1.6px stroke, rounded joins, single-color so they inherit whatever the state calls for. These render crisply at any size and stay legible in the sidebar.

Dashboard "logo" tiles

The coloured metric icons on the Dashboard and Inventory pages, unified. Same rounded tile, same line-icon family, each tinted with its own scale's 100 background and 500/600 icon — so the four cards read as a set instead of four random colours.

Therapist avatars

Replacing the flat colour-initial blocks. Two placeholder options, both drawn from the family palette — swap in real staff headshots for production; these hold the layout and look intentional until then. Each therapist keeps one assigned tone across the whole portal so they stay recognisable.

Option A · Silhouette

Option B · Monogram

Demo data · pravatar.cc

To populate the demo with photos, use pravatar.cc — free, no key, just a URL. Pin each therapist to a fixed img number so their face stays consistent across the shift planner and appointment schedule. Preview the numbers below and swap any that don't fit — the library has ~70 images.

/* pattern — size in px, img = fixed image id */
https://i.pravatar.cc/150?img={n}

/* suggested mapping (adjust to taste) */
Alexandra P.  — Senior Therapist      img=5
Maya Reyes    — Facial Specialist      img=9
David Kim     — Deep Tissue Expert     img=12
Sarah Lopez   — Aromatherapy           img=16
James To.     — Hot Stone              img=33

/* keep the identity ring regardless of photo */
.avatar{ border-radius:50%; border:2px solid var(--forest-500); }
  /* ring color = each therapist's assigned tone */

Drop-in tokens

The full set as CSS custom properties. Same names used throughout this doc.

/* Banyan Admin — color tokens */
:root{
  /* neutrals */
  --ink:#17211C;        --slate-700:#3E4842;  --slate-500:#6B756E;
  --slate-300:#B9C1BB;  --mist-200:#DDE3DE;   --mist-100:#EEF2EF;
  --paper:#F8FAF8;      --white:#FFFFFF;

  /* forest — brand / primary */
  --forest-900:#17362A; --forest-700:#234C3A; --forest-500:#3C6B54;
  --forest-300:#7FA891; --forest-100:#DBE9E0; --forest-50:#EFF5F1;

  /* harbor — information */
  --harbor-700:#2E4F63; --harbor-500:#4E7488; --harbor-300:#9FBAC7; --harbor-100:#DEEAEF;

  /* clay — warm accent */
  --clay-700:#9C5330;   --clay-500:#BE7548;   --clay-300:#DDAE8C;   --clay-100:#F2E3D7;

  /* honey — warnings */
  --amber-600:#C08A2E;  --amber-400:#DDB05A;  --amber-200:#EFD9A2;  --amber-100:#F7ECD2;

  /* brick — cancel / destructive */
  --red-600:#A8443B;    --red-400:#C67A70;    --red-200:#E6C0BA;    --red-100:#F4E2DE;

  /* avatar rotation */
  --plum-500:#7A5568;
}