01
设计气质 DNA
AI客户体验企业智能体平台
AI 智能体领域的高端咨询机构,在技术深度与平易近人的以人为本叙事间取得平衡。
02
色彩
#302E2DInk#716F6CInk soft#FFFFFFBG#F6F5F3BG soft#E4E0DCMutedrgba(228, 224, 220, 1)Line温暖中性色系:以暖灰与大地色调为基底,依靠高品质摄影创造视觉吸引力,而非使用合成强调色。
03
字体
- display
56px · 500 - headline
44px · 400 - subhead
24px · 400 - body
16px · 400 - caption
14px · 400
大型展示文本采用紧凑字距(-1.3px 至 -0.38px)营造精致的编辑感。 · 几乎所有文本保持严格的 400 字重;仅在特殊强调处极少量使用 500 字重。 · 正文需保证充足的行高(1.4-1.5)以确保可读性。
04
间距
4px8px12px16px24px32px48px64px80px宽松且结构化,主要区块使用大留白(80px),内部间距采用 8/16/24px 的一致增量,打造清爽通透的布局。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 16px
pill · 999px
1px solid rgb(228, 224, 220)
0px 28px 34px 0px rgba(15, 79, 138, 0.15) · 0px 75px 63px 0px rgba(15, 79, 138, 0.15)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
响应式居中布局,设有最大宽度容器,从全出血编辑式首屏过渡至仪表盘的多列结构化界面。
07
动效与交互
220msmicro
250mssmall
500msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
颜色、背景色与透明度的标准过渡(0.25s) · 滤镜等复杂属性使用稍长过渡(0.5s) · 交互元素采用微妙变换效果
按钮、导航链接等交互元素实现平滑的颜色与背景过渡。 · 主要行动按钮采用微妙的变换(缩放/位移)或透明度变化。
08
组件
- button 药丸形(999px 圆角),白色背景搭配深色墨褐文字,次要操作采用微妙描边样式。
- card 简洁容器,16px 圆角,柔和背景上带有 1px 细微边框。
- chip 极简化设计,通常仅使用文字配合微妙的背景或边框处理。
- input 简洁输入框,带细微边框,常搭配小型图标及 4px/8px 内边距。
- hero 全视口摄影背景,搭配左对齐的大号展示字体与单个高对比度药丸形行动按钮。
09
文案语气与禁用清单
- 语气 自信、清晰、平易近人。
- 标题风格 简短有力的陈述,清晰传达价值主张。
- 按钮文案 直接且具行动导向,常使用“了解更多”或“登录”等单一表述。
- 避免使用鲜艳的合成强调色——设计系统基于暖灰与大地色摄影色调。
- 避免大标题使用松散字距——需采用紧凑字距(如 -1.3px)营造精致编辑感。
- 避免正文使用粗重字重——几乎全部采用 400 字重。
- 避免界面使用厚重阴影或边框——仅使用 1px 细微边框与极简阴影。
- 避免按钮使用尖锐几何圆角——应采用完全圆润的药丸形(999px)。
- 避免界面主要依靠色彩进行强调——应依赖字体比例与间距体系。
- 避免: 脱离上下文的术语堆砌
- 避免: 激进或过度热情的营销话术
- 避免: 干扰核心信息的拥挤界面
- 避免: 高对比度霓虹色或合成强调色
10
包内真实截图













11
System Prompt
Sierra 是一个高端 AI 智能体平台,通过以人为本的编辑视角定位自身。其视觉 DNA 体现为温暖的中性色系统(墨褐 #302E2D、柔和背景 #F6F5F3),让高质量摄影承担主要情感表达。字体采用精致的 grotesque-sans,在大号展示文本上使用紧凑字距,营造清爽高级的质感。界面组件简洁,采用药丸形按钮与细微边框。关键禁忌:避免合成强调色、标题保持紧凑字距、正文使用轻字重、保持宽松通透的间距。整体营造可信赖、专业且亲切的感受。
