设计系统
Scoutello 应给人温暖、专业且专注于产品的感觉。首选外观是浅色、宽敞、圆润且具有编辑风格：首先是清晰的内容，然后是微妙的品牌色彩、柔和的界面和平静的动效，使产品感觉响应迅速，但又不会变成装饰性的噪音。
营销着陆页是当前视觉方向最清晰的公开参考。产品界面应尽可能重用共享的设计令牌，并且只有在界面明确面向品牌或营销时才变得更具表现力。
Logo 和品牌资产
当代理商、集成或生成的页面需要可重用的品牌标记时，请使用公共文档资 产 URL 中的 Scoutello logo：
- SVG logo：https://docs.scoutello.com/img/scoutello-logo.svg
- PNG logo：https://docs.scoutello.com/img/scoutello-logo.png
优先使用 SVG 版本，以在各种屏幕尺寸上实现清晰的渲染。当工具或目标无法处理 SVG 时，请使用 PNG 版本。在标记周围保留足够的空白，避免拉伸或更改其颜色，并将其放置在白色、暖米色或其他能保持对比度的平静表面上。
品牌色彩
主色： #ff8d49
将主橙色用作 Scoutello 的强调色：主要号召性用语、焦点状态、活动导航、小图标背景、高亮文本、柔和的光晕和暖色渐变。在产品代码中，这对应于 --primary: 24 100% 64% 和 Tailwind 类，如 bg-primary、text-primary、border-primary/15 和 shadow-primary/10。
次色： #145466
将深蓝绿色用作基础色。它与主橙色结合使用效果最佳，用于渐变、深色号召性用语面板、视觉深度和偶尔的高强调品牌时刻。它不应取代主橙色作为默认操作颜色。
辅助颜色：
- 暖米色背景：
#fff8f1、#fff4ea、#fcf6f1和柔和的orange-50/amber-50界面。 - 产品中性色：白色卡片、深色前景文本、大约 70-75% 不透明度的柔和文本以及浅色边框。
- 三级蓝色：
hsl(205 100% 51%)可作为辅助令牌使用，但应谨慎使用，以免橙色和蓝色失去作为品牌配对的辨识度。
视觉风格
倾向于干净、高端的 SaaS 外观，并带有足够的温暖感以避免显得普通。着陆页结合了米色网格背景、白色卡片、大型产品截图、圆角和克制的渐变。
使用：
- 圆角卡片和面板，通常从
rounded-2xl到rounded-[2rem]。 - 柔和的边框，如
border-primary/10、border-primary/15、ring-black/5和浅中性边框。 - 分层的白色或米色界面，而不是厚重的彩色块。
- 细微的阴影，如
shadow-sm、shadow-lg、shadow-2xl shadow-primary/10或自定义的低不透明度阴影。 - 大型产品截图或 UI 模型作为证据，尤其用于营销和功能叙述。
- 小型品牌元素，如橙色高亮文本、图标芯片、圆环、光晕和渐变 CTA。
避免：
- 醒目的全页橙色背景。
- 过度使用蓝色作为普通控件。
- 密集、拥挤的布局。
- 刺眼的阴影、尖锐的矩形或冷色调的单色仪表板。
- 与阅读或任务完成竞争的装饰性动效。
排版
营销网站使用：
- Space Grotesk 用于通过
landing-display类显示标题。 - Manrope 用于营销正文。
共享的应用和文档界面使用与系统对齐的 UI 排版，目前更接近 Inter。风格目标是在所有界面中保持一致：自信的标题、紧凑的标题字距、可读的正文和宽裕的行高。
标题指南：
- 在营销页面上使用大而平衡的标题。
- 仅用主橙色高亮重要短语。
- 在可用时使用
max-w-*和text-balance控制行长。
正文指南：
- 保持段落平静直接。
- 对描述使用柔和的前景文本，通常为
text-foreground/70或text-foreground/75。 - 倾向于易于浏览的部分、简短的段落和清晰的标签。
布局和间距
布局应显得宽敞而稳定。着陆页使用 max-w-7xl 容器，具有响应式水平内边距和大型垂直部分。
常见模式：
- 主要营销部分的节内边距约为
py-16、py-20或更大。 - 卡片以响应式网格排列，间距一致。
- Hero 部分具有强大的左侧内容列，右侧为产品截图或设备组合。
- 居中对齐的章节标题用于广泛的产品承诺；左对齐标题用于故事或工作流程部分。
- 移动优先布局，在堆叠成多列之前能干净地堆叠。
将空白作为设计的一部分使用。如果某个部分感觉不清晰，请简化内容并增加呼吸空间，然后再添加更多装饰。
组件和界面
Scoutello 界面应感觉触感真实但轻巧：
- 按钮：用于突出营销 CTA 的圆角胶囊形按钮；其他地方使用标准产品按钮。
- 卡片：白色或米色，圆角，带边框，并有轻微的浮雕效果。
- 图标：小型、简单的线条图标，放在橙色调的芯片中。
- 统计数据和信任元素：带有橙色调边框或渐变的克制卡片。
- 表单：清晰的标签，直接的辅助文本，以及足够的间距以适应移动设备使用。
- 截图：大而清晰，略有浮雕效果。将它们用作产品的具体证据。
在构建产品 UI 时，请从现有的共享 UI 组件和令牌开始，而不是自定义的一次性样式。在构建营销 UI 时，请在合适的情况下使用着陆页原始组件和类。
动效
动效应使界面感觉精致，而不是杂乱。着陆页使用短的显示动画、设备抬升效果、光晕绽放效果和小的悬停提升效果。
首选动效：
- 从 12-24px 向上显示，带有柔和的不透明度。
- 悬停卡片仅抬升几像素。
- CTA 悬停状态会稍微抬升并加深阴影。
- 交错的章节进入，如果它们支持叙事浏览。
始终尊重减少动效的偏好。避免可能隐藏内容、阻止交互或感觉是理解页面所必需的动画。
语调和内容设计
视觉系统与直接、具体的内容配合效果最佳。倾向于解释组织可以在 Scoutello 中发布、管理或自动化的内容的语言。
使用：
- 特定于产品的名词：着陆页、磁贴、导览、活动、组织、仪表板、访客、二维码、翻译。
- 结果导向的描述，将访客体验与运营商工作流程联系起来。
- 在德语和其他本地化副本中使用性别中立的语言。
避免：
- 没有示例的模糊平台语言。
- 过分正式的企业术语。
- 长段落，而扫描式部分效果更好。
实用规则
- 使用
#ff8d49作为主要品牌强调色，使用#145466作为次要基础色。 - 在产品界面中，优先使用令牌化类（
primary、secondary、foreground、muted、border），而不是硬编码颜色。 - 营销页面应保持温暖、宽敞、圆润、以截图为主，并带有轻微动画。
- 仪表板和操作界面应保持平静，仅在必要时才密集，并更侧重于任务。
- 在产品已公开品牌控制的地方，让客户拥有的访客体验支持组织品牌，但保持 Scoutello 拥有的界面与此系统一致。