Design System / Foundations

AbilityPath Design Library

A shared visual foundation for designers and engineers. Tokens are organized semantically so the library is easy to apply and ready to grow into a full component system.

Foundation 01

Color

Color tokens are organized by usage: brand identity, primary theme scale, backgrounds, accents, status feedback, and neutral structure.

Primary Color Scale

Supports interaction states, selected backgrounds, and brand expansion. 600 is the default action color.

900#0F172A

800#1E3A8A

700#1D4ED8

600 ★#2563EB

500#3B82F6

400#60A5FA

300#74A0F7

200#BFDBFE

100#EFF6FF

50#F0F7FF

Theme usage

Use 600–700 for primary actions and interactive foregrounds.
Use 50–200 for selected rows, tabs, and subtle brand surfaces.
Use 300–500 for charts, accents, and supporting brand moments.

Color Tokens

All semantic tokens organized by role. Reference token names in code — never raw hex values.

Token	CSS Variable	Value	Description
Brand
brand/primary	--color-brand-primary	#2563EB	Primary CTA, links, selected states, brand emphasis.
brand/primary-hover	--color-brand-primary-hover	#1D4ED8	Hover, active, or pressed state for primary actions.
brand/primary-soft	--color-brand-primary-soft	#EFF6FF	Low-emphasis selected backgrounds and brand highlights.
brand/primary-strong	--color-brand-primary-strong	#0F172A	Dark navigation shell and high-contrast brand surface.
Background
background/page-from	--color-background-page-from	#F5F6F8	Page background gradient start (top-left). Used in `body` linear-gradient.
background/page-to	--color-background-page-to	#F9F7EE	Page background gradient end (bottom-right). Warm cream tint.
background/surface	--color-background-surface	#FFFFFF	Cards, tables, top-level surfaces.
background/panel	--color-background-panel	#F7F8FA	Detail panels, table headers, callouts.
background/sidebar	--color-background-sidebar	#F4F6F8	Sidebar navigation background.
background/brand-soft	--color-background-brand-soft	#EFF6FF	Selected branded surface and gentle brand highlight.
background/disabled	--color-background-disabled	#F3F4F6	Disabled controls, inactive fields.
Text
text/primary	--color-text-primary	#0F172A	Headings, data values, primary content.
text/secondary	--color-text-secondary	#475569	Body copy, labels, secondary content.
text/tertiary	--color-text-tertiary	#64748B	Metadata, helper text, tertiary content.
text/disabled	--color-text-disabled	#9CA3AF	Disabled and inactive text.
text/on-brand	--color-text-on-brand	#FFFFFF	Text on brand-colored or dark surfaces.
Border
border/default	--color-border-default	#E5E7EB	Card borders and default dividers.
border/subtle	--color-border-subtle	#E2E8F0	Table dividers, chart grid, subtle separator.
border/strong	--color-border-strong	#CBD5E1	Control outlines and strong dividers.
border/brand	--color-border-brand	#2563EB	Focus rings and selected state borders.
Status
status/success	--color-status-success	#15803D	Connected, approved, completed, resolved.
status/success-subtle	--color-status-success-subtle	#EDFDF5	Success chip background fill.
status/warning	--color-status-warning	#B34B28	Needs review, caution state.
status/warning-subtle	--color-status-warning-subtle	#FFFAE9	Warning chip background fill.
status/info	--color-status-info	#2563EB	Informational state and neutral guidance.
status/info-subtle	--color-status-info-subtle	#EFF6FF	Info chip background fill.
status/danger	--color-status-danger	#EF4444	Error, failed, destructive state.
status/danger-subtle	--color-status-danger-subtle	#FFF5F5	Danger chip background fill.
Accent
accent/blue	--color-accent-blue	#74A0F7	Chart series, analytics highlights.
accent/cyan	--color-accent-cyan	#0891B2	Secondary chart or data series.
accent/violet	--color-accent-violet	#8263ED	Tertiary chart / category color.
accent/amber	--color-accent-amber	#F2BE4C	Highlight data, charts, non-status emphasis.
accent/green	--color-accent-green	#10B981	Positive chart accent; not for success text.
accent/slate	--color-accent-slate	#586577	Icon and utility accent in key screens.
accent/soft-blue	--color-accent-soft-blue	#E0F2FE	Soft accent background for info-like UI areas.
accent/soft-violet	--color-accent-soft-violet	#EDE9FE	Soft categorical background.
Neutral
neutral/900	--palette-neutral-900	#0F172A	Primary text, strongest foreground, dark shell.
neutral/800	--palette-neutral-800	#1F2937	High-emphasis text and dark UI elements.
neutral/700	--palette-neutral-700	#334155	Strong body text and table content.
neutral/600	--palette-neutral-600	#475569	Secondary body copy and labels.
neutral/500	--palette-neutral-500	#64748B	Metadata, helper text, tertiary content.
neutral/400	--palette-neutral-400	#7F91AB	Inactive text, placeholders, muted labels.
neutral/300	--palette-neutral-300	#CBD5E1	Control outlines and strong borders.
neutral/200	--palette-neutral-200	#E2E8F0	Table dividers, chart grid, subtle border.
neutral/100	--palette-neutral-100	#F1F5F9	Subtle fills and table header backgrounds.

