OpenDesign·你的设计资产库

网页参考

Getstark

自动化产品全生命周期数字无障碍访问合规的企业级SaaS平台。

SaaSProductivityDeveloper ToolsAIBold Typography

封面待补录,可通过原站查看设计。

01

设计气质 DNA

无障碍访问合规性自动化设计转代码基础设施

如同在后台静默运行的工业级无障碍访问引擎。

02

色彩

#FEDB63Accent
#000000Ink
#FFFFFFInk soft
#381FD1BG
#F6F6EBBG soft
#FAF5FFBG quiet
#10284BMuted
rgba(229, 231, 235, 1.0)Line

高对比度的紫黄配色传递活力与技术精确性。

03

字体

grotesque-sans · monospace

  • display56px · 900
  • body16px · 400
  • caption14px · 400

大号展示字重使用紧凑字距保持视觉整体性。 · 利用极端字重在有限背景上建立视觉层级。

04

间距

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

采用4与8的倍数确保对齐一致性。

05

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

sm · 4px
md · 6px
lg · 20px
pill · 999px

2px细边框搭配深蓝或主紫色强调色。

0 4px 12px rgba(0, 0, 0, 0.1)

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

居中栏主视觉配左对齐数据点与右浮动状态指示器。

07

动效与交互

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

交互元素采用透明度与颜色过渡,营造平滑响应式体验。

按钮与链接的微妙颜色变化。 · 避免明显弹跳或缩放,依靠视觉状态变化。

08

组件

  • button 高对比度纯色块配微圆角。
  • card 带微妙边框的浮动白色容器,用于界面原型。
  • chip 使用背景色与图标指示器的状态标签。
  • input 带细边框的简洁矩形输入框。
  • hero 以深紫色为背景的粗体文字驱动区块,使文本与黄色强调色脱颖而出。

09

文案语气与禁用清单

  • 语气 权威、专业、值得信赖。
  • 标题风格 直接的利益导向陈述,强调自动化特性。
  • 按钮文案 清晰行动导向的短语,如“免费注册”或“立即开始”。
  • 不要使用柔和或粉彩色调——截图显示深邃饱和的紫色(#381FD1)作为主视觉背景。
  • 不要使用细体字重作为标题——截图显示超粗黑体字重(900)作为主展示字体。
  • 不要使用宽松字距作为标题——截图使用负字距(-0.56px)营造密集高冲击效果。
  • 不要使用多色强调系统——截图显示单一高饱和度黄色(#FEDB63)作为主强调色。
  • 不要对所有元素使用0px直角边框——截图显示圆角按钮与卡片,部分标签采用药丸形状。
  • 不要依赖图标密集的导航——截图显示以文字为主的一级导航配简单下拉箭头。
  • 避免: 避免模糊表述,直接说明合规性。
  • 避免: 避免过度随意的俚语,保持专业企业级语调。
  • 避免: 避免使用与无障碍访问无直接关联的复杂术语。

10

包内真实截图

历史提取与模型分析 · 尚未逐项校验

11

System Prompt

本站点是专业的数字无障碍访问合规SaaS平台。采用深紫色(#381FD1)与亮黄色(#FEDB63)的活力高对比度配色,搭配米白色背景(#F6F6EB)。标题使用极端字重(900)的粗体grotesque-sans字体,正文采用标准字重。关键禁忌:不使用细体标题字重,不使用多种高饱和度强调色,标题不使用宽松字距。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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