01
设计气质 DNA
心理健康临床诊疗企业级平台健康福祉远程治疗
专业可信又平易近人的临床级健康平台
02
色彩
#2E3FD2Accent#302625Ink#6C6564Ink soft#FFFFFFBG#FEF8F4BG soft#EFE0D9BG quietrgba(48, 38, 37, 0.1)Line采用洁净白色背景搭配温暖柔和的辅助色，深色文字确保可读性，以独特的深邃蓝作为主操作色
03
字体
- display
48px · 100 - heading
18px · 100 - body
14px · 100 - caption
12px · 100
展示型标题使用 Super 衬线字体家族，采用极细字重 · 正文及界面文字使用 Surt 无衬线字体家族 · 导航和按钮标签采用全大写样式 · 大号文字使用紧凑字距，小号文字适当放宽字距
04
间距
4px8px16px24px32px40px48px56px64px85px96px主要板块间保持统一的40px水平间距，段落间距采用52-56px垂直留白
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 0px
lg · 0px
pill · 9999px
极简边框设计，通过背景色块实现视觉分隔而非线条边框
0 4px 12px rgba(0, 0, 0, 0.15) · 0 4px 6px -1px rgba(0, 0, 0, 0.1) · 0 2px 4px -2px rgba(0, 0, 0, 0.1)
06
布局
1280container
12columns
40pxgutter
768 / 1024breakpoints
居中的主视觉内容搭配全宽彩色区块，内容块采用左对齐布局并配以宽裕内边距
07
动效与交互
150msmicro
250mssmall
500msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
交互元素的平滑颜色与背景过渡效果 · 悬停状态的变换与透明度过渡 · 装饰性元素的线性填充与描边过渡
按钮背景色变化，链接文字装饰效果改变 · 通过颜色过渡提供即时视觉反馈
08
组件
- button 主操作按钮采用圆角矩形实心填充样式，文字全大写并收紧字距
- card 采用温暖柔和背景色与细腻阴影的简洁内容卡片，适用于手机模型展示
- chip 文字型标签导航，激活状态显示下划线指示器
- input 极简表单输入框，采用细微边框与宽裕内边距
- hero 全宽居中主视觉区，搭配衬线展示标题、描述性正文和醒目的操作按钮
09
文案语气与禁用清单
- 语气 专业且易亲近，体现临床专长与人性化可及性
- 标题风格 清晰明确、强调价值的表述，突出全面关怀与简约理念
- 按钮文案 使用'预约咨询'等直接行动动词，采用大写样式强化视觉重点
- 避免为主区域使用深色背景——界面显示以白色和温暖柔和色调为主
- 避免为展示型文字使用粗体或厚重字重——标题采用极细字重（100）
- 避免按钮使用小圆角——界面显示采用完整圆角（9999px）
- 避免使用冷色调辅助色——主操作色为深邃蓝（#2E3FD2），避免明亮或霓虹色
- 避免导航过于拥挤——菜单项保持宽裕间距并建立清晰层级
- 避免背景使用复杂渐变——采用纯色区块与微妙暖色调
- 避免无序混用衬线与无衬线字体——仅展示标题使用衬线字体，其余采用无衬线
- 避免: 过度随意的语言
- 避免: 缺乏语境的专业术语
- 避免: 激进的推销语气
- 避免: 复杂的医学术语
11
System Prompt
这是一个提供企业级心理健康解决方案的医疗健康SaaS平台（Koa Health）。设计基因围绕临床可信度与人性化温暖展开。主色调：白色（#FFFFFF）背景，温暖柔和（#FEF8F4）与柔和暖调（#EFE0D9）辅助色块，深墨色（#302625）文字，独特的蓝色（#2E3FD2）操作按钮。排版采用轻盈的衬线字体（didone-serif）作为展示标题，人文无衬线字体（humanist-sans）作为正文。关键禁忌：绝不可使用深色模式或厚重背景，避免粗体展示型排版，保持充足留白，使用圆角矩形按钮而非直角矩形，导航保持简洁稀疏且间距合理，避免复杂渐变。设计通过克制体现临床可信度，通过柔和的色彩点缀与衬线字体传递人文温度。过渡动画统一采用 cubic-bezier 缓动曲线以保持专业质感。