Canvas labels measure this prototype in unscaled CSS px. Native values are AppKit pt; N marks a difference. Text edges mean layout boxes, not glyph ink. Click an ID to isolate one measurement. Hidden states remain listed.
For corner radii, select Corner radii. R01–R26 separate visible surfaces, transparent targets, focus rings and system-owned shapes. Tab glass and hover use18 pt, Tab focus uses16 pt, and list rows use16 pt. Other native shapes are unchanged. See the radius inventory.
Applied: terminal padding 8 pt; header text left inset 12 pt; Add–Pin gap and Pin right inset 4 pt; quota summary inset 8 pt; details inset 16/16/12/16 pt and gaps 8 pt. Other values remain unchanged.
Native baseline: normal window, 1200 × 780 pt root content, 300 pt sidebar, tabs at scroll start. Narrow headers clamp text frames; full screen changes traffic-light reservation. The prototype canvas is 1200 × 760 px. G means current glass height; W/H mean root content width/height.
| ID | Relationship | Native source · pt | Prototype live · px | Recommended · pt |
|---|
Component contract
The native app uses AppKit controls and complete Ghostty surfaces. This page demonstrates chrome states; shell execution, search results, native directory selection, and process confirmation come from the real app. Tabs and workspace selections retain their preview state. The sidebar owns catalog controls and interaction state; the tab bar owns tab controls. The window coordinates workspace sessions, terminal visibility, and overall layout. See DESIGN.md for the behavior and verification contract.
Chrome: system font, 12–13 pt. Terminal: Fira Code, Noto Sans Mono CJK SC fallback, 13 pt. Appearance changes colors and materials while font family, size, weight, metrics, and terminal state remain stable.