Color usage notes

Use Brand and Primary Scale for product identity and interaction states.
Use Background tokens for surfaces and the app environment.
Use Accent tokens for analytics, charts, and category colors.
Use Status tokens only for workflow / system meaning — never decorative.
Use Neutral tokens for text, border, divider, icon, and structural UI needs.

Foundation 02

Typography

Inter is the only typeface used across the product. Use weight, size, and line height to create hierarchy before adding color or decoration.

1. Font Family

Regular, Medium, Semi Bold, and Bold are used. Metrics use Semi Bold. Primary titles use Bold. Compact badges and nav eyebrows use Semi Bold.

Regular

400

Medium

500

Semi Bold

600

Bold

700

2. Data & Metric Styles

Metrics are data-display styles, not headings. Use only for numeric values, KPI cards, and chart totals.

Style	Size / Line	Weight	Token	Usage
Metric LXL	48 / 58	Semi Bold 600	--font-metric-lxl-*	Largest KPI / hero metric. Use only where the metric is the main object in the card.
Metric XL	36 / 44	Semi Bold 600	--font-metric-xl-*	Large chart center totals and secondary KPI values.
Metric M	24 / 32	Semi Bold 600	--font-metric-m-*	Smaller numeric emphasis when 36/48 would overpower the card.
Chart Label	14 / 20	Regular 400	--font-chart-label-*	Chart legends, category labels, and percentage labels.

3. Core UI Type Scale

Covers the main reading hierarchy: screen titles, shared titles, body text, tables, captions, badges, navigation, and pagination.

Style	Size / Line	Weight	Spacing	Token	Usage
Screen Title	32 / 32	Bold 700	—	--font-screen-title-*	Top-level page titles: Dashboard, Analytics, Intake Cases.
Title	20 / 28	Bold 700	—	--font-title-*	Panel, section, chart/card, and alert titles. One shared style while specs match.
Item Title	16 / 20	Semi Bold 600	—	--font-item-title-*	Integration names, compact list titles, emphasized row titles.
Body L	16 / 24	Regular 400	—	--font-body-l-*	Longer readable supporting copy where 14px feels too small.
Body M	14 / 20	Regular 400	—	--font-body-m-*	Default body copy, subtitles, descriptions, drawer content, legends.
Body M Strong	14 / 20	Medium 500	—	--font-body-m-strong-*	Buttons, text links, labels, navigation items, compact field values.
Body M Bold	14 / 20	Bold 700	—	--font-body-m-bold-*	Participant names and important table / list labels.
Table Value	14 / 16	Medium 500	—	--font-table-value-*	Compact table values: phone numbers, date/time.
Caption	12 / 16	Regular 400	—	--font-caption-*	IDs, timestamps, helper metadata, secondary table information.
Caption Loose	12 / 20	Regular 400	—	--font-caption-loose-*	Audit trail timestamps and low-density metadata.
Badge	12 / 16	Semi Bold 600	—	--font-badge-*	Status pills and compact state labels.
Table Header	12 / 15	Bold 700	1.1 px	--font-table-header-*	Uppercase table column headers.
Nav Eyebrow	12 / 16	Semi Bold 600	0.6 px	--font-nav-eyebrow-*	Sidebar section labels and small uppercase group labels.
Pagination	11 / 16	Semi Bold 600	—	--font-pagination-*	Pagination controls.

4. Typography Rules

