Pass — Primary text on light glass: ratio ≥ 4.5:1. Use dark text (#0F0F1A) only.
Pass — Icons/secondary text on glass: ratio ≥ 3:1 minimum.
Caution — Heavy glass over complex imagery: test against actual backgrounds.
Fail — White text on light glass surfaces: always use dark text or switch tint.
Buttons — all variants
Inputs and forms
Password must be at least 8 characters
Cards — glass and solid variants
JD
Glass card
Blurs the background
$12,480
+18.4% this month
MK
Solid card
Opaque surface
94.2%
↑ uptime SLA
Tab bar — iOS style
⌂Home
◎Explore
♡Saved
◉Profile
Modal / dialog
⚠️
Delete account?
This action cannot be undone. All your data will be permanently removed.
List items
🔔
Notifications
Badges, sounds, banners
›
🔒
Privacy & Security
Face ID, permissions
›
☁️
iCloud Sync
Last synced 2 min ago
›
Color tokens — semantic
color.primary
#5B8CFF
color.destructive
#FF5C5C
color.success
#34C98A
color.warning
#FFA532
glass.light
rgba(255,255,255,0.55)
glass.medium
rgba(255,255,255,0.28)
glass.heavy
rgba(255,255,255,0.10)
Spacing — 8pt base grid
space.1
8px
space.2
16px
space.3
24px
space.4
32px
space.6
48px
space.8
64px
Typography scale
Display / 28px
Title Large / 22px
Headline / 17px
Body / 15px regular
Subheadline / 13px secondary
Caption / 11px tertiary
Elevation system
Level 0 — flat (no blur, no shadow)
Level 1 — cards, inputs (blur 12px)
Level 2 — nav bars, sheets (blur 24px)
Level 3 — modals, overlays (blur 40px)
Home screen pattern — iOS
Good morning,
Alex ✦
AK
$4.2k
Balance
12
Pending
Recent activity
Coffee ×3
Today, 9:14am
-$14.50
↑Send
↓Receive
⇆Transfer
+More
Safe area respected · Dynamic Island compatible
SF Pro / 8pt grid · Auto layout throughout
Interactive states — buttons
Hover the buttons to see state transitions
Input states
This field has an error
Semantic status indicators
✓ Success
⚠ Warning
✕ Error
ℹ Info
Platform adaptation notes
iOS: UIBlurEffect (.systemUltraThinMaterial) → Glass Light. Use .systemMaterial for Medium. SwiftUI: .ultraThinMaterial modifier.
Android: Material 3 Surface with tonalElevation. Align glass tints to M3 primary containers. RenderEffect blur for API 31+. Tab bar → NavigationBar component.