Cupertino Ui Consistency

Cupertino Ui Consistency

Overview

Apply a consistent Cupertino-inspired layer on top of Lumina: clean, recessed surfaces, glass materials, soft shadows, and restrained hierarchy. Use the checklist to align typography, tokens, components, interactions, and accessibility.

Workflow

1. Define and use tokens first (palette, type, spacing, radii, elevation, motion).
2. Restyle components to match Cupertino + Lumina (materials, shapes, states).
3. Validate interaction completeness and accessibility (keyboard, focus, reduced motion).

Checklist

• Typography: SF Pro Display/​Inter system stack; avoid custom licensed fonts; set font-variant-numeric: tabular-nums for numbers.
• Tokens: define palette (single blue, no purple), desaturated red, radii (squircle), shadows, elevation, spacing scale, type scale, icon sizes, and motion tokens.
• Materials: apply glass/​blur for sidebar, popovers, dropdowns, sticky headers; keep soft ambient shadows.
• Components: ensure hover/​active/​focus-visible/​disabled/​loading/​error states; keep weights light and rely on color/​spacing.
• Overlay behavior: Esc closes, click-outside closes, focus returns to trigger, viewport-safe positioning.
• Keyboard nav: arrow keys for menus, enter/​esc actions, tab order for all controls.
• Motion: Apple-like easing; 150-250ms; opacity/​transform only; reduced-motion safe.
• Tables: text left, numbers right, dates centered; no vertical borders; subtle row hover and minimal sort indicators.
• Charts: minimal axes and grid; subtle hover tooltips; tabular numerals in labels.
• Forms/​settings: System Settings layout with grouped sections; inspector panel or modal for edits.
• Sidebar: narrow, translucent, pill active state, subtle divider for secondary/​profile items.
• Menus/​dropdowns/​popovers: frosted, soft shadow, consistent radius, subtle separators, full keyboard support.
• Accessibility: WCAG AA contrast, visible focus, keyboard access for all interactive elements.
• Iconography: monoline SF Symbols-like look; consistent stroke weight and sizes.

Validation

Confirm tokens are used across components, overlays meet interaction rules, and UI changes keep the Lumina aesthetic while applying Cupertino polish.