Keep Inter as the only type family across all admin screens.
Use Semi Bold (600) for Metric LXL, Metric XL, and Metric M.
Do not use metric styles as headings — metrics are only for numeric / data display.
Use one shared Title style for panels, sections, chart cards, and alert titles while specs match.
Do not split Panel Title and Section Title unless the visual specs diverge.
Use Screen Title only for top-level page titles.
Use Table Header, Table Value, Caption, and Badge styles consistently in data tables.
Default supporting UI copy to Body M unless the pattern clearly requires Body L.

Foundation 03

Spacing

A 4px base grid. All spacing tokens are multiples of 4. Semantic shortcuts map to the most common layout patterns across key screens.

Spacing Scale

Observed patterns: 24px page gutters, 24px card padding, 16–24px section gaps, 8–12px compact control spacing, 40px button height, 78px table row height.

--spacing-14 px

Icon gap, tight inline spacing

--spacing-28 px

Compact control spacing, badge padding

--spacing-312 px

List item gap, tight field padding

--spacing-416 px

Section gap (compact), table cell padding

--spacing-520 px

Card inner gap (compact)

--spacing-624 px

Card padding, page gutter, section gap

--spacing-832 px

Large card padding, page section top

--spacing-1040 px

Button height, section-level gaps

--spacing-1248 px

Page section vertical rhythm

--spacing-1664 px

Large section gap, page top padding

Semantic shortcuts

Token	Value	Usage
--spacing-card-padding	24 px	Standard card interior padding
--spacing-page-gutter	24 px	Left/right page margin
--spacing-section-gap	24 px	Vertical gap between sections on a page
--spacing-button-height	44 px	Default large button height
--spacing-button-height-m	36 px	Compact medium button height
--spacing-button-padding-x	20 px	Horizontal button padding
--spacing-row-height	80 px	Standard table row height

Foundation 04

Radius

Border radius tokens scale from tight inputs to fully rounded pills. Larger values for cards and page containers reinforce the spacious, breathable feel of the product.

Radius Scale

Six steps from xs (4px) through pill (999px). Component aliases map each element to its designated step.

--radius-xs

4 px

Inputs, tiny indicators
→ --radius-input

--radius-s

6 px

Badges, compact controls
→ --radius-badge

--radius-m

8 px

Buttons, pills, tabs
→ --radius-button

--radius-l

12 px

Cards, table containers

--radius-xl

16 px

Large panels, main cards
→ --radius-card

--radius-2xl

20 px

Large modals, drawers

--radius-3xl

24 px

Page-level cards
→ --radius-page-card

--radius-pill

999 px

Avatars, full pill badges

Component aliases

Alias	Resolves to	Used for
--radius-input	--radius-xs (4px)	Text inputs, select fields
--radius-badge	--radius-s (6px)	Status chips, badges
--radius-button	--radius-m (8px)	Buttons, tabs, pills
--radius-card	--radius-3xl (24px)	Cards, table wrappers
--radius-panel	--radius-3xl (24px)	Section-level containers
--radius-page-card	--radius-3xl (24px)	Full page-level card containers

Foundation 05

Shadows

Three shadow levels establish elevation hierarchy. All shadows use Neutral 900 at low opacity — never colorful or tinted — for a calm, unified feel.

Shadow Scale

From subtle control lift through cards to overlays.

--shadow-xs

0 1px 2px / 4%

Tabs, active pills, micro-lift on inline controls.

--shadow-sm

0 1px 2px / 5%

Subtle control elevation — inputs, focused states.

--shadow-md

0 4px 16px / 6%

Cards and data tables. Default surface elevation.

--shadow-lg

0 8px 24px / 8%

Overlays, drawer panels, floating menus.

--shadow-card

0 4px 20px -2px / 5%

Lifted surface accents.

Token	CSS value	Used for
--shadow-xs	0 1px 2px rgba(15,23,42,0.04)	Tabs, active pills
--shadow-sm	0 1px 2px rgba(15,23,42,0.05)	Form controls
--shadow-md	0 4px 16px rgba(15,23,42,0.06)	Cards, tables
--shadow-lg	0 8px 24px rgba(15,23,42,0.08)	Overlays, drawers
--shadow-card	0 4px 20px -2px rgba(15,23,42,0.05)	Accent / lifted cards

Components 01

Component Overview

