Data & Feedback Style Guide

Use for exact row-and-column comparison. The wrapper scrolls horizontally rather than crushing columns.

Friendly Name

Table 01 — Data Table

GUID

8a17b3e1-1001-4d24-9a71-000000001001Copy GUID

Use in

Exports, Admin Later, Structured Summaries

.ta-table { width:100%; border-collapse:collapse; } .ta-table th { background:#111214; color:var(--theme-accent); }

A compact label, value, and context. Do not use a metric card for ordinary prose.

Friendly Name

Stat 01 — Metric Card

GUID

8a17b3e1-1002-4d24-9a71-000000001002Copy GUID

Use in

Evidence Summaries, Usage, Progress Dashboards

.ta-stat { min-height:116px; display:grid; align-content:center; gap:7px; padding:18px; border:1px solid #414349; }

A dense repeated record with identifier, primary text, supporting text, and trailing status.

Friendly Name

Row 01 — Structured List

GUID

8a17b3e1-1003-4d24-9a71-000000001003Copy GUID

Use in

Evidence, Files, Recipients, Activity

.ta-list-row { min-height:62px; display:grid; grid-template-columns:auto minmax(0,1fr) auto; border-left:3px solid var(--theme-accent); }

Use for determinate work. Include a nearby text value for screen readers and precision.

Friendly Name

Progress 01 — Linear Progress

GUID

8a17b3e1-1004-4d24-9a71-000000001004Copy GUID

Use in

Uploads, Imports, Saves, Transmission

.ta-progress { height:6px; overflow:hidden; background:#2a2c30; } .ta-progress > span { background:var(--theme-accent); }

Use for indeterminate work and pair it with specific status text.

Friendly Name

Loading 01 — Spinner

GUID

8a17b3e1-1005-4d24-9a71-000000001005Copy GUID

Use in

Page and Panel Loading

.ta-spinner { width:34px; height:34px; border:3px solid #3d4046; border-top-color:var(--theme-accent); border-radius:50%; }

Use when the final layout is known and preserving its shape reduces page movement.

Friendly Name

Loading 02 — Skeleton

GUID

8a17b3e1-1006-4d24-9a71-000000001006Copy GUID

Use in

Cards, List Rows, Profile Summaries

.ta-skeleton { overflow:hidden; position:relative; background:#24262a; }

A brief non-blocking result. It should not carry information the user cannot recover later.

Friendly Name

Toast 01 — Temporary Notice

GUID

8a17b3e1-1007-4d24-9a71-000000001007Copy GUID

Use in

Copy, Save, Upload and Background Action Confirmation

.ta-toast { display:grid; grid-template-columns:auto minmax(0,1fr) auto; border-left:4px solid var(--theme-accent); box-shadow:0 18px 45px rgba(0,0,0,.38); }