Hig

---
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: "vibes-plug-swarm"
---

# 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 `brainstorming`, `zero-to-prod-orchestrator`, and `project-context-mapper` 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?
5. **Platform fit**: Does it feel native to its target platform?

---

<a name="bahasa-indonesia"></a>
## Bahasa Indonesia

### Integrasi Orkestrasi
Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `project-context-mapper` 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
Saat meninjau desain, periksa: Hierarki (apakah aksi utama langsung terlihat jelas?), Harmoni (apakah spacing konsisten?), Konsistensi (apakah elemen interaktif mengikuti konvensi platform?), Aksesibilitas (lulus WCAG 2.2? Target sentuh ≥ 24×24px?), dan Kesesuaian Platform (apakah terasa native untuk platform target?).