roedyrustam/vibes-plug/hig

Human Interface Guidelines (HIG) Expert (2026 Edition)

English | Bahasa Indonesia

<a name="english"></a>

English

Orchestration & Integration

Connects and orchestrates with relevant domain skills:

• `modern-web-guidance`: Enforces standardized accessible navigation and input paradigms.
• `visual-ui-auditor`: Audits rendered visual hierarchies against HIG principles and 1px borders.
• `design-system-architect`: Implements 3-tier radius scales, surface containers, and typography tokens.
• `tailwind-expert`: Maps HIG optical letter-spacing and spacing scales to Tailwind v4 utilities.
• `ui-ux-pro-max`: Design intelligence across F/Z reading patterns and 60-30-10 color distribution.
• `anti-slop`: Eliminates fake avatars, generic gradients, and non-semantic button div-soups.
• `brainstorming`, `zero-to-prod-orchestrator`, `session-memory-manager`: Continuous lifecycle orchestration.

Description

Applies Human Interface Guidelines (HIG) principles to web and mobile UI/UX designs. Covers the core triad (Hierarchy, Harmony, Consistency), Apple's HIG 2026 updates, Google Material Design 3, spatial design for Apple Vision Pro, and modern accessibility requirements.

Trigger Conditions

• Reviewing or critiquing a UI design for HIG violations.
• Making design decisions about typography scale, color usage, or layout hierarchy.
• Designing for multiple platforms (iOS, Android, web) with consistent patterns.
• Evaluating whether a UI feels "premium" or "amateur".
• Ensuring UI components follow platform conventions (button placement, nav patterns).

The Core HIG Triad

1. Hierarchy — Guide the User's Eye

Visual hierarchy controls where the user looks first, how attention flows across information, and how confident they feel taking action (Linear/Apple/Stripe caliber).

Modular Typographic Hierarchy & Optical Tracking:

/* Strict 5-tier typographic scale with optical letter-spacing */
.eyebrow { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-muted); }
.h1      { font-size: 2.5rem;    font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; color: var(--color-text-primary); }
.h2      { font-size: 1.75rem;   font-weight: 600; letter-spacing: -0.02em;  line-height: 1.25; color: var(--color-text-primary); }
.h3      { font-size: 1.25rem;   font-weight: 600; letter-spacing: -0.01em;  line-height: 1.35; color: var(--color-text-primary); }
.body    { font-size: 0.9375rem; font-weight: 400; letter-spacing: 0em;      line-height: 1.6;  color: var(--color-text-secondary); }
.caption { font-size: 0.75rem;   font-weight: 400; letter-spacing: 0.01em;   color: var(--color-text-tertiary); }
.metric  { font-size: 2rem;      font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

Spatial & Depth Hierarchy (Z-axis Surface Tiers):

• Canvas (L0): Neutral background base (bg-neutral-50 dark:bg-neutral-950).
• Surface (L1): Content cards and panels — crisp 1px border (border-neutral-200/80 dark:border-neutral-800) + subtle ambient shadow (shadow-xs).
• Raised (L2): Active popovers, dropdown menus, hover elevation — (shadow-md border border-neutral-200 dark:border-neutral-700).
• Overlay (L3): Modals, slide-over sheets with backdrop blur — (shadow-xl).
• Floating (L4): Global toasts, command palette, floating action docks — (shadow-2xl).

Color & Focus Hierarchy (60-30-10 Principle):

• 60% Base: Canvas and neutral containers.
• 30% Structure: Cards, borders, headers, and secondary surfaces.
• 10% Accent: Reserved strictly for the single primary conversion moment.
• Single Primary CTA Law: Exactly ONE primary emphasized button per screen. All secondary actions must use outline, tonal, or ghost styling to eliminate choice paralysis.
• Destructive Actions: Placed apart from primary paths, styled in danger color, with mandatory confirmation modals.

Gestalt Proximity & Layout Scanability:

• Law of Proximity: Control-label pairs must sit within 4–6px (gap-1.5). Distinct fieldsets sit at 16–24px. Page sections sit at 64–96px (py-16 md:py-24).
• F-Pattern Layout: Left-aligned anchors for analytical dashboards, documents, and data tables.
• Z-Pattern Layout: Diagonal flow for landing heroes and marketing narratives.

2. Harmony — Visual Cohesion

All elements should feel like they belong to the same family.

Spacing Scale (8pt Grid):

4px   → xs gaps (icon padding, tight list items)
8px   → sm (between related elements)
16px  → md (card padding, section spacing)
24px  → lg (between sections)
32px  → xl (between major blocks)
48px  → 2xl (page-level separation)

Border Radius Consistency:

• Small elements (badges, chips): rounded-full or rounded-sm
• Medium elements (inputs, buttons): rounded-md
• Large elements (cards, modals): rounded-xl
• Never mix rounded-none with rounded-2xl in the same screen

Color Harmony:

Analogous:     Brand + ±30° hue neighbors (natural, calm)
Complementary: Brand + 180° (high contrast, CTAs)
Triadic:       Brand + 120°/240° (vibrant, use sparingly)
Monochromatic: Single hue, varying lightness (professional)

3. Consistency — Reduce Cognitive Load

Users should never wonder "how does this work?" — patterns should be predictable.

Platform Conventions (Web):

• Primary CTA: top-right (desktop nav) or bottom-center (mobile)
• Destructive actions: always require confirmation dialogs
• Form submission: Enter key submits, Escape cancels/closes
• Navigation: Breadcrumbs for 3+ depth levels
• Empty states: Always provide an actionable CTA

Component Consistency Checklist:

• [ ] Visual hierarchy is unmistakable: primary CTA stands out, secondary actions are subdued.
• [ ] Typographic scale applies optical tracking (tracking-tight on large titles, tracking-wider on eyebrows).
• [ ] Tabular numerals (tabular-nums) are enforced on all metrics, prices, and counters.
• [ ] All buttons use the same radius (rounded-md everywhere).
• [ ] All modals have the same padding (p-6) and close behavior (Escape key).
• [ ] All form inputs have the same height (h-9) and focus ring style.
• [ ] All error messages appear in the same position (below the input field).
• [ ] All tables use the same row height, tabular numerals, and hover style.

Apple HIG 2026 Updates

Spatial Design (Vision Pro)

• Use depth as an organizational tool — foreground elements are more important.
• Avoid placing interactive elements outside comfortable viewing angles (±45° center).
• Use glass morphism (backdrop-blur) for panels to maintain spatial context.
• Prefer indirect input (gaze + pinch) over precise pointer interactions.

iOS 18 Design Patterns

• Liquid Glass: Full glass-morphism on navigation bars and toolbars.
• Adaptive layouts: Single codebase adapts from iPhone to iPad to Mac.
• Symbols: SF Symbols 6 with variable rendering (multicolor, hierarchical).
• Menu patterns: Context menus replace modal bottom sheets where possible.

Material Design 3 (Google) — Modern Architecture (https://m3.material.io/)

1. Dynamic Color & Algorithmic HCT System

M3 generates accessible, harmonious color palettes dynamically from a seed color or wallpaper using Google's HCT (Hue, Chroma, Tone) perceptual color model:

import { argbFromHex, themeFromSourceColor } from '@material/material-color-utilities';
// Generates 5 tonal palettes (Primary, Secondary, Tertiary, Neutral, Neutral Variant)
const theme = themeFromSourceColor(argbFromHex('#6750A4'));
// light/dark schemes guarantee WCAG AA contrast (Tone difference >= 40 or 50)

2. Surface Container Hierarchy (Shadowless Elevation)

Rather than relying solely on heavy drop shadows, modern M3 establishes depth through Surface Container Tonal Tiers:

• surface-dim / surface / surface-bright: Root viewport surfaces.
• surface-container-lowest & surface-container-low: Recessed or grouped cards.
• surface-container: Default card, dialog, and panel containment.
• surface-container-high & surface-container-highest: Elevated sheets, menus, and search bars.

3. Component Hierarchy & Tonal Tiers

• Buttons (5 Tiers):
• Filled: High-emphasis primary action (bg-primary text-on-primary).
• Tonal: Medium-high emphasis alternative (bg-secondary-container text-on-secondary-container).
• Elevated: High emphasis on textured/busy backgrounds with subtle shadow.
• Outlined: Medium-low emphasis secondary actions with clean border (border-outline).
• Text: Lowest emphasis action inside cards, dialog actions, or flat lists.
• Cards (3 Tiers): Elevated (resting 1dp shadow), Filled (surface-container-highest), and Outlined (border-outline-variant).
• Chips (4 Types): Assist (smart actions), Filter (toggled state), Input (tags/recipients), Suggestion (AI prompts).
• Navigation Adaptive Tiers:
• Compact (<600dp): Navigation Bar (Bottom 80dp, active pill indicator).
• Medium (600-839dp): Navigation Rail (Side 80dp, top FAB + icon destinations).
• Expanded (>=840dp): Navigation Drawer (Side 280-360dp, full persistent sidebar).

4. Design Triad Synthesis: Apple HIG vs Google M3

HIG Audit Protocol

When reviewing a design, check:

1. Hierarchy: Is the primary action immediately obvious? Is text contrast sufficient?
2. Harmony: Is spacing consistent (8pt grid)? Are border radii uniform?
3. Consistency: Do interactive elements follow platform conventions?
4. Accessibility: Does it pass WCAG 2.2? Are touch targets ≥ 24×24px?
5. Platform fit: Does it feel native to its target platform?
6. Anti-Slop Visual Cleanliness (`anti-slop`): Are generic purple/cyan AI gradients banned? Are all 5 interactive states accounted for? Is the content free of "Lorem Ipsum" filler? Are border-radii coherent across the entire view?

Sovereign Execution, Token Efficiency & Invariants

<a name="bahasa-indonesia"></a>

Bahasa Indonesia