AbilityPath builds on Tailwind CSS, shadcn/ui, and Recharts as its open-source foundation. This section documents the product-specific customization layer — tokens, variants, states, and usage rules that make components feel uniquely AbilityPath.

Foundation Stack

The three-layer architecture: open-source primitives → AbilityPath tokens → AbilityPath product components.

Tailwind CSS

Utility classes for spacing, layout, and typography. Never write raw px values — use Tailwind utilities mapped to our spacing tokens.

p-4 · gap-6 · rounded-lg · text-sm

shadcn/ui

Accessible, unstyled component primitives. We override CSS variables in globals.css to apply AbilityPath tokens.

Button · Input · Dialog · Select

Recharts

React charting library. Configure color, tooltip, and axis props using AbilityPath color tokens. Do not override Recharts internals.

BarChart · LineChart · PieChart

How to customize shadcn/ui for AbilityPath

In globals.css, override the shadcn semantic variables to point to AbilityPath tokens:

--primary: var(--color-brand-primary);
--primary-foreground: var(--color-text-on-brand);
--destructive: var(--color-status-danger);
--radius: var(--radius-m);

This drives all shadcn components automatically without forking any component source code.

Components 02

Button

Buttons help users take actions, make choices, and move through key workflows.

Button Styles & Sizes

Button styles define visual priority, while sizes and icon patterns support different interaction contexts.

Regular Buttons

No-icon buttons across visual priority and supported heights.

Style

Medium / 36px

Large / 44px

Primary

Secondary

Tertiary

Text

Buttons with Icons

Icon placement patterns shown within each button style and size.

Style

Leading icon / 36px

Leading icon / 44px

Trailing icon / 36px

Trailing icon / 44px

Primary

Secondary

Tertiary

Text

Icon-only Buttons

Fixed-size icon controls for compact tool and table actions.

Size

Example

Default / 32 × 32

Large / 40 × 40

States

Interaction feedback is documented across the core button types. The grid can scroll horizontally on narrow screens.

Default

Hover

Focus

Pressed

Disabled

Primary

Secondary

—

Tertiary

—

Text

—

Icon Button

—

Token Usage

Property	Token	Value
Primary Button
background	--color-brand-primary	#2563EB
background:hover	--color-brand-primary-hover	#1D4ED8
background:pressed	--palette-blue-800	#1E3A8A
focus ring	--color-accent-blue	2px ring, no offset
text	--color-text-on-brand	#FFFFFF
disabled background	--color-background-disabled	#F3F4F6
disabled text	--color-text-disabled	#9CA3AF
Shared
border-radius	--radius-m	8px
height (L)	--spacing-button-height-l	44px
height (M)	--spacing-button-height-m	36px
padding-x	--spacing-button-padding-x	20px
icon button size	--size-icon-button / --size-icon-button-lg	32×32 / 40×40
icon size	--size-icon-button-icon / --size-icon-button-icon-lg	16px / 18px
font-size	--font-size-button-l / --font-size-button-m	16px L / 14px M, 20px line height

Usage guidelines

Use Primary for the single most important action on a page or dialog (e.g. "Add New Case", "Save Changes").
Use Secondary for supporting actions that sit alongside a primary action (e.g. "Export", "Filter").
Use Text buttons for low-emphasis inline navigation or link-like actions.
Use icon buttons for table actions, overflow menus, print, edit, and informational controls.
Never place two Primary buttons next to each other in the same context.

Product Example — Dashboard Page Header

Components 03

Cards

Cards group related content on a surface. Four variants cover all contexts in the product: default, metric, chart, and table container.

Metric Card

Base: shadcn/ui Card — Used in Dashboard to show KPI summary numbers at the top of every page.

Total Intakes

1,284 cases

Open Backlog

187 cases

Completion Rate

67.3%

Avg Review Time

187 days

Property	Token	Value
background	--color-background-surface	#FFFFFF
border	rgba(255,255,255,0.92)	quiet white edge on product canvas
border-radius	--radius-card	24px
padding	--spacing-6	24px all sides
minimum width	300px	Cards wrap before internal content compresses
metric value	48px / 600 / --color-text-primary	numeric KPI style
label	18px / 500 / --color-text-strong	24px icon + metric name + info icon
change (up)	--color-status-success	#15803D
change (down)	--color-status-danger	#EF4444
box-shadow	--shadow-card	0 4px 20px -2px rgba(15,23,42,0.05)

