Minimal style · 01
Apple Minimal
苹果极简
A calm, premium interface language built from generous whitespace and precise hierarchy.
Live preview
See it in context.
Good morning, Sam.
Here’s what needs your attention today.
Style characteristics
- Large white space
- Clean typography
- Subtle borders
- Soft shadows
- Restrained color
- Clear hierarchy
Best for
Avoid for
Build direction
Prompt for your agent.
Chinese Prompt
Apple Minimal / 苹果极简
VISUAL DIRECTION
设计克制、安静、高级且精确的界面。强调清晰层级与大量合理留白。
LAYOUT
- 使用清晰的信息层级和一致的页面结构
- Desktop 使用多列布局；Tablet 减少列数；Mobile 自动转为单列
- 保持主要操作、搜索、数据卡片和内容列表在合理视线内
COLOR
- Background: #FFFFFF / #F7F7F8
- Text: #111111；Border: #E5E5E5
- Accent 只使用少量低饱和冷色
TYPOGRAPHY
- 使用现代 Sans Serif
- 标题有明确粗细对比；正文舒适易读
- 不使用装饰性字体
COMPONENTS
- Button 简洁精确；Input 保持安静
- Card 不使用厚重装饰；Navigation 极简
BORDER & RADIUS
- 1px subtle gray border
- Radius: 14–18px；不要统一使用巨大圆角
SHADOW
- 只使用非常轻的 diffuse shadow，帮助建立层级
SPACING
- 使用一致的 4px / 8px spacing system
- 让模块之间有明确节奏，避免无意义的留白或拥挤
INTERACTION
- 使用 150–200ms transition
- Hover 只改变必要的颜色、边框、阴影或位置
- Focus 状态清晰；按钮和输入区域可触控
RESPONSIVE
- Desktop 保持高效信息密度
- Tablet 合理减少列数
- Mobile 单列重排，禁止横向溢出
AVOID
- Excessive Gradients
- Glow / Glass Effects / Thick Outline
- Heavy Shadow / Gradient Text / Emoji Icons
- Crowded Cards / Excessive Animation
English Prompt
Apple Minimal / 苹果极简
VISUAL DIRECTION
设计克制、安静、高级且精确的界面。强调清晰层级与大量合理留白。
LAYOUT
- Use a clear information hierarchy and consistent page structure
- Use multi-column desktop layouts; reduce columns on tablet; stack on mobile
- Keep primary actions, search, data cards, and content lists within a useful first view
COLOR
- Background: #FFFFFF / #F7F7F8
- Text: #111111；Border: #E5E5E5
- Accent 只使用少量低饱和冷色
TYPOGRAPHY
- 使用现代 Sans Serif
- 标题有明确粗细对比；正文舒适易读
- 不使用装饰性字体
COMPONENTS
- Button 简洁精确；Input 保持安静
- Card 不使用厚重装饰；Navigation 极简
BORDER & RADIUS
- 1px subtle gray border
- Radius: 14–18px；不要统一使用巨大圆角
SHADOW
- 只使用非常轻的 diffuse shadow，帮助建立层级
SPACING
- Use a consistent 4px / 8px spacing system
- Give modules deliberate rhythm; avoid meaningless whitespace or crowding
INTERACTION
- Use 150–200ms transitions
- Change only necessary color, border, shadow, or position on hover
- Keep focus states clear and controls touch-friendly
RESPONSIVE
- Preserve efficient information density on desktop
- Reduce columns thoughtfully on tablet
- Reflow to one column on mobile; never allow horizontal overflow
AVOID
- Excessive Gradients
- Glow / Glass Effects / Thick Outline
- Heavy Shadow / Gradient Text / Emoji Icons
- Crowded Cards / Excessive Animation