Highlight

一个用于全栈监控的、深色、简洁的 IDE 仪表盘。

深色模式优先，搭配高对比度青色点缀与微妙的霓虹黄高亮。

humanist-sans · monospace

• display58px · 600
• heading44px · 600
• body-lg18px · 400
• body16px · 400

基于一致的4px网格，留白充裕以保证可读性。

1px solid rgba(48, 41, 78, 1)

rgb(108, 55, 244) 8px 8px 0px -2px

内容居中，两侧留有宽边距，使用 flexbox 实现功能标签页。

交互元素在 hover 时进行微妙的颜色过渡。 · 功能标签页之间平滑过渡。

按钮和链接在 hover 时进行微妙的色彩与不透明度变化。 · 通过颜色过渡提供即时反馈。

• button 药丸形按钮，主按钮为实心青色，次按钮为描边样式。
• card 深色卡片，带微妙边框，常包含集成图标。
• chip 标签页式芯片，用于功能导航（如会话重放、错误监控等）。
• input 极简深色输入框，但在主视觉区域中不突出显示。
• hero 大型居中标题，采用点缀色，堆叠式 CTA 按钮，并配有功能概览标签页。

• 语气 技术感强但平易近人，专业，面向开发者。
• 标题风格 直接、价值驱动，并突出开源特性。
• 按钮文案 行动导向（开始使用、实时演示），视觉层次清晰。

• 不要使用浅色主题——截图显示的是深海军蓝背景（#0D0225）的深色模式界面。
• 不要使用次要强调色——截图显示按钮和高亮仅使用单一主导的高饱和青色（#72E4FC）。
• 不要使用装饰性衬线字体——截图显示所有文字使用的是简洁、现代的人文主义无衬线字体（Poppins）。
• 不要全部使用直角——截图显示采用微妙的8px/16px圆角与44px药丸形状的混合设计。
• 不要使用低对比度文字——截图显示在深色背景上使用高对比度白色（#FFFFFF）和浅灰色（#DFDFDF）。
• 不要让页头显得杂乱——截图显示的是简洁、顶部对齐的导航，并设有清晰的主要/次要操作按钮。
• 避免: 避免使用过于随意或“创业兄弟”式的行话。
• 避免: 避免在主视觉区域使用复杂的架构图。
• 避免: 避免使用杂乱的布局而模糊核心价值主张。

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