This demo still renders the iOS 26 visual set. The iOS 27 token layer
(transparency slider, darkened edge, layered app icons) ships in
@ios27_design_system/tokens — the demo rebuild is on the roadmap.
iOS 27 Design System
Liquid Glass tokens, components, and layouts — live preview
79 Color Tokens11 Type Styles5 Glass Variants31 Components48 Pages
System Colors
12 accent colors with automatic Light/Dark adaptation
Accent Colors
Red#ff383c
Orange#ff8d28
Yellow#ffcc00
Green#34c759
Mint#00c8b3
Teal#00c3d0
Cyan#00c0e8
Blue#0088ff
Indigo#6155f5
Purple#cb30e0
Pink#ff2d55
Brown#ac7f5e
Label Hierarchy
Primary Label--label-primary
Secondary Label--label-secondary (60%)
Tertiary Label--label-tertiary (30%)
Quaternary Label--label-quaternary (18%)
Backgrounds & Fills
BG Primary
BG Secondary
BG Tertiary
Fill Primary
Fill Secondary
Fill Tertiary
Gray
Gray 3
Gray 5
Typography
SF Pro type scale — 11 styles with emphasized, italic, and loose modifiers
Large TitleAa34px / 700
Title 1Aa28px / 400
Title 2Aa22px / 400
Title 3Aa20px / 400
HeadlineAa17px / 600
BodyThe quick brown fox17px / 400
CalloutThe quick brown fox16px / 400
SubheadlineThe quick brown fox15px / 400
FootnoteThe quick brown fox jumps over13px / 400
Caption 1The quick brown fox jumps over the lazy dog12px / 400
Caption 2The quick brown fox jumps over the lazy dog11px / 400
Modifiers
Regular — The quick brown fox
Emphasized — The quick brown fox
Italic — The quick brown fox
Emphasized Italic — The quick brown fox
Loose Leading — For multiline text with +2px line height for better readability in longer paragraphs.
Liquid Glass & Materials
The defining visual feature of iOS 27 — frosted blur, refraction, depth shadow
●Home
▲Search
◼Library
★Profile
Tab Bar — liquid-glass-large
blur: 40px / radius: 14px / frost: 70%
‹Settings
⋯
Toolbar — liquid-glass-large
Height: 44px / spring: gentle
W
Wi-Fi
Connected
›
B
Bluetooth
›
A
Airplane Mode
›
List — liquid-glass-medium
blur: 40px / radius: 12px / frost: 60%
Background Materials
Chrome50px blur / 75%
Thick100px blur / 84%
Regular100px blur / 60%
Thin100px blur / 40%
Ultrathin100px blur / 3%
Glass Variants
Large Toolbars, Tab Bars
Medium FAB, Grouped
Small Icon buttons
Primary Blue tinted
Clear Subtle overlay
Spacing & Layout
4px base grid — Safe areas, content insets, component heights
Spacing Scale
--space-14px
--space-28px
--space-312px
--space-416px
--space-624px
--space-832px
--space-1248px
--space-1664px
Corner Radius
0none
4xs
8sm
10md
12lg
16xl
20xxl
fullpill
Component Heights
44pt
Toolbar / Nav Bar
49pt
Tab Bar
44pt
List Row
44pt
Touch Target
54pt
Status Bar
Components
31 component specifications — interactive demos with actual design tokens