OpenDesign·你的设计资产库

网页参考

Status

一款暗色调、专业的金融科技与消息应用,强调隐私与安全的设计理念。

FintechDeveloper ToolsDark ModeConsumerCalm

预览暂时不可用,请通过原站查看。

01

设计气质 DNA

隐私安全去中心化web3通信

一个私密、安全的超级应用,用于交易、消息和浏览。

02

色彩

#6C5CE7Accent
#FFFFFFInk
#A0A3B1Ink soft
#0A0B14BG
#151620BG soft
#1A1B2EBG quiet
#6B6E7EMuted
rgba(255,255,255,0.1)Line

采用深色、高对比度模式,并以独特的紫色作为主要操作的强调色。

03

字体

grotesque-sans

  • display72px · 700
  • headline40px · 700
  • body18px · 400

大型展示性文字使用紧凑字距和粗体字重。 · 明确区分主视觉区标题与章节标题的层级。

04

间距

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

通过4px基础网格建立一致的垂直节奏。

05

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

sm · 4px
md · 8px
lg · 12px
pill · 999px

在深色模式下使用 rgba(255,255,255,0.1) 的细微边框进行区域分隔。

0 4px 24px rgba(0,0,0,0.2)

06

布局

1200container
12columns
24pxgutter
768 / 1024breakpoints

标准12栏流体网格,内容左对齐,视觉模型右对齐。

07

动效与交互

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

按钮状态与悬停效果采用平滑过渡。 · 页面加载采用微妙的入场动画。

交互元素呈现细微的背景色或透明度变化。 · 立即响应,并带有最小的缩放反馈。

08

组件

  • button 主要操作采用实心填充样式,次要操作采用描边样式,胶囊形状,内边距较小。
  • card 简洁、无边界的区域划分,避免使用厚重的卡片容器,依靠间距区分。
  • chip 小型、圆角的徽章,使用实心背景色用于通知公告。
  • input 简洁、深色主题的输入框,边框细微(在深色主题中不明显,但可推断存在)。
  • hero 左侧为大字号排版,右侧为叠加的设备模型展示。

09

文案语气与禁用清单

  • 语气 自信、直接且专注于技术。
  • 标题风格 简短、有力、陈述性。
  • 按钮文案 清晰、以行动为导向、针对具体平台(例如:Linux 下载)。
  • 不要使用亮色主题——截图显示的是深邃的、近乎黑色的背景。
  • 不要使用衬线字体——截图显示的是简洁、现代的无衬线字体。
  • 不要使用灰暗或不饱和的主色——截图显示的是鲜活的紫色强调色。
  • 不要使用圆润、气泡状的容器——截图显示的是简洁、笔直的边缘和微妙的圆角。
  • 不要使用复杂的渐变——截图显示的是纯色、实色和微妙的透明度。
  • 不要让布局显得拥挤——截图显示的是充足的留白和清晰的视觉层次。
  • 避免: 缺乏上下文的术语堆砌解释。
  • 避免: 过于随意或戏谑的语言。
  • 避免: 缺乏技术支撑的模糊承诺。

11

System Prompt

一款专注于隐私和去中心化的暗色模式金融科技与消息应用(Status)。其视觉基因由极深的背景色(#0A0B14)、清晰的白色文字(#FFFFFF)以及用于主要号召性操作的活力紫色(#6C5CE7)定义。字体采用现代无衬线字体,展示性文字使用紧凑字距,正文则注重清晰易读。关键禁令:不要引入亮色主题,避免使用衬线字体,不要使用不饱和或多色渐变。布局宽敞,采用12栏网格,将大字号排版与精细的设备模型展示相结合。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

参考链接与来源说明,可复制给 Agent。