精选 · 开放 · 免费
Solana
一个采用大胆几何字体和鲜明紫色点缀的高端深色模式加密货币平台。
cryptodark
01
设计气质 DNA
区块链高性能金融基础设施速度规模化
一个高频交易终端与科幻基础设施的结合
02
色彩
#D06BF8Accent
#FFFFFFInk
rgba(255,255,255,0.70)Ink soft
#0B0A10BG
#121212BG soft
#848895Muted
rgba(255,255,255,0.10)Line
深邃、绝对的深色背景,搭配鲜明的紫色高光和纯净的白色排版,以实现最大可读性和未来感。
03
字体
geometric-sans · monospace
- display
80px · 400 - heading
40px · 500 - body
21px · 400 - small
16px · 400
所有标题和正文使用几何无衬线字体,以保持连贯的技术感。 · 为大型展示文字应用紧凑的负字间距,以增强视觉冲击力。 · 确保等宽字体严格仅用于代码片段或技术数据展示。
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
以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
包内真实截图
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
Solana的设计DNA是一个高端的深色模式开发者和金融科技平台。它使用近乎纯黑的深色背景(#0B0A10),与纯净的白色排版和鲜明的紫色(#D06BF8)点缀形成对比。布局宽敞,遵循12列网格。排版以干净的几何无衬线字体(Diatype, DSemi)为中心,搭配大号、紧凑间距的展示标题。关键设计规则:永不使用明亮的背景,避免衬线字体,并通过充足的留白维持高对比度的深色美学。按钮和卡片等组件采用药丸形状和细微的内阴影,以在不造成视觉杂乱的情况下创造深度感。
en · zh-CN · zh-TW · ja · ko