TrackItPilot Design System

The design system behind app/frontend: a token-driven, standalone-Angular component library (tip-*) plus the composed patterns (Settings, Auth, Dashboard screens) built from it. This document is the section index; see tokens.md and conventions.md for the underlying rules, and ../README.md for how the whole developer-doc site fits together.

Principles

Tokens are the single source of visual truth. Every component's styling resolves to a CSS custom property in styles/tokens/; Tailwind utilities are mapped onto the same values via styles.css's @theme block, so there is zero drift between hand-written CSS and utility classes. See tokens.md.
Composition over configuration. Slots (<ng-content select="[name]">) are preferred to boolean/string props for anything that isn't a simple value — icons, trailing actions, modal footer buttons, stat-card footnotes.
Every component earns its loading state. Data-bearing components render their own tip-skeleton internally rather than pushing loading-layout logic onto every call site.
Standalone, OnPush, signals — always. No NgModules, no @Input()/@Output() decorators, no two-way ngModel. See conventions.md for the full contract.

Component index

Component	Selector	One-liner	Doc
Icon	`tip-icon`	Lucide icon wrapper by kebab-case name	icon.md
Button	`tip-button`	Primary action control, 4 variants × 3 sizes	button.md
Badge	`tip-badge`	Tone-driven status pill	badge.md
Card	`tip-card`	Base panel surface, 4 variants + accent border	card.md
Avatar / Avatar Group	`tip-avatar` / `tip-avatar-group`	Identity chip with status dot; overlapping stack	avatar.md
Skeleton	`tip-skeleton`	Shimmering loading placeholder	skeleton.md
Input	`tip-input`	Text field, icon + pill/rounded shape	input.md
Select	`tip-select`	Native-backed dropdown filter	select.md
Checkbox	`tip-checkbox`	Row/select-all control w/ indeterminate	checkbox.md
Radio	`tip-radio`	Single circular radio (caller owns the group)	radio.md
Stat Card	`tip-stat-card`	KPI tile — value, rows, progress, footnote	stat-card.md
Progress Bar	`tip-progress-bar`	Single or multi-segment fill track	progress-bar.md
Nav Item	`tip-nav-item`	Sidebar nav row, active + badge	nav-item.md
Nav List	`tip-nav-list` / `tip-nav-list-item`	Bordered "interstitial nav" drill-down rows	nav-list.md
Activity Item	`tip-activity-item`	Toned timeline/stream card	activity-item.md
Empty State	`tip-empty-state`	"Nothing here yet" block + CTA slot	empty-state.md
Menu / Menu Item	`tip-menu` / `tip-menu-item`	Popover menu with nested submenu flyouts	menu.md
Modal	`tip-modal`	Centered overlay dialog, parent-controlled `open`	modal.md
Toast	`tip-toast-host` (+ `ToastService`)	App-wide toast queue	toast.md
Save Bar	`tip-save-bar`	Sticky unsaved-changes bar	save-bar.md

Patterns (composed screens)

Pattern	Doc	What it composes
Settings	patterns/settings.md	Two-pane admin shell — category nav + grouped `tip-card`s, `tip-save-bar`, `tip-modal` (Shopify App Home aligned)
Auth	patterns/auth.md	Split-screen login/sign-up, `tip-input` form + stylized visual panel
Dashboard	patterns/dashboard.md	Home (God's Eye View + AI hero), Orders (KPI scoreboard + table), Order Details

See ../CONTRIBUTING.md for the contract that keeps this index and every doc in sync with the code.