Components

Table

Compact tables for operational data: agent runs, logs, jobs, knowledge records. 13px text, 44–52px row height, hairline dividers. No card-per-row layout for dense data.

Example

AgentStatusRunsUpdated

agent-core-v2Running1422h ago

data-pipeline-1Error385m ago

workflow-alphaDraft01d ago

knowledge-syncPaused213h ago

Specifications

Row height44–52px

Row text13px

Header text11–12px uppercase, weight 600

Primary nameweight 600, near-black (#0a0b0d)

Secondary values#4e4e4e

Metadata#777169

Row divider1px rgba(10,11,13,0.08)

Header bg#fbfaf8

Status colorSemantic only (green/red/amber/muted)

Rules

Never use card-per-row layout for dense operational data — use proper table rows.
Primary object name is always weight 600 and near-black.
Status uses semantic color only — not the theme accent.
Empty state goes inside the table body, not above the table.
For narrow screens, define column priority rules or enable horizontal scroll.
Avoid more than 6 columns without giving users column controls.