01
设计气质 DNA
Web3钱包连接开发者rainbow
开发者与区块链钱包之间一座友好、多彩的桥梁。
02
色彩
#3898FFAccent#FFFFFFInk#F5F8FFInk soft#000000BG#1B1C1EBG soft#25292EBG quiet#8B8B8BMutedrgba(245, 248, 255, 0.12)Line采用深色、高对比度基底，搭配充满活力的蓝色和紫色作为强调色，确保可视性。
03
字体
- display
52px · 700 - heading
24px · 600 - body
16px · 400 - caption
13px · 400
所有主要UI文本使用人文无衬线字体 · 代码片段和版本号使用等宽字体 · 标题保持紧凑的字间距
04
间距
4px8px12px16px24px32px48px64px96px128px基于4像素增量的统一垂直韵律，主视觉区域采用充裕的内边距。
05
表面 (圆角 / 阴影 / 边线)
sm · 6px
md · 12px
lg · 24px
pill · 9999px
1px solid rgba(245, 248, 255, 0.12)
rgba(0, 0, 0, 0.4) 0px 8px 24px 0px · rgba(255, 255, 255, 0.12) 0px 0px 0px 1px inset
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
内容密集的章节采用居中的单列布局，背景为全宽深色。
07
动效与交互
100msmicro
125mssmall
5000msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
悬停状态使用平滑的变换和透明度过渡 · 较长的背景元素使用线性透明度淡出
轻微的缩放变换和颜色偏移 · 变换重置以提供即时反馈
08
组件
- button 圆润的胶囊形状，采用纯蓝色背景和白色文字
- card 深色圆角容器，带有细腻边框和内部内边距
- chip 用于版本号或标签的小型圆角徽章
- input 深色背景搭配细微边框，用于代码片段
- hero 居中的大文字，配有突出的行动召唤按钮和背景渐变
09
文案语气与禁用清单
- 语气 技术性、平易近人且自信
- 标题风格 关于功能的加粗、直接陈述
- 按钮文案 清晰的行动导向动词，如'查看文档'和'连接钱包'
- 不要使用浅色主题——截图显示的是严格遵循深色模式的界面。
- 不要使用尖锐的圆角——截图显示的是以圆角和胶囊形状为主的元素。
- 不要使用单一的纯色——截图显示的是充满活力的蓝色和紫色渐变。
- 不要使用宽大、舒展的行高——截图显示的是紧凑的垂直间距。
- 不要使用衬线字体——截图显示所有主要UI文本使用人文无衬线字体。
- 不要使用小而局促的按钮——截图显示的是大尺寸、内边距充裕的交互元素。
- 避免: 避免使用过于企业化或正式的语言
- 避免: 避免在主视觉区域使用不必要的术语
- 避免: 避免用过多选项使界面杂乱
10
包内真实截图
11
System Prompt
RainbowKit是一款用于连接钱包的Web3开发者工具，采用深色、高对比度的界面设计。其特点是黑色背景（#000000）搭配充满活力的蓝色（#3898FF）和紫色渐变作为主要强调色。字体方面，所有UI文本使用人文无衬线字体类别，代码片段使用等宽字体，并采用加粗、紧凑的字阶。关键特性包括圆润的胶囊形状按钮和宽大的间距。关键禁忌：避免使用浅色主题、尖锐圆角或衬线字体。保持界面简洁，专注于开发者体验。