精选 · 开放 · 免费

Hashicorp

一个简洁、权威的云基础设施与安全管理平台

01

设计气质 DNA

云端的工业控制面板

02

色彩

高对比度深色模式，以单一主导的企业蓝色作为点缀色

03

字体

humanist-sans · monospace

• display52px · 600

大多数正文使用系统默认的无衬线字体 · 主要标题和品牌标识使用定制的人文主义无衬线字体 · 代码片段和技术标签使用等宽字体

04

间距

严格的4px基础网格，章节间留有充裕的空白

05

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

1px solid rgb(213, 215, 219)

0px 1px 1px 0px rgba(97, 104, 117, 0.05) · 0px 2px 2px 0px rgba(97, 104, 117, 0.05) · 0px 1px 2px 1px inset rgba(101, 106, 118, 0.05)

06

布局

标准居中容器与灵活的网格列

07

动效与交互

悬停时快速的颜色和背景过渡 · 聚焦和交互时微妙的透明度变化

颜色和背景颜色在0.15秒内以ease-in方式变化 · 通过微妙的缩放或颜色变化提供即时视觉反馈

08

组件

• button 简洁的实色背景，带有微妙的1px边框或4px圆角。‘开始使用’采用主蓝色，其他操作按钮使用白色或黑色。
• card 带有微妙边框或阴影的简单容器，常使用渐变背景进行分类。
• chip 药丸状徽章，带有浅色边框，用于状态或标签。
• input 标准表单字段，带有1px实线边框，聚焦时有微妙的内阴影。
• hero 全宽深色背景，搭配大号字体和醒目的渐变网格或抽象光影效果。

09

文案语气与禁用清单

• 语气 专业、权威、技术感
• 标题风格 简短、有力、陈述式（例如：‘正确驾驭云端’）
• 按钮文案 行动导向、直接明确（例如：‘了解基础设施云’、‘开始使用’）

• 不要使用复杂的网格布局——截图显示的是一个带有充裕空白的简单居中容器
• 不要使用多种多样的颜色——截图显示的是以白色、黑色和一种主蓝色点缀色为主的调色板
• 不要使用装饰性或手写体字体——截图显示的是整洁、专业的无衬线字体
• 不要使用粗糙、粗厚的边框——截图显示的是微妙、低不透明度或低对比度的1px边框
• 不要使用厚重、深暗的阴影——截图显示几乎没有阴影，或仅有非常微妙的阴影以营造层次
• 不要到处使用响亮、明亮的点缀色——截图显示蓝色点缀色仅用于主要操作，且使用非常克制
• 避免: 过于随意或口语化的语言
• 避免: 华丽或过度描述性的形容词
• 避免: 具有攻击性或过于销售导向的标点符号
• 避免: 过多的感叹号

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

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