# Banten Merebut Garuda — Apple-inspired unified system

## 1. Direction
The public site tells one continuous six-month product story; the authenticated product is its calm operating surface. Both use the same system typography, neutral fields, exact spacing, thin dividers, restrained blue actions, and semantic colors only when domain state requires them. The former dark, card-heavy visual world is replaced rather than normalized through global overrides.

**Source evidence:** runtime extraction from `apple.com/apple-vision-pro` on 25 August 2026: SF Pro Text at 17/25 for body, 44px global navigation, 52px sticky local navigation, 80/84 display chapters, white and `#f5f5f7` fields, long full-width narrative chapters. BMG does not copy Apple assets, trademarked copy, capsule controls, or commerce patterns.

## 2. Tokens
### Color
- `--ui-canvas: #f5f5f7`; `--ui-surface: #ffffff`; `--ui-surface-subtle: #fbfbfd`.
- `--ui-ink: #1d1d1f`; `--ui-ink-secondary: #6e6e73`; `--ui-ink-tertiary: #86868b`.
- `--ui-divider: #d2d2d7`; `--ui-divider-soft: #e8e8ed`.
- `--ui-action: #0071e3`; `--ui-action-hover: #0066cc`; `--ui-action-soft: #eaf3ff`.
- `--ui-success: #248a3d`; `--ui-success-soft: #eef8f0`.
- `--ui-warning: #9a6700`; `--ui-warning-soft: #fff8e6`.
- `--ui-danger: #c9342f`; `--ui-danger-soft: #fff0ef`.

### Type
- Stack: `-apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif`.
- Display 64/68 weight 600; chapter 48/52 weight 600; page 32/38 weight 600; section 24/30 weight 600; title 17/24 weight 600; body 15/23 weight 400; label 13/18 weight 600; meta 12/16 weight 400.
- Weights 400/500/600 only. Data uses tabular figures, not a decorative monospace face. Display tracking never tighter than `-0.03em`.

### Space, shape, depth
- 4px base. Scale: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128px.
- Gutters: 16px mobile, 24px tablet, 32px desktop. Reading width 720px; operational width 1280px; landing width 1440px.
- Radius: 4px controls/status, 8px compact surfaces, 12px major surfaces. No capsules.
- Depth: dividers and tonal separation by default; `0 8px 32px rgb(0 0 0 / 8%)` only for menus/dialogs.

## 3. Landing composition
- A 52px sticky local nav keeps brand, four chapter links, and one restrained rectangular login action without overlap.
- Hero is a centered light chapter with a maximum three-line display, concise support copy, and one primary plus one text action. It does not contain a dark empty stage or metric pills.
- Story order: proposition → operational proof → four independent axes → six-month journey → SRS feature → measured outcomes → restrained close/footer.
- Roadmap and SRS use full-width editorial narrative, sticky/reveal moments, oversized numerals, open lists, and dividers—not repeated card grids.
- Motion: one chapter reveal system driven by IntersectionObserver; content remains visible without JavaScript and under reduced motion.

## 4. Operational composition
- White fixed sidebar and 52px sticky top bar on desktop; off-canvas navigation on mobile.
- Pages start with an open page header, then deliberate metric strips, toolbars, lists/tables, and forms. Panels are used only for bounded tasks.
- Mobile page width never overflows. Wide tables scroll only inside a labelled `.ui-table-frame`.

## 5. Reusable primitives and states
- `.ui-shell`, `.ui-sidebar`, `.ui-topbar`, `.ui-main`, `.ui-page`, `.ui-page-header`.
- `.ui-local-nav`, `.ui-local-nav__links`, `.ui-local-nav__action`.
- `.ui-hero`, `.ui-chapter`, `.ui-chapter-heading`, `.ui-copy`.
- `.ui-metric-strip`, `.ui-metric`, `.ui-data-list`, `.ui-timeline`.
- `.ui-panel`, `.ui-toolbar`, `.ui-table-frame`, `.ui-table`, `.ui-form-grid`.
- `.ui-field`, `.ui-label`, `.ui-input`, `.ui-select`, `.ui-textarea`.
- `.ui-button`, `.ui-button--primary`, `.ui-button--secondary`, `.ui-button--quiet`, each with hover, active, focus-visible, disabled, and loading states.
- `.ui-status` plus `--success`, `--warning`, `--danger`, `--neutral`; every status includes text/icon and never relies on color alone.
- `.ui-feedback` plus semantic variants; empty/error/offline/loading copy states remain visible and actionable.

## 6. Accessibility and behavior
Preserve all `wire:*`, Alpine state, authorization branches, form labels, validation summaries, and the four independent domain axes. Minimum target is 44px for primary touch controls, visible focus, WCAG 2.2 AA contrast, semantic landmarks, and no color-only meaning.

## 7. Responsive contract
Every reachable route is checked at 375, 768, and 1280px. Landing navigation collapses before links collide. Operational columns stack, toolbars wrap, and tables remain internally scrollable. No route may retain legacy serif/display stacks, `font-black` hierarchy, decorative pills, broad color remapping, gradients, glows, or page-level horizontal overflow.