One Interface, Many Expressions
Same Card data. Different contexts. Watch the surfacing layer pick the right shape and theme for each one.
interface Card {
title: string
description?: string
media?: { src: string; alt: string }
actions?: { label: string; href: string }[]
tags?: string[]
footer?: string
}The interface stays stable
The Card interface defines six fields. Every scenario uses the same data contract. The interface is the source of truth — versioned, machine-readable, and shared.
The surfacing layer decides
Given a context — "dashboard sidebar" or "product page" — the surfacing layer selects the right shape (structure) and theme (visual treatment). It also decides which fields to render. A compact sidebar widget doesn't need an image. A product page does. This decision can be made by a developer, a layout engine, or an AI.
Shapes choose what to render
Not every shape uses every field. The Vertical card renders all six. The Compact card renders only three — title, description, and actions. The interface contract stays complete, but shapes express only what their context needs. This is the separation between what data exists and what gets shown.
Now imagine this for every component.
Avatar, Alert, Modal, Pagination — each one a stable interface with unlimited shapes and themes. Browse the canonical set to see the contracts behind the components you build every day.