Product UI profile

Use profiles/product-ui.json for dense product interfaces.

This profile combines canonical token values with proven interaction and layout concepts.

The profile defines four reusable contracts: surface, status, metric, and review unit.

Do not share compiled React components across products. Extract behavior and token contracts first.

Run npm run build after a token or profile change. The build creates build/dist/profiles/product-ui.json.

Consumers must pin that generated file. Their drift checks must compare local CSS or component values with the pinned contract.