01
设计气质 DNA
技术稳健俏皮自信企业
兼具个性触感的高性能工程仪表盘
02
色彩
#FCBC32Accent#FFFFFFInk#ADAFB5Ink soft#202226BG#282A2FBG soft#2B303BBG quiet#C5C7CCMutedrgba(43, 48, 59, 1.0)Line高对比度暗色主题，以活力琥珀色传递温暖感，并以标志性青色用于次要行动号召
03
字体
- display
80px · 400 - h1
48px · 400 - body
20px · 400
大型展示字体与权威标题使用过渡衬线体 · 正文与UI元素使用人文无衬线体 · 代码块与类终端界面使用等宽字体 · 手写注释（例如“easy”）作为特殊装饰层叠加于标准字体之上
04
间距
4px8px12px16px24px32px48px64px96px采用标准4px网格，配以充裕的留白以强调尺度与重要性
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 999px
使用rgba(43, 48, 59, 1.0)的1px实线边框，用于容器的细微界定
rgba(10, 14, 21, 0.5) 0px -1px 16px 0px · rgba(10, 14, 21, 0.5) 0px 16px 16px 0px
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
居中的宽格式布局，带有清晰的章节分隔，采用双栏网格展示代码示例
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1.0)easing
按钮与交互元素的悬停状态 · 悬停时细微的背景色过渡 · 交互卡片元素的变换效果
背景色略微变深或变浅；光标变为指针。 · 提供即时视觉反馈，伴有轻微的缩放或色彩偏移。
08
组件
- button 主按钮为实心琥珀色配深色文字；次按钮为青色配深色文字。轮廓按钮用于导航链接。
- card 深色、略带抬升效果的容器，用于代码块与功能模块，具有圆角和细微阴影。
- chip 小型徽章，边框圆角为50%，用于状态指示或装饰性圆点。
- input 设计为类终端窗口样式，带行号，采用深色背景与等宽字体。
- hero 大规模居中标题，叠加俏皮的手写注释，辅以清晰的价值主张与突出的行动号召。
09
文案语气与禁用清单
- 语气 专业且平易近人，融合技术精确性与俏皮的自信感。
- 标题风格 大胆、宣言式的语句，偶尔加入俏皮的修正（例如将“hard”划掉改为“easy”）。
- 按钮文案 直接且以行动为导向，使用大写字母以示强调（例如“GET STARTED WITH WEAVE”）。
- 避免使用浅色背景——截图显示的是以#202226为主背景的暗色主题
- 避免在大型展示标题中使用无衬线体——截图显示主标题使用的是过渡衬线字体
- 避免使用红色作为主行动号召色——截图显示琥珀色（#FCBC32）是主导强调色
- 避免使用严格、纯粹功能性的布局——截图显示在标准字体之上叠加了俏皮的手写风格注释
- 避免使用微小、密集的容器——截图显示主要组件具有充裕的内边距与间距
- 避免为背景使用复杂的渐变——截图显示以纯色深色为主，仅在装饰元素中使用偶尔的细微渐变
- 避免: 避免过于企业化或枯燥的语言
- 避免: 避免杂乱或混乱的布局
- 避免: 避免使用纯粹极简、冷峻的美学风格
- 避免: 避免在没有视觉支持的情况下使用复杂行话
10
包内真实截图
11
System Prompt
这是一个面向AI与机器学习的暗色主题开发者平台，在企业可信度与技术趣味性之间取得平衡。设计以深炭灰背景（#202226）为核心，采用活力琥珀色（#FCBC32）作为主操作强调色，青色用于其他行动号召。字体方面，使用过渡衬线体呈现大胆、权威的展示标题，使用人文无衬线体保证正文可读性，并辅以等宽字体用于代码相关区域。标志性的设计元素是俏皮地使用手写注释来修饰主标题，为高技术产品注入个性。关键的设计约束包括：永远不使用浅色背景，避免将红色作为主强调色，以及不能省略大型元素所需的充裕间距。布局结构严谨，但允许在英雄区等部位采用富有表现力、非网格对齐的装饰性细节，例如被划掉的“hard”字样。