| 1 | { |
| 2 | "brief": "Make Meet web and native UI fairly consistent, using frontend-design skill and shared Estilo primitives.", |
| 3 | "baseline": "Native MeetAppearance, MeetLobby and MacCallView at 9225ec2; preserve existing web authentication, device and media behavior.", |
| 4 | "palette": {"surface": "#ffffff", "canvas": "#f8f9fb", "text": "#171b24", "secondary": "#586174", "native_teal_reference": "#087d8a", "video": "#000000"}, |
| 5 | "tokens": "Use existing day tokens for adaptive surfaces, typography, controls and focus; retain day accent rather than introduce a global hue change. Native reference teal remains in the Meet icon. Black video surface matches MacVideoTile.", |
| 6 | "type": "System UI stack, 32px lobby heading, 24px meeting heading, 16px controls and 14px supporting text. Native familiarity and OS font rendering are the deliberate choice.", |
| 7 | "layout": "Left-aligned lobby: title and identity above a large preview and device controls. In-call: title and layout switch above video stage, optional chat sidebar to its right, stable controls below. At mobile widths chat stacks below the stage and controls wrap.", |
| 8 | "wireframe": "[Title Focus | Grid]\n[ Main video / smaller participants ][ Chat ]\n[ Mic Camera Share screen Chat Leave ]", |
| 9 | "review_against_brief": "Keep the video itself as the dominant surface. Avoid decorative cards around every setting or an unrelated marketing hero. Shared Estilo CSS owns reusable panel, call workspace, segmented controls and action target geometry. Meet owns media-tile layout and DOM wiring. This is a first adoption, not a claimed suite-wide interface.", |
| 10 | "states": "Retain visible On/Muted/Off text and aria-pressed. Focus/grid changes never detach streams. Focus selects a shared screen first, otherwise the first remote participant; native participant selection remains a later enhancement. Collapsing chat preserves its draft and log. No new identity, media permission or authority path.", |
| 11 | "verification": "Full make ci and real two-browser media/chat gate; mobile 320px, desktop, keyboard, dark/light, script-off fallbacks; Fable source/design review and canary inspection before merge/promotion." |
| 12 | } |
| 13 | |
amadan