精选 · 开放 · 免费

Rainbowkit

为Web3应用连接钱包的最佳方式。

01

设计气质 DNA

开发者与区块链钱包之间一座友好、多彩的桥梁。

02

色彩

采用深色、高对比度基底，搭配充满活力的蓝色和紫色作为强调色，确保可视性。

03

字体

humanist-sans · monospace

• display52px · 700
• heading24px · 600
• body16px · 400
• caption13px · 400

所有主要UI文本使用人文无衬线字体 · 代码片段和版本号使用等宽字体 · 标题保持紧凑的字间距

04

间距

基于4像素增量的统一垂直韵律，主视觉区域采用充裕的内边距。

05

表面 (圆角 / 阴影 / 边线)

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

布局

内容密集的章节采用居中的单列布局，背景为全宽深色。

07

动效与交互

悬停状态使用平滑的变换和透明度过渡 · 较长的背景元素使用线性透明度淡出

轻微的缩放变换和颜色偏移 · 变换重置以提供即时反馈

08

组件

• button 圆润的胶囊形状，采用纯蓝色背景和白色文字
• card 深色圆角容器，带有细腻边框和内部内边距
• chip 用于版本号或标签的小型圆角徽章
• input 深色背景搭配细微边框，用于代码片段
• hero 居中的大文字，配有突出的行动召唤按钮和背景渐变

09

文案语气与禁用清单

• 语气 技术性、平易近人且自信
• 标题风格 关于功能的加粗、直接陈述
• 按钮文案 清晰的行动导向动词，如'查看文档'和'连接钱包'

• 不要使用浅色主题——截图显示的是严格遵循深色模式的界面。
• 不要使用尖锐的圆角——截图显示的是以圆角和胶囊形状为主的元素。
• 不要使用单一的纯色——截图显示的是充满活力的蓝色和紫色渐变。
• 不要使用宽大、舒展的行高——截图显示的是紧凑的垂直间距。
• 不要使用衬线字体——截图显示所有主要UI文本使用人文无衬线字体。
• 不要使用小而局促的按钮——截图显示的是大尺寸、内边距充裕的交互元素。
• 避免: 避免使用过于企业化或正式的语言
• 避免: 避免在主视觉区域使用不必要的术语
• 避免: 避免用过多选项使界面杂乱

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko