01
设计气质 DNA
区块链开发者工具基础设施web3链上
一个用于构建下一代区块链应用的现代工具包。
02
色彩
#6C00F6Accent#000000Ink#6C7A89Ink soft#F5F7FABG#FFFFFFBG soft#F0F2F5BG quiet#9EABBEMutedrgba(0, 0, 0, 0.05)Line干净、高对比度的界面，用于主要操作的鲜艳紫色强调色。
03
字体
- display
52px · 700 - headline
32px · 700 - body
16px · 400 - label
14px · 500
为标题使用粗体字重以建立强烈的层次感。 · 为大型显示文本保持紧凑的行距。 · 正文应具有适中的行高以保证可读性。
04
间距
4px8px16px20px24px32px40px64px96px以一致的 4px 为基准单位，结合模块化比例用于垂直节奏和组件内边距。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 20px
pill · 999px
1px solid rgba(0, 0, 0, 0.05)
0 2px 1px 0 rgba(0, 0, 0, 0.03) · 0 1px 0 0 rgba(0, 0, 0, 0.05) · 0 0 24px 0 rgba(128, 128, 128, 0.1)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
居中的主区域采用全宽容器，过渡到用于功能板块的多列网格。
07
动效与交互
150msmicro
300mssmall
500msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
hover 状态下细微的透明度和 transform 过渡。 · 所有交互元素平滑的缓动。
交互元素上的细微颜色变化或透明度调整。 · 立即的视觉反馈，带有轻微的缩放或颜色变化。
08
组件
- button 主要按钮为药丸形状，紫色背景；次要按钮为幽灵/轮廓式，带文字。
- card 白色卡片，带有柔和阴影和圆角，用于功能亮点。
- chip 带背景色和文字的圆角标签，用于分类。
- input 具有细微边框和圆角的文本输入框。
- hero 全宽居中板块，包含大号排版和突出的行动号召按钮。
09
文案语气与禁用清单
- 语气 专业、技术性和前瞻性。
- 标题风格 大胆、清晰且以行动为导向的陈述。
- 按钮文案 直接且鼓舞人心，使用诸如“开始构建”和“阅读文档”等动词。
- 不要为标题使用细或轻的字重——截图显示使用粗体字重 700。
- 不要使用宽大的方形容器——截图显示居中的内容区域，带有清晰的边距。
- 不要为原始元素使用尖锐的角——截图显示圆角（药丸按钮、圆角卡片）。
- 不要为主要页面使用深色背景——截图显示浅灰色/近白色的背景。
- 不要为主要行动号召使用细微或柔和的强调色——截图显示鲜艳、高饱和度的紫色。
- 不要使用复杂的多彩渐变作为主要背景——截图显示干净、纯色的板块。
- 避免: 随意的语言
- 避免: 未经解释的过多术语
- 避免: 被动语态
10
包内真实截图
11
System Prompt
一个面向 web3 和区块链的开发者基础设施平台。设计采用干净、浅色的背景，用于主要操作的鲜艳紫色（#6C00F6）强调色。排版方面，标题使用粗体的 grotesque-sans（字重 700），正文使用易读的 humanist-sans。关键注意事项：不要使用细字重，不要避免使用圆角，不要为主要布局使用深色背景。界面强调清晰度、强烈的层次结构以及专业、技术性的语调。