Creative style · 29
Playful Geometry
趣味几何
A friendly, confident visual system that uses shape and asymmetry without becoming childish.
Live preview
See it in context.
Design with intent.
A focused space for what matters next.
Style characteristics
- Color blocks
- Circles and shapes
- Asymmetric layout
- Friendly UI
- Creative composition
Best for
Avoid for
Build direction
Prompt for your agent.
Chinese Prompt
Playful Geometry / 趣味几何
VISUAL DIRECTION
设计 趣味几何 风格界面，重点体现：Color blocks、Circles and shapes、Asymmetric layout、Friendly UI、Creative composition。让风格服务于真实可用的产品任务。
LAYOUT
- 使用清晰的信息层级和一致的页面结构
- Desktop 使用多列布局；Tablet 减少列数；Mobile 自动转为单列
- 保持主要操作、搜索、数据卡片和内容列表在合理视线内
COLOR
- 依据 Playful Geometry 的视觉语言建立明确主色、表面与文本对比
- Accent 只用于关键状态与动作，不取代信息层级
TYPOGRAPHY
- 使用与 Playful Geometry 一致的字体尺度、字重与阅读节奏
- 用排版而不是装饰建立层级
COMPONENTS
- Navigation、CTA、Search、Data Card、List 与 Status 都应体现 Playful Geometry 的组件语言
- 保持控件可读、可点击、可键盘操作
BORDER & RADIUS
- Border、Radius 和分隔方式应表达 Playful Geometry 的结构特征
- 不使用与风格冲突的默认圆角或描边
SHADOW
- 阴影、层次与材质只在 Playful Geometry 需要时出现
- 让深度帮助内容，不制造无意义装饰
SPACING
- 使用一致的 4px / 8px spacing system
- 让模块之间有明确节奏，避免无意义的留白或拥挤
INTERACTION
- 使用 150–200ms transition
- Hover 只改变必要的颜色、边框、阴影或位置
- Focus 状态清晰；按钮和输入区域可触控
RESPONSIVE
- Desktop 保持高效信息密度
- Tablet 合理减少列数
- Mobile 单列重排，禁止横向溢出
AVOID
- 不要把 Playful Geometry 简化为只换配色
- Avoid generic dashboard chrome when it conflicts with the style
- Avoid low contrast, unreadable text, and excessive animation
English Prompt
Playful Geometry / 趣味几何
VISUAL DIRECTION
Design a Playful Geometry interface centered on Color blocks, Circles and shapes, Asymmetric layout, Friendly UI, Creative composition. Make the visual language serve a real, usable product task.
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
- 依据 Playful Geometry 的视觉语言建立明确主色、表面与文本对比
- Accent 只用于关键状态与动作，不取代信息层级
TYPOGRAPHY
- 使用与 Playful Geometry 一致的字体尺度、字重与阅读节奏
- 用排版而不是装饰建立层级
COMPONENTS
- Navigation、CTA、Search、Data Card、List 与 Status 都应体现 Playful Geometry 的组件语言
- 保持控件可读、可点击、可键盘操作
BORDER & RADIUS
- Border、Radius 和分隔方式应表达 Playful Geometry 的结构特征
- 不使用与风格冲突的默认圆角或描边
SHADOW
- 阴影、层次与材质只在 Playful Geometry 需要时出现
- 让深度帮助内容，不制造无意义装饰
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
- 不要把 Playful Geometry 简化为只换配色
- Avoid generic dashboard chrome when it conflicts with the style
- Avoid low contrast, unreadable text, and excessive animation