Dashboard Visual System

Last updated: 2026-08-26

Purpose

The dashboard inherits The Citation — the same identity as the approved public site. MASTER: planning/design/MASTER.md. Component contract: docs/dev/UI_DESIGN_SYSTEM.md.

Canvas is Counsel Navy (#0B1B34), not generic #0b0b16. Signal Amber is the one match (gold CTA, active hairline, eyebrows). Counsel Blue is interactive. Branded Inter on page titles.

Shared primitives

• dashboard-shell: dark dashboard canvas with the same premium tone as the homepage.
• dashboard-glow: layered radial and linear gradients for dashboard backgrounds.
• dashboard-border-motion: conic-gradient border motion for interactive surfaces and primary/outline/secondary buttons.
• dashboard-card-chrome: refined card surface with radial highlight, inset shine, shadow rhythm, and consistent panel depth.
• dashboard-state-chrome: empty/loading/error state container with centered hierarchy and subtle bottom accent.
• dashboard-state-icon: icon halo used by empty/loading/error states.
• dashboard-skeleton-line: shimmer primitive used by page, card, table, stat, and dashboard skeletons.
• LaunchRouteLoading: route-level loading boundary for dashboard, table, card, document, case workspace, and portal layouts.
• LaunchRouteError: route-level recovery boundary with Sentry route_area tagging, error digest display, and retry navigation.

Usage rules

• Use Card, Button, EmptyState, PageLoading, PageError, PageEmpty, and the shared skeleton helpers before adding page-local loading or empty markup.
• Use LaunchRouteLoading and LaunchRouteError for launch-critical loading.tsx and error.tsx files before adding route-local fallback markup.
• Keep destructive, overdue, success, and warning state classes at the call site; the card chrome avoids hard border colors so semantic borders can still communicate priority.
• Keep hover lift on real Card surfaces only. Skeleton containers use dashboard-card-chrome without dashboard-border-motion so loading placeholders do not move under the cursor.
• Respect reduced motion. The global CSS disables border and skeleton animation when prefers-reduced-motion: reduce is active.

Premium app-wide layer

A second tier of primitives in src/app/globals.css hoists the dashboard's lush treatment onto every page (not just dashboard surfaces). All are reduced-motion aware.

• Elevation scale — --elevation-1..4 (soft multi-stop shadows; never a single

harsh drop).

• .surface / .surface-strong — layered, faintly-lit panels (gradient edge +

inset shine + elevation). Use for any standalone card/section.

• .glass — frosted (backdrop-filter: blur + saturate) chrome for topbars and

floating UI.

• .lift — refined hover rise (cubic-bezier(0.22,1,0.36,1), accent border bloom).
• .text-gradient — white → Counsel Blue display figures.
• .text-match — Signal Amber (the one named highlight).
• .ds-eyebrow / .cs-match-line — mission label and top amber hairline, same as the public header.
• .tabular / .stat-figure — engineered tabular numerals (tight tracking) for

legal/fintech figures.

• .app-ambient, .glow-chip, .focus-glow, .rise-in — ambient depth, accent

icon chips, premium focus ring, and a staggered entrance.

The dashboard hero metric grid (stat-cards.tsx, quick-stats-bar.tsx) is built on .surface + .lift + .glow-chip + .stat-figure; the dashboard nav flyouts and sidebar flyouts use the solid bg-[oklch(0.17_0.008_265)] popup treatment.

Typography — The Citation

Self-hosted Inter in src/app/layout.tsx (--font-inter-loaded). The same branded face is used throughout the interface:

• Inter → --font-sans / --font-heading (UI/body).
• Inter → --cs-font-display / .font-display (page titles).
• Geist Mono → --font-mono.

PageHeader sets .font-display on the h1. Card titles stay Inter (font-heading). Tabular figures on every number (.tabular / .stat-figure).

Verification

The visual primitives are covered by src/__tests__/components/dashboard-primitives.test.tsx, which asserts class wiring and loading/error accessibility roles.

Launch route fallbacks are covered by src/__tests__/components/route-fallbacks.test.tsx, which asserts route status accessibility, skeleton chrome, Sentry tagging, retry recovery, and dashboard fallback navigation.

The premium layer and typography are exercised end-to-end by the production build (next build) and the live dashboard; nav components are documented in Navigation Architecture.