A precision interface for managing legal cases at scale, across Indian courts.
Case Trail is the case management workspace for banks, NBFCs, insurers and corporate legal teams tracking thousands of matters with hundreds of external counsel. This document is the source of truth for the visual language, components and patterns that ship in the product.
Color
Slate carries the interface. Emerald is the brand primary — reserved for actions, links, brand marks, and positive state. Functional accents (amber, rose, azure, violet) share the same lightness/chroma family for a calm, institutional palette. All values declared in OKLCH.
Slate --slate-{0…950}
Emerald — Primary --em-{50…900}
Functional accents --{amber|rose|azure|violet}-*
Semantic mapping
Typography
Geometric sans throughout for neutrality and density. Tabular figures by default on numeric data. Display type is reserved for marketing surfaces; product UI lives between 11–14 px.
Scale
Numerals & data
Spacing, radii, shadows & motion
High-density product. Default row height is 32 px and shrinks to 28 px in compact mode. Radii stay sharp (0 – 6 px) to project precision; pills are reserved for chips and avatars.
Spacing scale
Radii
Elevation
Motion
Buttons, inputs & selection
One primary action per surface. Secondary buttons match the page tone — never duplicate emerald. Inputs are 30 px tall, 13 px text, with a 1 px hairline that thickens to emerald on focus.
Buttons
Text inputs & selects
Selection
Chips & keyboard
Status, tags & priority
Case Trail uses a fixed status palette mapped to operational meaning. Avoid inventing new statuses in product surfaces — pick from this list and rely on tags for free-form metadata.
Case status
Hearing outcomes
Priority & SLA
Forum tags · India
Tables — DataTable primitive
Use <DataTable> from components/ui/data-table instead of hand-rolling <Table>. Columns are typed; density="comfortable" (default) lifts every row to var(--row-h-2line) ≈ 44 px so two-line cellbox content breathes. Switch to "compact" only when every cell is single-line.
Hearing log — compact density
DataList — list of cards
Sibling primitive for vertical lists with leading / primary / meta / trailing slots. Used for Today’s Hearings, P0 escalations, watchlist alerts, notice tracker. Same density tokens as DataTable.
Cell primitives — gallery
Composable cell shapes from components/ui/cells. Drop them into a DataTableColumn.cell renderer to keep every page rendering rich cells the same way.
Cards — case, lawyer, party
Three card primitives cover most of Case Trail: a case summary for dashboards and lists, a counsel card for the lawyer roster, and a party card for plaintiffs / respondents with PAN/CIN-style identifiers and contact metadata.
KPI tiles
Modals, drawers & toasts
Modals confirm or capture short input. Drawers hold context that the user wants to peek at without losing the page state behind them. Toasts are dark by default to be read at a glance against any surface.
Forms — filing intake & hearing entry
Filing intake captures a new matter; hearing entry logs an outcome after court. Both use the same column-grid form pattern, with sticky footers and validation summarized at the top on submit.
Data viz primitives
Charts use slate as the grid colour and emerald as the primary series. Avoid more than four series in a single chart — if you need more, split the view by category.
Timeline — case history
Every case has a single chronological spine. Filings, hearings, orders, internal notes and AI summaries are all written to it — with role-coloured dots so a reviewer can scan months of history in seconds.
Document viewer & RBAC
Documents are the bulk of any matter. The viewer exposes page navigation, redaction status and a confidentiality stamp at all times. Role-based access control is surfaced wherever a person, action, or document is shown.
IN THE HIGH COURT OF JUDICATURE AT BOMBAY
12·04·26
| Role | View | Edit | File | Approve | Confid. |
|---|---|---|---|---|---|
| Org Admin | ● | ● | ● | ● | ● |
| Legal Head | ● | ● | ● | ● | ● |
| Case Manager | ● | ● | ● | — | — |
| Senior Counsel | ● | ● | ● | ● | ● |
| Junior Counsel | ● | ● | — | — | — |
| External Counsel | ● | own | — | — | — |
| Auditor (read-only) | ● | — | — | — | — |
| Client (Bank user) | own | — | — | — | — |
Court Notebook (AI) — surface pattern
The system in use
Three real surfaces stitched from the components above — a portfolio dashboard, a case workspace, and the AI Court Notebook. Frames are clipped at 1080 × 700 px.