v4.0.0 to v4.0.0

- ---

- name: hig

- description: "Applies Human Interface Guidelines (HIG) principles — Hierarchy, Harmony, and Consistency — to UI/UX designs to ensure intuitive and cohesive interfaces / Menerapkan prinsip Human Interface Guidelines (HIG) — Hierarchy, Harmony, dan Consistency — pada desain UI/UX untuk memastikan antarmuka yang intuitif dan kohesif."

- author: "Roedy Rustam"

- ---

-

- # Human Interface Guidelines (HIG) Expert (2026 Edition)

-

- [English](#english) | [Bahasa Indonesia](#bahasa-indonesia)

-

- ---

-

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

- ## English

-

- ### Orchestration & Integration

- Connects and orchestrates with relevant domain skills like `anti-slop`, `ui-ux-pro-max`, `design-system-architect`, `brainstorming`, `zero-to-prod-orchestrator`, and `session-memory-manager` to ensure cohesive execution.

-

- ### Description

- Applies Human Interface Guidelines (HIG) principles to web and mobile UI/UX designs. Covers the core triad (Hierarchy, Harmony, Consistency), Apple's HIG 2025 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 and how they navigate information.

-

- **Typography Hierarchy:**

- ```css

- /* Clear hierarchy with size and weight — 4 levels max */

- .h1 { font-size: 2.25rem; font-weight: 700; letter-spacing: -0.02em; }

- .h2 { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em; }

- .h3 { font-size: 1.25rem; font-weight: 600; }

- .body { font-size: 1rem; font-weight: 400; }

- .caption { font-size: 0.875rem; font-weight: 400; color: var(--color-text-muted); }

- ```

-

- **Spatial Hierarchy (Z-axis):**

- - Surface level: cards, panels — `shadow-sm`

- - Raised level: dropdowns, tooltips — `shadow-md`

- - Overlay level: modals, drawers — `shadow-xl`

- - Floating level: toasts, command palette — `shadow-2xl`

-

- **Color Hierarchy:**

- - Primary action: brand color (1 per screen)

- - Secondary action: muted/ghost variant

- - Destructive action: red — far from primary CTA

-

- #### 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:**

- - [ ] 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 and hover style.

-

- ### Apple HIG 2025 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)

-

- #### Dynamic Color (M3)

- Generate a full color system from a single seed color:

- ```typescript

- import { argbFromHex, themeFromSourceColor } from '@material/material-color-utilities';

-

- const theme = themeFromSourceColor(argbFromHex('#6750A4'));

- // Generates: primary, secondary, tertiary, error + all tonal palettes

- ```

-

- #### Key M3 Components

- - **Cards**: 3 variants — Elevated (shadow), Filled (surface variant), Outlined (border)

- - **Chips**: Filter, Input, Suggestion, Assist — each with distinct purpose

- - **Navigation**: Bottom bar (≤5 items), Rail (tablet), Drawer (desktop)

-

- ### 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?

- 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?

-

- ---

-

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

- ## Bahasa Indonesia

-

- ### Integrasi Orkestrasi

- Terhubung dan mengorkestrasi skill domain yang relevan seperti `anti-slop`, `ui-ux-pro-max`, `design-system-architect`, `brainstorming`, `zero-to-prod-orchestrator`, dan `session-memory-manager` untuk memastikan eksekusi yang kohesif.

-

- ### Deskripsi

- Menerapkan prinsip Human Interface Guidelines (HIG) pada desain UI/UX web dan mobile. Mencakup triad inti (Hierarchy, Harmony, Consistency), pembaruan Apple HIG 2025, Google Material Design 3, desain spasial untuk Apple Vision Pro, dan persyaratan aksesibilitas modern.

-

- ### Kondisi Pemicu

- - Meninjau atau mengkritik desain UI untuk pelanggaran HIG.

- - Membuat keputusan desain tentang skala tipografi, penggunaan warna, atau hierarki tata letak.

- - Merancang untuk berbagai platform (iOS, Android, web) dengan pola yang konsisten.

- - Mengevaluasi apakah UI terasa "premium" atau "amatir".

- - Memastikan komponen UI mengikuti konvensi platform.

-

- ### Triad HIG Inti

-

- #### 1. Hierarki — Pandu Mata Pengguna

- Hierarki visual mengontrol di mana pengguna melihat pertama dan bagaimana mereka menavigasi informasi.

- - **Hierarki tipografi**: 4 level maksimal — H1 (2.25rem, 700), H2 (1.5rem, 600), H3 (1.25rem, 600), body (1rem, 400).

- - **Hierarki spasial (sumbu-Z)**: Surface (shadow-sm), Raised (shadow-md), Overlay (shadow-xl), Floating (shadow-2xl).

- - **Hierarki warna**: Satu warna brand per layar, aksi sekunder dengan varian muted/ghost, aksi destruktif dengan merah — jauh dari CTA utama.

-

- #### 2. Harmoni — Kohesi Visual

- Semua elemen harus terasa seperti milik keluarga yang sama.

- - **Skala spacing (grid 8pt)**: 4px, 8px, 16px, 24px, 32px, 48px.

- - **Konsistensi border radius**: Elemen kecil (rounded-full), sedang (rounded-md), besar (rounded-xl). Jangan campurkan rounded-none dengan rounded-2xl di layar yang sama.

- - **Harmoni warna**: Analogis, komplementer, triadik, atau monokromatik — pilih satu skema dan patuhi.

-

- #### 3. Konsistensi — Kurangi Beban Kognitif

- Pengguna tidak pernah bertanya-tanya "bagaimana cara ini bekerja?" — pola harus dapat diprediksi.

- - Konvensi platform: CTA utama di kanan atas (nav desktop) atau bawah tengah (mobile).

- - Aksi destruktif selalu memerlukan dialog konfirmasi.

- - Semua komponen sejenis menggunakan radius, padding, dan perilaku yang sama.

-

- ### Pembaruan Apple HIG 2025

-

- #### Desain Spasial (Vision Pro)

- Gunakan kedalaman sebagai alat organisasi. Gunakan glass-morphism (`backdrop-blur`) untuk panel. Hindari elemen interaktif di luar sudut pandang yang nyaman.

-

- #### Pola iOS 18

- Liquid Glass untuk navigation bar. Tata letak adaptif dari iPhone ke iPad ke Mac. SF Symbols 6 dengan rendering variabel.

-

- ### Material Design 3 (Google)

-

- #### Warna Dinamis (M3)

- Hasilkan sistem warna penuh dari satu warna seed menggunakan `@material/material-color-utilities`.

-

- #### Komponen M3 Utama

- - **Kartu**: Elevated (bayangan), Filled (varian permukaan), Outlined (batas).

- - **Chip**: Filter, Input, Saran, Bantuan — masing-masing dengan tujuan berbeda.

- - **Navigasi**: Bottom bar (≤5 item), Rail (tablet), Drawer (desktop).

-

- ### Protokol Audit HIG