精选 · 开放 · 免费

Cosmos Network

面向构建可互操作、自主可控金融系统的企业级区块链解决方案。

FintechDeveloper ToolsSaaSDark ModeBold Typography
Cosmos Network 网站截图
↓ 下载设计系统包 (16 MB)在 OpenDesign 中打开

原站: https://cosmos.network

📦 浏览包内文件 →

01

设计气质 DNA

区块链企业级账本自主可控互操作性

面向全球金融基础设施的高安全性高科技指挥中心。

02

色彩

#22E6A8Accent
#FFFFFFInk
#808080Ink soft
#000000BG
#181818BG soft
rgba(128,128,128,0.5)Line

采用单一薄荷绿点缀的高对比暗色调,深黑底色搭配纯白文字,辅以柔和灰度呈现次要信息。

03

字体

geometric-sans · monospace

统一使用“The Future”几何无衬线字体,保持清晰现代且高度易读的视觉层级。 · 保持400字重以营造轻盈专业的整体气质。 · 大尺寸展示文本采用紧凑字距,形成更具凝聚力与冲击力的视觉块。

04

间距

4px
8px
12px
16px
24px
32px
48px
64px
96px

基于4px的统一网格系统,确保元素间距规整,主要区块与布局容器采用更大倍数间距。

05

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

sm · 4px
md · 8px
lg · 20px
pill · 9999px

极简功能型设计,主要使用1px边框构建导航与按钮的结构轮廓。

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

全宽首屏采用左文右图的双栏分割,后续为居中单栏内容区域搭配水平卡片布局。

07

动效与交互

150msmicro
200mssmall
300msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

交互元素背景色、边框色与填充色的平滑过渡。 · 按钮与链接悬停状态的基于变换的动画(缩放、位移)。 · 元素淡入淡出的透明度过渡效果。

按钮、导航链接等交互元素采用微妙的背景色变化与基于变换的缩放效果。 · 通过微缩放变换与色彩过渡提供即时反馈。

08

组件

09

文案语气与禁用清单

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

设计一个精致的企业级区块链技术网站。采用深黑(#000000)背景,搭配高对比度白色(#FFFFFF)文字与柔和灰色(#808080)次要元素。点缀单一鲜明薄荷绿(#22E6A8)作为关键高光。使用简洁几何无衬线字体(如'The Future')与紧凑专业字号系统。严格遵循4px间距网格,采用柔和药丸形组件。布局需包含强视觉冲击力的双栏首屏(技术插图+文字)与清晰的单栏水平卡片内容区。确保所有交互采用0.2秒微妙过渡实现流畅体验。聚焦清晰度、权威感与高端未来主义美学。禁用厚重阴影、尖锐直角或杂乱多彩调色板。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效,整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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