Benchmarking Report: Prisma Mobile vs Industry
Date: 12/03/2026
Scope: Gap / Radius / Padding / Height — Mobile density only
So sánh: Apple HIG · Material Design 3 · Uber · Airbnb · Grab
1. Tổng quan hệ thống spacing
| Hệ thống |
Grid Base |
Scale Pattern |
Triết lý |
| Apple HIG |
8pt (convention) |
8, 16, 20, 44 |
"Quiet geometry" — 1 profile, adaptive layout |
| MD3 |
4dp |
4, 8, 12, 16, 24 |
Density scale — 3 modes (default/compact/comfortable) |
| Uber (Base Web) |
4px |
4, 8, 12, 16, 24, 32 |
Incremental ×4 root. Section=24, card=16 |
| Airbnb (DLS) |
8px |
8, 16, 24, 48, 64 |
"Calm & breathable" — generous whitespace |
| Grab |
8pt |
8, 16, 24, 32 |
Minimalist — cross-service consistency |
| Prisma Mobile |
4px |
4, 8, 12, 16, 24, 32, 48 |
3-layer model (micro/comp/layout), 4-tier hierarchy |
[!NOTE]
Prisma có scale đầy đủ nhất (7 bậc vs Airbnb 5, Apple 4). Đây là lợi thế nhưng cũng là rủi ro nếu không enforce đúng.
2. So sánh Padding
Tất cả đơn vị: px. Apple pt ≈ MD3 dp ≈ px @1x
| Context |
Apple |
MD3 |
Uber |
Airbnb |
Grab |
Prisma Mob |
Verdict |
| Screen margin |
16 |
16 |
16 |
16 |
16 |
16 |
✅ Đúng chuẩn |
| Card/Group padding |
16 |
16-24 |
16 |
16-24 |
16 |
16 |
✅ Match Apple/Uber |
| Section padding |
16 |
16-24 |
16-24 |
24 |
16-24 |
16 |
✅ OK |
| Comp padding (button/input) |
16 |
12-16 |
12-16 |
12-16 |
12-16 |
16 |
✅ Match Apple |
| Comp padding small |
8 |
8-12 |
8-12 |
8 |
8 |
8 |
✅ Match |
| Comp padding xsmall |
4 |
4 |
4 |
— |
4 |
4 |
✅ Micro floor |
Padding Verdict: ✅ PASS — Prisma khớp industry
3. So sánh Gap (Stack Gap = vertical spacing)
| Context |
Apple |
MD3 |
Uber |
Airbnb |
Grab |
Prisma Mob |
Verdict |
| Page gap xlarge |
— |
— |
— |
64 |
— |
48 |
⚠️ Thấp hơn Airbnb |
| Page gap large |
32-44 |
24-32 |
32 |
48 |
32 |
32 |
✅ Match Uber/MD3 |
| Page gap default |
24-35 |
16-24 |
24 |
24 |
24 |
24 |
✅ Match industry |
| Page gap small |
16-18 |
16 |
16 |
16 |
16 |
16 |
✅ Match |
| Section gap |
16-18 |
16-20 |
16-24 |
16-24 |
16 |
16 |
✅ Match |
| Group/Card gap |
8-12 |
12-16 |
12-16 |
16 |
12 |
12 |
✅ Match |
| Comp gap (form field) |
8-16 |
8-16 |
8-12 |
8-16 |
8 |
8 |
✅ Match lower bound |
| Comp gap small (label) |
4-8 |
4-8 |
4 |
4-8 |
4 |
4 |
✅ Match |
| Icon-text gap |
4-8 |
4-8 |
4 |
4-8 |
4 |
4 |
✅ Match |
Gap Verdict: ✅ PASS — Tất cả gaps nằm trong industry range
[!TIP]
page.gap-xlarge = 48px thấp hơn Airbnb (64px), nhưng Airbnb thiên về "airy" hơn hầu hết app. 48px đúng chuẩn practical apps (Uber, Grab).
4. So sánh Radius ⭐ Quan trọng
| Context |
Apple |
MD3 |
Uber |
Airbnb |
Grab |
Prisma Mob |
Verdict |
| Page/Sheet |
39 (device) |
— |
— |
20-24 |
16-20 |
16 |
⚠️ Thấp hơn |
| Section |
13 (iOS 26) |
12-16 |
8-16 |
12-16 |
12 |
16 |
✅ OK (lớn hơn Apple) |
| Section small |
10 |
8 |
8 |
8-12 |
8 |
12 |
✅ OK |
| Card/Group |
10-12 |
12 (Medium) |
8-12 |
12-16 |
12 |
12 |
✅ Match Apple/MD3 |
| Group small |
6-8 |
8 (Small) |
6-8 |
8 |
8 |
8 |
✅ Match |
| Button/Input |
10 (iOS 26) |
8-12 |
8-12 |
8-12 |
8 |
12 |
✅ Match (iOS 26 aligned) |
| Capsule (pill) |
9999 |
Full |
— |
— |
— |
9999 |
✅ Match |
| Chip/Badge |
6-8 |
4 (XS) |
4-6 |
4-8 |
— |
— |
🟡 Thiếu token |
Radius Analysis
Prisma radius scale mapping:
page: --radius-md = 16px → Industry: 16-39px ⚠️ Low end
section: --radius-md = 16px → Industry: 12-16px ✅ OK
group: --radius-sm = 12px → Industry: 10-16px ✅ OK
comp: --radius-sm = 12px → Industry: 8-12px ✅ OK (top end, modern)
capsule: 9999px → Industry: 9999px/Full ✅ Match
[!WARNING]
Page radius (16px) thấp nhất trong industry. Apple dùng device-matched (~39pt cho sheets), Airbnb dùng 20-24px. Tuy nhiên, 16px chấp nhận được nếu không dùng sheet/modal toàn màn hình.
5. So sánh Height (Component Interactive)
| Component |
Apple |
MD3 Default |
MD3 Compact |
Uber |
Airbnb |
Prisma Mob |
Verdict |
| Button default |
44 |
40 |
32 |
44 |
44-48 |
44 |
✅ Match Apple |
| Button large |
50 |
48 |
40 |
48-56 |
48-56 |
48 |
✅ Match |
| Button compact |
34 |
36 |
28 |
36 |
36 |
36 |
✅ Match |
| Touch target min |
44 |
48 |
48 |
44 |
44 |
44 |
✅ Apple standard |
Height Verdict: ✅ PASS — Khớp industry
6. Concentric Radius Check
Concentric formula: R_inner = max(0, R_outer - padding)
Page → Section: max(0, 16 - 16) = 0 → actual: 16px ✅ (independent, not nested)
Section → Group: max(0, 16 - 16) = 0 → actual: 12px ✅ (independent)
Group → Comp: max(0, 12 - 16) = 0 → actual: 12px ✅ (OK, comp not nested in group directly)
Concentric radius logic đúng — khi nested, inner radius ≥ concentric minimum.
7. 2× Rule Verification
| Rule Check |
Token A |
Value |
×2 Expected |
Token B |
Actual |
Status |
| comp → comp |
gap-small |
4px |
8px |
gap-default |
8px |
✅ ×2 |
| comp → section |
gap-default |
8px |
16px |
section.gap |
16px |
✅ ×2 |
| group → page |
group.gap |
12px |
24px |
page.gap |
24px |
✅ ×2 |
| padding scale |
pad-xsmall |
4px |
8px |
pad-small |
8px |
✅ ×2 |
| padding scale |
pad-small |
8px |
16px |
pad-default |
16px |
✅ ×2 |
| layout scale |
gap-large |
32px |
64px |
gap-xlarge |
48px |
⚠️ ×1.5 |
[!NOTE]
2× rule passes cho 5/6 checks. gap-xlarge = 48px (×1.5) thay vì 64px (×2) — đây là tradeoff chủ đích: 64px quá lớn cho mobile.
8. Gap Analysis — Prisma thiếu gì?
| # |
Token thiếu |
Industry có |
Priority |
Đề xuất |
| G1 |
comp.radius-small (chip/badge) |
MD3: 4dp, Apple: 6-8pt |
🟡 Medium |
Thêm --comp-radius-small: var(--radius-xs) = 8px |
| G2 |
page.radius-large (sheet/modal) |
Apple: 39pt, Airbnb: 24px |
🟡 Medium |
Thêm --page-radius-large: var(--radius-xl) = 24px |
| G3 |
layout.tab-bar-height |
Apple: 49pt (iOS 17), 68pt (iOS 26) |
🟢 Low |
Optional — component-specific |
| G4 |
layout.nav-bar-height |
Apple: 44pt, MD3: 64dp |
🟢 Low |
Optional — component-specific |
9. Tổng Scorecard
| Metric |
Apple |
MD3 |
Uber |
Airbnb |
Grab |
Score |
| Padding |
✅ |
✅ |
✅ |
✅ |
✅ |
10/10 |
| Gap |
✅ |
✅ |
✅ |
✅ |
✅ |
10/10 |
| Radius |
⚠️ |
✅ |
✅ |
⚠️ |
✅ |
8/10 |
| Height |
✅ |
✅ |
✅ |
✅ |
✅ |
10/10 |
| 2× Rule |
✅ |
— |
— |
— |
— |
9/10 |
| TOTAL |
|
|
|
|
|
47/50 |
10. Phương án tối ưu
Không cần thay đổi (đã tốt)
| Metric |
Lý do |
| Padding |
16px comp default = Apple HIG standard |
| Gap stack |
2× rule chain: 4→8→16→24→32 hoạt động tốt |
| Height |
44/48/36 = đúng Apple + MD3 |
| Touch target |
44px = industry minimum |
| Capsule radius |
9999px = iOS 26 ready |
Nên thêm (optional nhưng improve completeness)
| # |
Action |
Effort |
Impact |
| 1 |
Thêm --comp-radius-small = var(--radius-xs) (8px) |
Tiny |
Chip/badge radius — MD3 có, Prisma thiếu |
| 2 |
Thêm --page-radius-large = var(--radius-xl) (24px) |
Tiny |
Sheet/modal full — closer to Airbnb/Apple |
Xem xét (tùy use case)
| # |
Action |
Trade-off |
| 3 |
Nâng page.radius-default 16→20px |
Closer to Airbnb (20-24), nhưng 16px OK cho non-sheet uses |
| 4 |
Thêm page.stack-gap-xlarge = 64px (web only) |
Match Airbnb, nhưng 48px đủ cho mobile. Web có sẵn 64px |
[!IMPORTANT]
Kết luận chính: Prisma mobile spacing đã rất tốt (47/50). Chỉ cần 2 token nhỏ bổ sung (comp.radius-small, page.radius-large) là đạt completeness 100% so với tất cả 5 hệ thống.