HashiCorp
AI 生成的风格描述及提示词
风格描述
HashiCorp 采用基础设施与云方向的视觉语言，通过克制极简、深色界面、充足留白、字体驱动组织页面层级，让品牌表达与核心操作保持一致。 色彩系统围绕 #000000、#15181e、#0d0e12、#f1f2f3 展开，并通过主色、背景色与中性色的层级关系平衡识别度和可读性。 排版主要使用 var(--font-system)、SF Mono，配合留白、字号和组件尺度形成可复用的界面节奏。
Reusable Visual System
可复用视觉系统灵感
从灵感中提取上下文、提示词和代码 token。
当前输出
DESIGN.md· Claude / Cursor / Codex
Design foundation
HashiCorp
Color roles
primary
#000000secondary
#15181esurface
#f1f2f3on-surface
#d5d7dbTypography
body-md · fontFamily · var(--font-system)body-md · fontSize · —body-md · fontWeight · —
Corner radius
md · radius-sm: 4px，用于小型控件和标签
Design System Inspired by HashiCorp
1. Visual Theme & Atmosphere
HashiCorp 采用基础设施与云方向的视觉语言，通过克制极简、深色界面、充足留白、字体驱动组织页面层级，让品牌表达与核心操作保持一致。 色彩系统围绕 #000000、#15181e、#0d0e12、#f1f2f3 展开，并通过主色、背景色与中性色的层级关系平衡识别度和可读性。 排版主要使用 var(--font-system)、SF Mono，配合留白、字号和组件尺度形成可复用的界面节奏。
Key Characteristics
- 基础设施与云
- 克制极简
- 深色界面
- 充足留白
- 字体驱动
- 等宽字体
2. Color Palette & Roles
Primary
- Primary 1 (
#000000): 品牌强调、标题着色和主操作状态 - Primary 2 (
#15181e): 悬停状态和次级强调 - Primary 3 (
#0d0e12): 辅助品牌场景和提示
Neutral Scale
- Neutral 1 (
#f1f2f3): 正文和标题 - Neutral 2 (
#d5d7db): 说明文字和元数据 - Neutral 3 (
#b2b6bd): 卡片和面板
3. Typography Rules
Font Family
Primary: var(--font-system)
Hierarchy
| Role | Font | Size | Weight | Line Height |
|---|---|---|---|---|
| H3 | var(--font-system) | 20px | 600 | 1.4 |
| 正文 | var(--font-system) | 17px | 400 | 1.75 |
| 说明 | var(--font-system) | 14px | 400 | 1.5 |
| 代码 | SF Mono | 14px | 400 | 1.6 |
Principles
- 字体层级：使用 SF Mono 等宽字体呈现代码、元数据和技术标签
- Preserve readable contrast and do not introduce type treatments that are unsupported by the reference.
4. Component Stylings
- No component was extracted with sufficient confidence. Reuse the foundation rules above before introducing new patterns.
5. Layout Principles
Spacing System
- space-2: 8px，用于紧凑元素之间的基础间距
- space-4: 16px，用于组件内边距和成组控件
- space-6: 24px，用于卡片和内容列间距
- space-12: 48px，用于章节节奏和大面积留白
Grid & Container
- 内容层级：使用明确的标题、正文和元数据层级
- 容器节奏：保持一致的卡片边距和内容对齐
- 响应式布局：窄屏单列呈现，宽屏强化信息对照
Border Radius Scale
- radius-sm: 4px，用于小型控件和标签
- radius-md: 8px，用于紧凑卡片和输入框
- radius-lg: 16px，用于预览容器和主要卡片
6. Depth & Elevation
- Use elevation only where it is visible in the reference. Keep borders, shadows, and overlays subordinate to content hierarchy.
7. Do's and Don'ts
Do
- Use extracted colors according to their documented roles.
- Preserve the spacing, hierarchy, and component patterns defined above.
- Maintain accessible contrast and visible interaction states.
Don't
- Do not introduce unverified colors, radii, or shadows as if they came from the reference.
- Do not collapse visual hierarchy or reduce touch targets below a usable size.
8. Responsive Behavior
- Keep content readable at small widths: stack related controls, preserve spacing rhythm, and avoid horizontal overflow.
- Retain the same color roles and hierarchy across breakpoints; simplify layout before reducing legibility.
9. Agent Prompt Guide
Quick Color Reference
- Primary 1:
#000000— 品牌强调、标题着色和主操作状态 - Primary 2:
#15181e— 悬停状态和次级强调 - Primary 3:
#0d0e12— 辅助品牌场景和提示 - Neutral 1:
#f1f2f3— 正文和标题 - Neutral 2:
#d5d7db— 说明文字和元数据 - Neutral 3:
#b2b6bd— 卡片和面板
Implementation Guide
- Treat this file as the source of truth for visual decisions; use the listed tokens before inventing new values.
- Recreate the component patterns and interaction hierarchy with semantic HTML and accessible focus states.
- When information is absent, keep the design restrained instead of guessing a new visual language.
Source: https://hashicorp.com/
