精选 · 开放 · 免费
App Forhims
专为现代远程医疗品牌打造的精致、柔焦美学,平衡了高端亲和力与临床可信度。
ConsumerProductCleanCalmRefined
01
设计气质 DNA
现代平易近人极简值得信赖刚柔并济
一家高端健康精品店,兼具临床感与舒适感。
02
色彩
#5A5AE6Accent
#1A1A1AInk
#4A4A4AInk soft
#FFFFFFBG
#F8F8FABG soft
#F2F2F5BG quiet
#9A9AAEMuted
rgba(0, 0, 0, 0.06)Line
洁净的白色空间为布局奠定基础,柔和渐变和独特的靛蓝强调色在不破坏宁静氛围的前提下,提供了视觉趣味。
03
字体
transitional-serif · humanist-sans · monospace
- display
64px · 500 - heading-1
32px · 500
标题使用过渡衬线字体,营造高端、编辑感。 · 正文和界面元素使用清晰的人文主义无衬线字体,确保可读性。 · 展示衬线体与正文无衬线体之间的高对比度,营造出现代、平易近人的基调。
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
一致、充裕的间距强化了布局的宁静、整洁和高端感。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 16px
pill · 999px
使用细微、近乎不可见的边框来定义容器,避免增加视觉重量。
0 4px 24px rgba(0, 0, 0, 0.06)
06
布局
1200container
12columns
24pxgutter
768 / 1024breakpoints
移动端采用居中单栏布局,桌面端扩展至最大宽度容器,保持清晰的垂直轴线。
07
动效与交互
150msmicro
300mssmall
500msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
内容加载时采用平滑淡入效果。 · 滚动时使用细微视差效果。
交互元素上的细微颜色变化或阴影提升。 · 通过轻微缩放或颜色变化提供即时视觉反馈。
08
组件
- button 胶囊形按钮,采用纯色背景和清晰排版。
- card 卡片采用柔和圆角和细微投影,通过图像和排版而非厚重边框来呈现。
- chip 胶囊形分类标签,采用细微背景色用于筛选。
- input 简洁、圆角的输入框,带有细微边框和充足内边距。
- hero 大型居中标题,搭配醒目的设备模型和柔和渐变背景。
09
文案语气与禁用清单
- 语气 自信、平易近人、令人安心。
- 标题风格 简短、有力、以收益为导向(例如,“Total care. Totally different.”)。
- 按钮文案 直接、以行动为导向、低摩擦(例如,“Download now”)。
- 不要使用刺眼、明亮的原色——截图显示的是带有柔和靛蓝强调色的柔和调色板。
- 不要使用强烈的投影或厚重边框——截图显示的是细微阴影和近乎不可见的线条。
- 不要在正文或次要界面元素上使用全大写——截图显示的是标准句子大小写。
- 不要用过多元素挤满布局——截图显示的是充足的留白和单一焦点。
- 不要在交互元素上使用尖锐的方形圆角——截图显示的是圆角和胶囊形按钮。
- 不要对所有文字都只使用无衬线字体——截图显示主标题使用了独特的衬线字体。
- 避免: 临床术语
- 避免: 过于激进的销售语言
- 避免: 杂乱的视觉元素
11
System Prompt
这是一个高端远程医疗和消费者健康品牌(hims & hers)。设计采用洁净的白色背景,搭配柔和渐变和柔和靛蓝强调色(#5A5AE6)。排版上,标题使用过渡衬线体,界面和正文使用人文主义无衬线体,形成对比。布局宽敞、宁静且高度聚焦,围绕一个移动应用界面模型展开。关键注意事项:避免使用刺眼的霓虹色;避免使用厚重投影或边框;不要挤满界面;避免正文全大写;不要在按钮或卡片上使用方形圆角;不要对所有文字都只使用无衬线字体。
把这份品味接进你的 Agent
把这套设计的机器可读规格——色彩、字体、动效,整套 DNA——直接交给你的 AI Agent。
OpenDesign 技能 ↗
en · zh-CN · zh-TW · ja · ko