Design System

App Surfaces - Overview

Overview
Review paths

Surface Grammar

App Surfaces

Host-aware surface guidance for inline cards, inspector rails, persistent PiP, side panels, and composer-aware fullscreen workspaces. Use the focused pages below instead of one stacked presentation-mode gallery.

Surface Map

Each presentation mode gets its own focused page so the rules stay inspectable instead of collapsing into one visual dump.

Surface Rules

These constraints keep app surfaces legible inside a host chat environment.

Inline cards stay single-purpose: one decision, sparse metadata, and at most two primary actions.

Inspector rails expand supporting detail from a selected preview; runtime diagnostics are only one subtype of that pattern.

PiP means a persistent floating live-session surface inside ChatGPT, not browser or video picture-in-picture.

Fullscreen remains host-aware. The composer still exists, so use it for deeper work, not for recreating app chrome.

KnearMe | Service Portfolio Platform