01
设计气质 DNA
专业令人安心高端极简深色
具有深邃、氛围感美学的高端保险或金融科技平台
02
色彩
#FFFFFFInk#0A0A0ABG#6B7280Mutedrgba(255,255,255,0.1)Line采用深色模式搭配白色文字,以实现最大对比度和高端感,并运用微妙的暖色调径向渐变增加层次
03
字体
- display
56px · 400 - body
14px · 400
标志使用衬线字体 · 导航使用简洁的无衬线字体 · 'COVER GENIUS' 品牌名称采用全大写
04
间距
4px8px16px24px32px48px64px96px导航元素周围使用充裕的内边距,维持清晰的视觉层次
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 6px
lg · 8px
pill · 999px
演示按钮带有微妙的1像素边框
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
全宽英雄区域,包含居中的标志和导航栏
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
导航链接产生微妙的透明度变化或颜色过渡 · 标准的按钮点击反馈
08
组件
- button 带微妙边框的轮廓矩形按钮
- hero 带有暖色调径向渐变背景的深色全屏区域
09
文案语气与禁用清单
- 语气 专业且令人安心
- 标题风格 品牌名称采用衬线字体,其他文本使用简洁的无衬线字体
- 按钮文案 带有清晰'Demo'标签的轮廓按钮
- 避免使用明亮、饱和的颜色——截图显示为深沉、柔和的配色搭配白色文字
- 避免添加不必要的视觉元素——截图显示为极其简约的设计
- 避免使用圆润、俏皮的UI元素——截图显示为微妙、专业的圆角
- 避免创建复杂的布局——截图显示为充裕的留白和清晰的层次
- 避免使用装饰性字体——截图显示为简洁、功能性的字体
- 避免在渐变之外添加复杂的背景图案——截图显示为简单的径向渐变
- 避免: 俏皮语言
- 避免: 过度动画
- 避免: 杂乱布局
11
System Prompt
这是一个为Cover Genius旗下Clyde打造的高端暗色模式金融科技网站。设计采用近乎纯黑的背景(#0A0A0A)搭配白色文字以实现高对比度。字体将过渡衬线字体用于品牌标志,并搭配简洁的人文主义无衬线字体用于导航。英雄区域包含一个微妙的暖色调径向渐变(琥珀/金色调),逐渐过渡至黑色。关键颜色为背景色#0A0A0A、文字色#FFFFFF以及#6B7280的柔和元素。布局极其简约,间距充裕。关键禁忌:避免使用明亮颜色、避免添加装饰元素、避免使用俏皮的UI组件、避免创建复杂布局、避免使用华丽的字体、避免在渐变之外添加背景图案。