Wavult Group · Design System

Apple iPhone
Native

iOS 18 / iOS 26 Liquid Glass design language.
Every pixel, every spring, every blur — exactly Apple.

Liquid Glass · iOS 26
✦ Liquid Glass
System Colors
Blue
Green
Indigo
Orange
Pink
Purple
Red
Teal
Yellow
Mint
Gray
Gray 3
Typography · SF Pro
Large Title · 34/41 · 400
Large Title
Title 1 · 28/34 · 400
Title 1
Title 2 · 22/28 · 400
Title 2
Title 3 · 20/25 · 400
Title 3
Headline · 17/22 · 600
Headline
Body · 17/22 · 400
Body text looks like this
Callout · 16/21 · 400
Callout text
Subheadline · 15/20 · 400
Subheadline
Footnote · 13/18 · 400
Footnote text
Caption 1 · 12/16
Caption 1
Buttons — 5 HIG Styles
Grouped List · UITableView Style
Settings
⚙️
General
🔔
Notifications
Banners, sounds, badges
3 new
🔒
Privacy & Security
Tap to configure settings for this account.
Preferences
🌙
Dark Mode
🔔
Push Notifications
Segmented Control
Search Bar
🔍
Text Fields
🔍
Stats · Widget Style
Revenue
12.4M
↑ 8.2%
Users
84.2K
↑ 12%
Churn
2.1%
↑ 0.3%
NPS
72
↑ 5pts
Cards · 13px squircle
Total Revenue
kr 4.2M
↑ 14.2% this month
Active Contracts
128
↑ 3 new this week
Cash Position
kr 8.9M
Across 3 accounts
Pipeline
kr 22M
Expected Q2 2026
Chips & Badges
✓ Active ● Live ⚠ Warning ✕ Failed ★ Premium Neutral
3 12 New
Progress Bar
Q2 Revenue Goal — 73%
Compliance Score — 91%
Budget Spent — 88%
SF Symbols · Web Rendering
house.fill
chart.bar
person.fill
gear
bell.fill
creditcard
envelope
calendar
magnifyingglass
plus
trash
checkmark.circle.fill
line.uptrend
network
dollarsign
building.2
Spring Physics · Press to animate
Default
Bouncy
Snappy
Alerts & Sheets
Usage
<!-- Include design system --> <link rel="stylesheet" href="/_design-system/apple-native/tokens.css"> <link rel="stylesheet" href="/_design-system/apple-native/components.css"> <link rel="stylesheet" href="/_design-system/apple-native/icons.css"> <script src="/_design-system/apple-native/icons.js"></script> <script src="/_design-system/apple-native/interactions.js"></script> <!-- iOS List --> <div class="ios-list"> <div class="ios-list-item"> <div class="ios-list-icon ios-list-icon--blue">⚙️</div> <div class="ios-list-content"> <div class="ios-list-title">Settings</div> </div> <svg class="ios-list-chevron" viewBox="0 0 24 24"> <polyline points="9 6 15 12 9 18"/> </svg> </div> </div> <!-- Dark mode toggle --> <button data-theme-toggle>🌙</button>
Navigation Bar
Dashboard
Good morning, Erik 👋
Monday, May 4 · Wavult Group
Apple Native Design System · Wavult Group · iOS 26 Liquid Glass
EXAKT APPLE IPHONE NATIVE