Style Detail · 06 / 15
Built like
an OS.
SF Pro + 厚圆角 + soft shadow + 玻璃 blur·消费品 App / iOS / macOS app 的大厂标准底座·iOS 26 Liquid Glass 的近邻。
Library
+
P
PPVI 克制优雅
B2B 高端 SaaS · 灰阶玻璃
›
A
Apple HIG 产品
SF Pro · iOS · 厚圆角
›
M
Minimalist bento
暖灰 · 产品 landing
›
G
Glassmorphism vibrant
iOS 26 Liquid Glass
›
C Style DNA
For products
that ship to millions.
适用场景 FIT
- iOS / macOS native app
- 消费品 SaaS 主战场
- 需要大厂标准的产品
- 跨平台 PWA / Web App
- Settings / Configuration UI
不适用 UNFIT
- 工业 / 工程控制台
- 编辑型长文 / 媒体
- 童趣 / playful 品牌
- Brutalist / 实验创意
审美关键词
这是 Apple Human Interface Guidelines 的现代实现·**大厂工业标准**·非个人审美。
SF Pro厚圆角 20blue accentsoft shadowblur 20HIG
D Craft Details
The four disciplines
that ship apps.
Palette01 / 04
**冷调白系**·#f5f5f7 + #1d1d1f + SF blue #007aff·渐变是基础设施（hero / button / icon）·**禁用暖米 / pastel**。
#FFFFFF
#F5F5F7
#D2D2D7
#6E6E73
#1D1D1F
#007AFF
#34C759
#FF9500
Typography02 / 04
SF Pro 全系·-apple-system 优先 → SF Pro Display + Text → Inter 兜底·**严格字号 Apple HIG modular scale**·17px body 是基线。
DISPLAY
SF Pro Display 700
BODY
SF Pro Text 400 · 17px
CAPTION
SF Caption · 13px · 0.5px stroke
MONO
SF Mono · code / metadata
Spacing03 / 04
8pt 基础 + Apple HIG 推荐档·section padding 80px·card padding 32px·**圆角 20px 是这风格的灵魂**·不可缩到 8。
Visual Features04 / 04
- border-radius 20px / 12px / 8px 三档
- soft shadow 6 16 0 rgba(0,0,0,0.06)
- blur 20 + saturate(180%) 玻璃 toolbar
- 渐变按钮 180deg blue → blue-strong
- linear gradient hero text fill
- 0.5px hairline border 灰
- segmented control + pill + bottom sheet 三件套
E How to talk to CC
Three phrases.
That’s the API.
Standard
按 apple-hig-product 风格做这个 settings 页 / iOS app / 消费品 landing
Variant
走 apple-hig-product + accent 换 purple #af52de / 大圆角 28 / dark mode 反相
Remix
apple-hig-product 主框 + glassmorphism-vibrant 的 hero 区
CC receives this style ID ·
auto-loads
frontend-design + apple-hig reference · 按本页 4 件 craft 实现·**绝不冒出**·serif / 0 圆角 / 硬阴影 / pastel / brutalist·这些是 apple-hig-product 的 STRICT DON'T。
F Components
The signature three.
SEGMENTED CONTROL
iOS / macOS 视图切换器
iOS PILL BUTTON
渐变 + 100px 圆角 + inset shadow
BOTTOM SHEET
Notifications
Daily digest
Sound
Default
drag handle + sectioned rows + toggle
STANDARD BUTTON
CARD
Apple HIG product
Style detail · 06/15
HERO TYPE
Designed
by Apple
by Apple
In California
G Related Skills
Composable with.
I Similar Styles · 看完也许你还想看
The closest neighbors.
MRR$28,492+12.4%
PPVI 克制优雅
ppvi-elegant
同为refined + 工具型 + 玻璃·区别·个人品味灰阶 OKLCH + B2B SaaS vs 大厂 SF Pro + 渐变 + 消费品
USERS1.2K
+8%
98%
极简 bento
minimalist-bento
同为marketing + 圆角友好·区别·暖灰 bento + Onest + 12px 圆角 vs 冷调 SF Pro + 20px 圆角 + blue
Vibe
Glass
Fluid
彩色玻璃
glassmorphism-vibrant
同为SF Pro + 圆角 + 玻璃·区别·iOS 26 Liquid Glass 多彩玻璃叠加 vs 经典 HIG 单一蓝 accent