v4.0.0 to v4.1.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) — 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:

```typescript

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

| Dimension | Apple Human Interface Guidelines (HIG) | Google Material Design 3 (M3) |

| :--- | :--- | :--- |

| **Core Philosophy** | Content-First, Deference, Clarity | Expressive, Adaptive, Personalization (Material You) |

| **Depth & Materials** | Liquid Glass, Vibrancy, Backdrop Blurs | Surface Container Tonal Tiers + Tonal Tinting |

| **Color Model** | Semantic System Colors + Dark Mode Pairs | Algorithmic HCT Space + 5 Dynamic Tonal Palettes |

| **Iconography** | SF Symbols 6 (Multicolor, Hierarchical) | Material Symbols (Variable axes: Weight, Grade, Fill) |

| **Touch Targets** | Minimum 44×44pt | Recommended 48×48dp (Minimum 24×24dp) |

| **Corner Curvature** | Continuous Squircle / Superellipse | Explicit Radii Scale (0, 4, 8, 12, 16, 28, 9999px) |

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

---

<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) — Arsitektur Modern (https://m3.material.io/)

#### 1. Warna Dinamis & Sistem HCT Algoritmik

M3 menghasilkan palet warna yang harmonis dan aksesibel secara dinamis dari warna seed atau wallpaper pengguna menggunakan model warna perseptual **HCT (Hue, Chroma, Tone)**:

```typescript

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

// Menghasilkan 5 palet tonal (Primary, Secondary, Tertiary, Neutral, Neutral Variant)

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

// Skema mode terang/gelap menjamin kontras WCAG AA (perbedaan Tone >= 40 atau 50)

```

#### 2. Hierarki Surface Container (Elevasi Tanpa Bayangan Tebal)

Alih-alih hanya mengandalkan drop shadow tebal, M3 modern menetapkan kedalaman melalui **Tingkatan Tonal Surface Container**:

- `surface-dim` / `surface` / `surface-bright`: Permukaan viewport dasar.

- `surface-container-lowest` & `surface-container-low`: Kartu bersarang atau pengelompokan list.

- `surface-container`: Kontainer default kartu, dialog, dan panel.

- `surface-container-high` & `surface-container-highest`: Lembar melayang (sheet), menu, dan search bar.

#### 3. Hierarki Komponen & Tingkatan Tonal

- **Tombol (5 Tingkatan)**:

- `Filled`: Aksi utama berpenekanan tinggi (`bg-primary text-on-primary`).

- `Tonal`: Alternatif berpenekanan sedang-tinggi (`bg-secondary-container text-on-secondary-container`).

- `Elevated`: Penekanan tinggi pada latar belakang bertekstur/sibuk dengan bayangan halus.

- `Outlined`: Aksi sekunder berpenekanan sedang-rendah dengan garis batas bersih (`border-outline`).

- `Text`: Aksi berpenekanan terendah di dalam kartu, dialog, atau list datar.

- **Kartu (3 Tingkat)**: `Elevated` (bayangan 1dp saat diam), `Filled` (`surface-container-highest`), dan `Outlined` (`border-outline-variant`).

- **Chip (4 Tipe)**: `Assist` (aksi pintar), `Filter` (status toggle), `Input` (tag/entitas), `Suggestion` (rekomendasi AI).

- **Navigasi Adaptif M3**:

- `Compact (<600dp)`: Navigation Bar (Bawah 80dp, indikator pil aktif).

- `Medium (600-839dp)`: Navigation Rail (Sisi vertikal 80dp, FAB atas + ikon destinasi).

- `Expanded (>=840dp)`: Navigation Drawer (Sidebar permanen 280-360dp).

#### 4. Sintesis Triad Desain: Apple HIG vs Google M3

| Dimensi | Apple Human Interface Guidelines (HIG) | Google Material Design 3 (M3) |

| :--- | :--- | :--- |

| **Filosofi Inti** | Content-First, Deference, Kejelasan | Ekspresif, Adaptif, Personalisasi (Material You) |

| **Kedalaman & Material** | Liquid Glass, Vibrancy, Efek Blur | Tingkatan Tonal Surface Container + Surface Tinting |

| **Model Warna** | Semantic System Colors + Pasangan Dark Mode | Ruang Algoritmik HCT + 5 Palet Tonal Dinamis |

| **Ikonografi** | SF Symbols 6 (Multicolor, Hierarchical) | Material Symbols (Variabel: Weight, Grade, Fill) |

| **Target Sentuh** | Minimal 44×44pt | Disarankan 48×48dp (Minimal 24×24dp) |

| **Kelengkungan Sudut** | Continuous Squircle / Superellipse | Skala Radius Eksplisit (0, 4, 8, 12, 16, 28, 9999px) |

### Protokol Audit HIG

Saat meninjau desain, periksa:

1. **Hierarki**: Apakah aksi utama langsung terlihat jelas? Apakah kontras teks memadai?

2. **Harmoni**: Apakah spacing konsisten (grid 8pt)? Apakah border radius seragam?

3. **Konsistensi**: Apakah elemen interaktif mengikuti konvensi platform?

4. **Aksesibilitas**: Apakah lulus WCAG 2.2? Apakah target sentuh ≥ 24×24px?

5. **Kesesuaian Platform**: Apakah terasa native untuk platform target?

6. **Kebersihan Visual Anti-Slop (`anti-slop`)**: Apakah gradien neon AI ungu/sian generik dilarang? Apakah kelima status interaktif terpenuhi? Apakah konten bebas dari teks pengisi "Lorem Ipsum"? Apakah border-radius seragam dan koheren di seluruh layar?