NoelX sells serious infrastructure at a premium price. The dashboard is the client’s window into their system — it has to look like Stripe Dashboard meets Linear, tuned for a wellness audience. Warm neutrals, an amber brand, Inter everywhere. This page is the source of truth for every surface that ships.
Warm neutrals, one amber, six semantic roles.
The palette is deliberately narrow. A warm off-white canvas signals wellness (not fintech). Amber is the single brand color — it only shows on active, selected, and decision states. Six semantic colors map to six classification outcomes — nothing else in the product earns them.
Color
Surfaces, text, brand, semantic
Four surfaces — a light canvas for data, a dark sidebar for navigation. Three text weights. Five amber stops. Six semantic colors mapped to the six classification outcomes of every patient message (Booked, Interested, Question, Needs Review, Opt Out, Not Interested).
Surfaces
Text hierarchy
Amber brand scale
Semantic (classification)
Typography
Inter only. Tabular nums for data. No mono anywhere.
One family across every surface. Numbers switch to tabular figures so dollars and counts line up cleanly in stat cards and tables. The decision to drop mono — normally default in dashboards — keeps the interface feeling like serious consumer-facing software rather than developer tooling.
display-lg
32px · 700
$63,847
display-md
28px · 600
34 patients reactivated
heading-lg
20px · 600
Dashboard
heading-md
16px · 600
Recent activity
body
14px · 400
Maria G. — Botox — Would love to come back in!
micro
11px · 600
THIS WEEK · BOOKED · NEEDS REVIEW
Spacing
4-based scale. Ten stops.
Card content padding is 20px/24px. Rows in tables and feeds sit at 14px vertical. Between major sections: 40px. Everything else snaps to one of the values below.
Radii
Five sizes for five roles
sm for toggle options and icon chips. md for buttons and inputs. lg for stat cards and panels. xl for hero-scale surfaces. full for badges and avatars.
sm
6px
md
8px
lg
12px
xl
16px
full
full
Shadow
Soft elevation, always paired with a border
Shadows alone never carry a card — the border provides structure, the shadow provides the subtle lift. Three levels map to three elevation tiers: default cards, dropdowns, modals.
shadow-sm
Default cards
shadow-md
Elevated cards, dropdowns
shadow-lg
Modals, popovers
14 components across four jobs: navigate, decide, scan, act.
Every component was designed for a specific moment in the med-spa owner’s workflow. Classification badges map one-to-one to outcomes. Stat cards answer “how much” at a glance. Activity feed items show “what just happened”. The table shows “which campaigns are working”.
Actions
Buttons, toggles, action links
Primary button
Amber-500 fill, white text, 8px radius. Used for the one primary CTA per view. Never more than one per section.
Secondary button
White fill with 1px border. Paired with primary for two-action decisions, or used standalone when the action isn't destructive.
Time-range toggle
Four fixed options: 6M / 3M / 30D / 7D. Always in descending range order. Active state uses amber-50 bg with amber-200 border — the soft, warm amber-tint pattern used throughout.
Action link
Amber-600 text, small chevron, no underline. Used inside card headers (“View all →”) and inline actions. Never for primary actions.
Status & data display
Classification badges, stat cards, sparklines
Classification badge — six variants
Every inbound patient message resolves into one of six classifications. Each owns its own hue + icon + label. The pair is immutable across the product — nothing else in the system earns these colors.
Stat card
Icon chip in amber-50 + label top-left, sparkline top-right. Display-md value + change indicator below. The dashboard's workhorse — four above the revenue chart.
Sparkline
Inline SVG, 1.5px stroke, gradient-filled area (22% → 0% opacity). Three common hues: amber for revenue, green for trends up, blue for response rate.
REVENUE
TREND
RESPONSE
Tables & feeds
How data scans — row by row
Activity feed item
Initials-chip avatar colored by classification outcome. Name + badge + timestamp in one row. Treatment eyebrow + truncated reply preview below. Hover-only bg — never a selected state.
Campaign table row
Subtle-bg header. Campaign name + type + active pill on the left, four numeric columns right-aligned with tabular nums. Booked count in green; rate in amber — the two numbers that matter.
Navigation
Dark sidebar, light top bar
Sidebar — dark
220px fixed width. Active state: amber-50 bg, amber-500 text + icon + 3px left border. Inactive: gray-400 text on transparent. The only dark surface in the product — a deliberate anchor.
Top bar
Page title + context subtitle on the left. Search, notification bell (amber dot for unread), avatar on the right. 64px height, 1px bottom border — no shadow.
Dashboard
Glow Aesthetics · February 2026
Containers
Inline banners, not modals
Attention states live inline. A dashboard that interrupts its owner with modals loses trust quickly — every alert instead lands as a soft-amber banner at the top of the content area, with a single action to resolve it.
Alert banner
Amber-50 background, amber-500 left rail, amber-700 text. One sentence of context, one action. Dismissible, but the default is to show until the underlying condition resolves.
Two surfaces, one system.
Light is the canvas — where data lives, where the eye rests, where the user spends hours each day. Dark is the anchor — the sidebar, always in the same place, always signalling “you are inside NoelX”. The same tokens drive both: amber still means brand, text-tertiary still means quiet, 6px radii still means chip. One system, two surfaces.
Dark sidebar in context
Always fixed, always 220px. Amber-on-dark is the highest-contrast pairing in the system — reserved for the active route.
Light dashboard in context
Warm off-white canvas, white cards, soft shadows, amber for decision moments only. The same token palette as the sidebar — lookup-swapped, not re-skinned.
Back to case study
NoelX
AI-Powered Patient Recovery System