Studio
Studio/Kits
New kit
Canonical inventory
Application compositions · application

KPI tile

application.kpi-tile

KPI tile: A complete product composition assembled from multiple component contracts.

kpi tilethe full workspacethe composed product surface
States4
Touch targetDisplay
Evidence4
Introduced by2 kits
Visual specimen

Same contract. Every kit voice.

KPI tile

KPI tile

KPI tile: A complete product composition assembled from multiple component contracts.

FoundationActive
ComponentsReady
EvidenceReady
MAVAN renderingdefault
Translation table

What code calls it.

Weblandmark compositionThis component is composed from multiple web primitives.pattern
ARIAlandmarksNo single ARIA role represents the complete component.pattern
SwiftUICustom View compositionSwiftUI has no single direct equivalent; compose and name the behavior explicitly.approximation
AppKitCustom NSView compositionAppKit has no single direct equivalent; use a custom view or controller composition.approximation
Anatomy

Every part, named.

  1. 1Application frame
  2. 2Navigation region
  3. 3Primary work surface
  4. 4Supporting controls
  5. 5Responsive composition
Often confused with

Similar shape. Different contract.

Application shellapplication.app-shell

Shares a visual family, but has a different role, state model, or interaction contract.

Project listapplication.project-list

Shares a visual family, but has a different role, state model, or interaction contract.

Kanban boardapplication.kanban

Shares a visual family, but has a different role, state model, or interaction contract.

Prompt · paste into your agent

Ask for the exact thing.

Implement the canonical KPI tile component (application.kpi-tile). KPI tile: A complete product composition assembled from multiple component contracts. Support these states: default, loading, empty, error. Use semantic design tokens rather than raw visual values. Preserve a minimum appropriatepx touch target where interactive. Provide and verify: implementation, state-matrix, responsive, reduced-motion. Keep the component API stable so every Studio kit can supply its own rendering without changing the behavior contract.
Studio contract

What must be proven.

Required states

default · loading · empty · error

Required evidence

implementation · state-matrix · responsive · reduced-motion

Source union

jade · purple-rain