01
设计气质 DNA
区块链高性能金融基础设施速度规模化
一个高频交易终端与科幻基础设施的结合
02
色彩
#D06BF8Accent#FFFFFFInkrgba(255,255,255,0.70)Ink soft#0B0A10BG#121212BG soft#848895Mutedrgba(255,255,255,0.10)Line深邃、绝对的深色背景,搭配鲜明的紫色高光和纯净的白色排版,以实现最大可读性和未来感。
03
字体
- display
80px · 400 - heading
40px · 500 - body
21px · 400 - small
16px · 400
所有标题和正文使用几何无衬线字体,以保持连贯的技术感。 · 为大型展示文字应用紧凑的负字间距,以增强视觉冲击力。 · 确保等宽字体严格仅用于代码片段或技术数据展示。
04
间距
4px8px16px24px32px48px64px96px以4px为基础单位,搭配充足留白,让深色界面得以呼吸。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 12px
lg · 16px
pill · 9999px
1px solid rgba(255,255,255,0.10)
0 1px 2px rgba(0,0,0,0.05) · rgb(54, 27, 64) 0px -4px 12px 0px inset · rgb(195, 124, 224) 0px 1px 0px 0px inset
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
全宽深色主视觉区域,配以用于内容和合作伙伴展示的12列网格。
07
动效与交互
220msmicro
300mssmall
500msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
悬停时微妙的背景颜色过渡 · 交互元素的平滑颜色和边框颜色过渡 · 按钮交互的缩放变换
微妙的背景颜色变化和图标变换。 · 主要操作按钮有轻微的缩小效果。
08
组件
- button 主要按钮为药丸形状,白色背景配深色文字;次要按钮带有深色边框。
- card 深色卡片,带有细微边框和充足内边距,常包含合作伙伴标志。
- chip 小型、药丸形状的标签,用于元数据或状态指示。
- input 深色输入框,带有细微边框和占位符文字。
- hero 全视口主视觉区域,配有巨型排版和一个抽象、鲜艳的3D丝带图形。
09
文案语气与禁用清单
- 语气 权威、技术性且富有远见。
- 标题风格 大胆、有力的陈述,强调规模与性能。
- 按钮文案 直接、行动导向的语言,例如“开始使用”或“了解更多”。
- 不要使用明亮、饱和的背景——截图显示的是深邃的暗色(#0B0A10)主题。
- 不要使用装饰性或衬线字体——截图显示的是干净的几何无衬线字体。
- 不要为使用圆角矩形作为主要按钮——截图显示的是药丸形状(圆角9999px)按钮。
- 不要在UI元素上使用复杂的投影——截图显示的是细微的内发光或平面边框。
- 不要使用小而紧凑的排版——截图显示的是大而开阔的展示文字,带有负字间距。
- 不要使用多种颜色——截图显示的是严格限定的调色板,仅包含深色、白色和紫色。
- 避免: 俏皮或过于随意的语言
- 避免: 没有上下文的技术术语
- 避免: 视觉混乱或过多的渐变效果
10
包内真实截图













11
System Prompt
Solana的设计DNA是一个高端的深色模式开发者和金融科技平台。它使用近乎纯黑的深色背景(#0B0A10),与纯净的白色排版和鲜明的紫色(#D06BF8)点缀形成对比。布局宽敞,遵循12列网格。排版以干净的几何无衬线字体(Diatype, DSemi)为中心,搭配大号、紧凑间距的展示标题。关键设计规则:永不使用明亮的背景,避免衬线字体,并通过充足的留白维持高对比度的深色美学。按钮和卡片等组件采用药丸形状和细微的内阴影,以在不造成视觉杂乱的情况下创造深度感。