Usage guidelines

Use Metric Cards only at the top of dashboard-style pages for high-level KPI numbers.
Show a maximum of 4 metric cards in a row to avoid cognitive overload.
Always include a change indicator (up/down/neutral) to provide context for the number.
Do not use Metric Cards inside forms or detail pages.

Default Card

Base: shadcn/ui Card — The standard content container. Used for form sections, list panels, detail views, and general content grouping.

Default

Recent Activity

Standard card used for content panels and list containers.

Compact (Form Section)

Client Information

Compact padding for form sections and tight layouts.

Panel (Sidebar)

Integrations

Panel background for secondary content areas.

Card Variants — Token Summary

Variant	background	border	radius	padding	shadow
Default Card	surface (#FFF)	border-default	--radius-card (24px)	20px / 24px	--shadow-sm
Form Section	surface (#FFF)	border-default	--radius-l (12px)	16px / 16px	--shadow-sm
Panel / Sidebar	panel (#F7F8FA)	border-subtle	--radius-l (12px)	16px / 16px	none
Chart Card	surface (#FFF)	border-subtle	--radius-card (24px)	20px / 24px	--shadow-sm

Components 04

Badges & Status Tags

Status badges communicate workflow state across tables, case cards, and detail views. Built with Tailwind utility classes using AbilityPath status color tokens.

Status Variants

Base: Tailwind CSS — Five semantic states map directly to the status color token pairs defined in the Color foundation.

Intake Status Set

Needs ReviewWaiting InfoCompletedReady for HandoffActiveInactive

Token Usage

Variant	Background token	Text token	Border token
Success	--color-status-success-subtle	--color-status-success	--color-status-success-border
Warning	--color-status-warning-subtle	--color-status-warning	--color-status-warning-border
Waiting	--color-status-violet-subtle	--color-status-violet	--color-status-violet-border
Info	--color-status-info-subtle	--color-status-info	--color-status-info-border
Danger	--color-status-danger-subtle	--color-status-danger	--color-status-danger-border
Neutral	--color-status-neutral-subtle	--color-text-secondary	--color-status-neutral-border

Product Example — Intake Cases Table Row

Participants	Source	Status	Contact	Edit by
RJ Robert Johnson INT-0001	AI Intake	Needs Review	(917) 012-3456	11/21/2025, 11:32 AM
AT Aisha Thompson INT-0002	Web Form	Waiting Info	(650) 555-0148	11/20/2025, 9:14 AM
JW James Whitfield INT-0003	Staff	Ready for Handoff	(408) 555-0193	11/19/2025, 2:45 PM

Usage guidelines

Use status badges only to communicate workflow or system state — never as decorative labels.
Use the no-dot badge style across tables, lists, cards, and chips.
Map each product state to exactly one badge variant — do not mix status colors arbitrarily.
AbilityPath intake states: Active → Success · Needs Review → Warning · In Progress → Info · Inactive/Closed → Neutral · Failed/Rejected → Danger.

Components 05

Forms

Form components follow the shadcn/ui pattern with AbilityPath token overrides. Used primarily in the Intake detail panel, case creation flows, and settings pages.

Input

Base: shadcn/ui Input

States

Default InputTitle

FocusTitle

ErrorRequired Field *This field is required.

Disabled

Select / Dropdown

Base: shadcn/ui Select

Property	Token	Value
Input / Select / Textarea
height (input)	40px	standard form control height
border	--color-border-strong	#CBD5E1
border-radius	--radius-xs	4px
focus border	--color-brand-primary	#2563EB
focus ring	rgba(37,99,235,0.12)	3px spread, no blur
error border	--color-status-danger	#EF4444
disabled bg	--color-background-disabled	#F3F4F6
Label & Helper Text
label	13px / 600 / --color-text-primary
helper	12px / --color-text-tertiary
error message	12px / --color-status-danger
required mark	--color-status-danger	* character

Tables & Lists

Data tables are the primary interface in the Intake Cases screen. Built on shadcn/ui Table with AbilityPath row states and empty state patterns.

Data Table

Base: shadcn/ui Table — Supports hover, selected, and empty states.

Tab Bar

Row States

Participants	Source	Status	Contact	Edit by
RJ Robert Johnson INT-0001	AI Intake	Needs Review	(917) 012-3456	11/21/2025, 11:32 AM
RJ Robert Johnson INT-0000	AI Intake	Needs Review	(917) 012-3456	11/21/2025, 11:32 AM

Default

Hover

Selected

Inactive

Token Usage

Property	Token	Value
header background	--color-background-panel	#F7F8FA
header text	--color-text-strong / 11px / 600	uppercase, 0.5px tracking
row divider	--color-border-subtle	#E2E8F0
row hover	--color-background-row-hover	#F7FAFF
row selected	--color-background-row-selected + --color-brand-primary	soft blue row with 4px left rail
cell primary text	16px / 700 / --color-text-primary	Participant names and identifiers
cell secondary text	14px / 500 / --color-text-strong	Phone, source, and date values
cell meta text	14px / 400 / --color-text-tertiary	ID and secondary metadata
table wrap radius	0px	Square table container

Usage guidelines

Use primary text style (cell-primary) only for the name/identifier column.
Row selection uses --color-background-row-selected with a --color-brand-primary left rail — use only for single or multi-select workflows.
Inactive records should be visually de-emphasized with 55% opacity, not hidden.
Icon buttons in action columns should be 32px to keep row height compact.

Components 07

Charts

All charts use Recharts. AbilityPath customizes axis styling, tooltip appearance, color sequences, and chart card containers. Never override Recharts internals — configure via props only.

Chart Card Anatomy

Base: Recharts + shadcn/ui Card — Every chart is wrapped in a Chart Card with a consistent header, optional legend, and fixed height body.

Language Distribution

Volume by language in the last 30 days

English68%

Spanish19%

Chinese7%

Other6%

Time in Stage

Average days a case spends in each workflow stage in the last 30 days

Waiting Info

2.8d

In Review

2.4d

Ready

0.9d

Approved

0.5d

Backlog Trend

Open cases by stage in the last 30 days

Needs Review

Waiting Info

Ready for Referral

Intake Summary

Case status distribution in the last 30 days

1,284Total Intakes

Completed45%

Ready for Handoff22%

Needs Review18%

Waiting Info15%

Intake Flow Funnel

How cases move from intake source to final outcome in the last 30 days

Token Usage & Recharts Configuration

Property	Token / Prop	Notes
Chart Card Container
background	--color-background-surface	White card
border-radius	--radius-card (24px)
padding	24px 24px 40px	Sankey chart card spacing
Recharts Props
Bar / Line color series	--color-brand-primary, --color-accent-*	Pass as `fill` / `stroke` props
axis tick color	--color-text-tertiary (#64748B)	`tick={{ fill: "#64748B" }}`
grid line color	--color-border-subtle (#E2E8F0)	`CartesianGrid stroke="#E2E8F0"`
tooltip background	--color-brand-primary-strong (#0F172A)	Dark tooltip style
tooltip text	#FFFFFF	White on dark
legend dot size	12px	Circular, 12px
chart height	240px–300px	Standard card plot area height
Sankey node	custom node / nodePadding 50	Render slim nodes with adjacent label and value text

Usage guidelines

Always wrap Recharts components inside a Chart Card with a title and subtitle.
Use the primary color scale (brand-primary, accent-blue, accent-cyan, accent-violet, accent-amber) for multi-series data — in that order.
Never use status colors (green/red/yellow) for chart data series — those are reserved for status badges only.
Always render an empty state when data is null or empty. Never show a broken or empty chart body.
Segmented bars: use for compact distribution summaries such as language volume.
Row charts: use for ranked workflow durations such as Time in Stage.
Line charts: use for time-series trends such as Backlog Trend.
Sankey charts: use sparingly for intake flow from source to outcome.

Components 08

Layout Patterns

Consistent layout patterns used across Dashboard, Intake Cases, and Analytics screens. Built with Tailwind CSS grid and flex utilities.

Page Header

Base: Tailwind CSS — Appears at the top of every main screen. Contains page title, subtitle, and the primary action button.

Dashboard Grid — Metric Cards Row

Total Intakes

1,284 cases

Open Backlog

187 cases

Completion Rate

67.3%

Avg Review Time

187 days

Analytics Grid — 2-Column Chart Row

Intake Overview

New vs. Closed · 6 months

BarChart

Working Time

Hours per week · this quarter

LineChart

Layout Tokens

Pattern	Token / Value	Usage
Page gutter	--spacing-page-gutter (24px)	Left/right padding on main content
Section gap	--spacing-section-gap (24px)	Gap between cards / sections
Metric grid gap	--spacing-6 (24px)	Gap between metric cards
Chart grid gap	--spacing-4 (16px)	Gap between chart cards
Page header title	22px / 700 / --color-text-primary	Main screen headings
Page header subtitle	13px / --color-text-secondary	Count + last updated
Page background	linear-gradient(160deg, #F5F6F8, #F9F7EE)	Full-page canvas behind cards

Layout guidelines

Always open a screen with a Page Header (title + subtitle + primary action).
Follow the Metric Cards row → Chart row → Table row order on dashboard-type screens.
Use a 4-column grid for metric cards; a 2-column grid for charts; a full-width container for tables.
All cards sit on the page gradient background — never place cards on another card background.
The sidebar is always 216px fixed. Content area gets the remaining viewport width.

Reference 01

CSS Variables

Copy this block into your global stylesheet. All semantic tokens reference the raw palette so updates cascade automatically.

:root {
  /* ── Brand ───────────────────────────────────────── */
  --color-brand-primary:        #2563EB;
  --color-brand-primary-hover:  #1D4ED8;
  --color-brand-primary-soft:   #EFF6FF;
  --color-brand-primary-pressed:#1941BF;
  --color-brand-primary-strong: #0F172A;

  /* ── Backgrounds ─────────────────────────────────── */
  --color-background-page-from:  #F5F6F8;
  --color-background-page-to:    #F9F7EE;
  --color-background-surface:    #FFFFFF;
  --color-background-panel:      #F7F8FA;
  --color-background-sidebar:    #F4F6F8;
  --color-background-brand-soft: #EFF6FF;
  --color-background-disabled:   #F3F4F6;
  --color-background-row-hover:  #F7FAFF;
  --color-background-row-selected:#F7FAFF;
  --color-background-tab:        #F3F4F6;

  /* ── Text ────────────────────────────────────────── */
  --color-text-primary:   #0F172A;
  --color-text-secondary: #475569;
  --color-text-tertiary:  #64748B;
  --color-text-disabled:  #9CA3AF;
  --color-text-on-brand:  #FFFFFF;
  --color-text-strong:    #334155;

  /* ── Borders ─────────────────────────────────────── */
  --color-border-default: #E5E7EB;
  --color-border-subtle:  #E2E8F0;
  --color-border-strong:  #CBD5E1;
  --color-border-brand:   #2563EB;

  /* ── Status ──────────────────────────────────────── */
  --color-status-success:        #15803D;
  --color-status-success-subtle: #EDFDF5;
  --color-status-success-border: #D1FAE5;
  --color-status-warning:        #B34B28;
  --color-status-warning-subtle: #FFFAE9;
  --color-status-warning-border: #FEF3C7;
  --color-status-info:           #2563EB;
  --color-status-info-subtle:    #EFF6FF;
  --color-status-info-border:    #DBEAFE;
  --color-status-danger:         #EF4444;
  --color-status-danger-subtle:  #FFF5F5;
  --color-status-danger-border:  #FFEBEB;
  --color-status-violet:         #7E22CE;
  --color-status-violet-subtle:  #FAF6FF;
  --color-status-violet-border:  #F3E8FF;

  /* ── Accent (data viz) ───────────────────────────── */
  --color-accent-blue:        #74A0F7;
  --color-accent-cyan:        #0891B2;
  --color-accent-violet:      #8263ED;
  --color-accent-amber:       #F2BE4C;
  --color-accent-orange:      #E87938;
  --color-accent-green:       #10B981;
  --color-accent-slate:       #586577;
  --color-accent-soft-blue:   #E0F2FE;
  --color-accent-soft-violet: #EDE9FE;

  /* ── Disabled state ──────────────────────────────── */
  --color-state-disabled-bg:   #F3F4F6;
  --color-state-disabled-text: #9CA3AF;

  /* ── Radius ──────────────────────────────────────── */
  --radius-xs:        4px;
  --radius-s:         6px;
  --radius-m:         8px;
  --radius-l:         12px;
  --radius-xl:        16px;
  --radius-2xl:       20px;
  --radius-3xl:       24px;
  --radius-pill:      999px;
  --radius-input:     var(--radius-xs);
  --radius-badge:     var(--radius-s);
  --radius-button:    var(--radius-m);
  --radius-card:      var(--radius-3xl);
  --radius-panel:     var(--radius-3xl);
  --radius-page-card: var(--radius-3xl);

  /* ── Shadows ─────────────────────────────────────── */
  --shadow-xs:   0 1px 2px 0 rgba(15, 23, 42, 0.04);
  --shadow-sm:   0 1px 1px 0 rgba(15, 23, 42, 0.05);
  --shadow-md:   0 4px 20px -2px rgba(15, 23, 42, 0.05);
  --shadow-lg:   0 8px 24px 0 rgba(15, 23, 42, 0.08);
  --shadow-card: 0 4px 20px -2px rgba(15, 23, 42, 0.05);

  /* ── Spacing ─────────────────────────────────────── */
  --spacing-1:             4px;
  --spacing-2:             8px;
  --spacing-3:             12px;
  --spacing-4:             16px;
  --spacing-5:             20px;
  --spacing-6:             24px;
  --spacing-8:             32px;
  --spacing-10:            40px;
  --spacing-12:            48px;
  --spacing-16:            64px;
  --spacing-card-padding:  24px;
  --spacing-page-gutter:   24px;
  --spacing-section-gap:   24px;
  --spacing-button-height-m: 36px;
  --spacing-button-height-l: 44px;
  --spacing-button-height:   var(--spacing-button-height-l);
  --spacing-button-padding-x: 20px;
  --size-icon-button:        32px;
  --size-icon-button-lg:     40px;
  --size-icon-button-icon:   16px;
  --size-icon-button-icon-lg: 18px;
  --spacing-row-height:    80px;

  /* ── Component typography ────────────────────────── */
  --font-size-button-m:    14px;
  --font-size-button-l:    16px;
  --line-height-button:    20px;
}

Reference 02

Tailwind Mapping

How AbilityPath design tokens map to Tailwind utility classes for the engineering prototype. Extend tailwind.config or use CSS variables directly in arbitrary-value syntax.

Colors CSS var

--color-brand-primarybg-blue-600

--color-brand-primary-hoverbg-blue-700

--color-brand-primary-softbg-blue-100

--color-background-surfacebg-white

--color-background-panelbg-slate-50

--color-background-sidebarbg-slate-100

--color-text-primarytext-slate-900

--color-text-secondarytext-slate-600

--color-text-tertiarytext-slate-500

--color-border-defaultborder-gray-200

Radius CSS var

--radius-xs (4px)rounded

--radius-s (6px)rounded-md

--radius-m (8px)rounded-lg

--radius-l (12px)rounded-xl

--radius-xl (16px)rounded-2xl

--radius-2xl (20px)rounded-[20px]

--radius-3xl (24px)rounded-3xl

--radius-pillrounded-full

Status Shadcn

--color-status-successtext-green-700

--color-status-success-subtlebg-green-100

--color-status-warningtext-amber-600

--color-status-warning-subtlebg-amber-50

--color-status-infotext-sky-700

--color-status-info-subtlebg-sky-50

--color-status-dangertext-red-600

--color-status-danger-subtlebg-red-100

Typography Shadcn

Metric LXLtext-5xl font-semibold

Metric XLtext-4xl font-semibold

Screen Titletext-3xl font-bold

Titletext-xl font-bold

Item Titletext-base font-semibold

Body Mtext-sm font-normal

Badgetext-xs font-semibold

Table Headertext-xs font-bold uppercase tracking-wide

Spacing CSS var

--spacing-1 (4px)p-1 / gap-1 / m-1

--spacing-2 (8px)p-2 / gap-2

--spacing-3 (12px)p-3 / gap-3

--spacing-4 (16px)p-4 / gap-4

--spacing-5 (20px)p-5 / gap-5

--spacing-6 (24px)p-6 / gap-6

--spacing-8 (32px)p-8 / gap-8

--spacing-10 (40px)p-10 / gap-10

--spacing-12 (48px)p-12 / gap-12

--spacing-16 (64px)p-16 / gap-16

Wiring shadcn/ui to AbilityPath tokens

Override shadcn component variables in globals.css to point to AbilityPath tokens. For example: --primary: var(--color-brand-primary); — this drives shadcn's semantic variables without forking any components.