颜色、字体、组件、动态效果和语音。这是FlytBase品牌下产品、市场营销和合作伙伴团队的统一参考资料。
该系统由三个锚点支撑。炭灰色是默认页面背景色，而非模式。信号橙是主要强调色。桉树绿是平台特定时刻的辅助强调色。切勿在同一视口中混用信号橙和桉树绿。
同一视口中切勿混用 o400 和 e400。每个部分选择一种强调色。
默认页面背景。所有表面、边框和文本均以此比例尺为基础。
CTA、眉形、品牌标志和热感动画的主要强调元素。
用于平台和数据事件的辅助强调。用于浅色反转部分。
倒叙部分，尤加利树是重音。
功能层，独立于品牌层。每个状态都应配图标和标签，切勿仅使用颜色。成功状态使用桉树绿；错误/警告/信息/进度/审核状态则使用专用颜色。
引用时请使用标记名称，切勿使用十六进制代码。标记在 src/app/globals.css 的 @theme 中声明。
三个字体家族，分工明确。Lora 用于显示。Geist 用于界面文字。Geist Mono 用于元数据。通过 next/font 加载；运行时绝不从 fonts.googleapis.com 加载。
Lora
自主运行
标题、展示文字、编辑重点。斜体 Lora 会突出显示标题中的单个单词，而不是整个句子。
Geist
专为规模化应用而打造的企业级无人机机队软件。
正文、按钮、导航和表单。所有用户界面文本都存储在 Geist 中。
Geist Mono
FLT-2026.04 - 12:00 UTC
眉毛、标签、时间戳、数字和代码。
标题采用 32px、4vw、56px 的曲线布局。正文文本高度为 17px/1.6。眉形位于 10px，间距为 0.12em。
图标锁定为 @phosphor-icons/react 的细体（1px 描边）。常规粗细仅适用于带边框的 32 至 40px 正方形区域内的图标。
import { House } from '@phosphor-icons/react'
<House size={20} weight="thin" />每个组件都继承标记缩放比例。除非设计需要使用带边框的元素，否则不设置边框圆角。过渡效果使用三次贝塞尔曲线(0.22, 1, 0.36, 1)，持续时间为200毫秒。
主要 - 信号橙色背景，单色标签，鼠标悬停时发光。
幽灵 - 透明，鼠标悬停时边框会变成 dh 色。
brandGuidelines.components.dotStreamNote
8px 基础网格，单一最大内容宽度。表面不进行圆角处理。
基准值为 8px。增量为 8、16、24、32、48、64、96。
页面最大宽度 1200px。移动设备上的水平内边距为 24px，移动设备上的水平内边距为 48px。
默认值为零。带边框的图标方块和验证输入框是极少数例外情况。
三种可平铺图案和一种温度梯度图案。每个区域使用一种。
在炭灰色底上绘制 32px 的线条，透明度为 4%。
在炭黑色底面上，以 14% 透明度绘制 20px 的径向点。
独一无二的斜向渐变，从信号橙过渡到炭黑。用于突出重点场景，绝不用于卡片内部。
一种应用于深色表面的动态胶片颗粒叠加层。它仅作装饰作用--即使没有它，主体部分仍然清晰可辨。
动作是有目的的，而非随意的。滚动屏幕显示方块，然后按住屏幕。荣耀倾向于减少动作。
duration 0.9s - ease power3.out
0.9 秒缓动，power3.out，上升 24 像素，阈值 12%。每个元素运行一次。
duration 200ms - cubic-bezier(0.22, 1, 0.36, 1)
200毫秒缓动效果，使用三次贝塞尔曲线(0.22, 1, 0.36, 1)。主按钮抬升1像素并发光。
prefers-reduced-motion: reduce
所有显示立即生效。颗粒停止移动。悬停升降功能禁用。
视频和其他动态素材如何融入系统？一个共享组件（AutoplayVideo）承载着网站上所有自动播放的视频片段--包括首页横幅、首页客户展示、品牌宣传片等等--从而确保播放一致性。
默认静音，右下角有一个静音开关。用于首页客户评价视频和落地页首页横幅。组件相同，标签也由父组件传递。
写作风格要像运营人员，而不是营销人员。句子要简短。使用具体名词。避免使用流行语。
这是一份快速参考指南，适用于所有使用该品牌进行发货的人员。完整规则请参见 Docs/AGENTS.md 和 Docs/DESIGN-SYSTEM.md。
默认情况下使用服务器组件。客户端组件仅用于状态、效果、事件处理程序或浏览器 API。
每个可索引页面都会在 generateMetadata 中调用 buildAlternates(path, locale)。不要从页面主体中生成链接 rel 属性的备选方案。
所有面向用户的文本都使用了 useTranslations。只有 src/messages/en.json 文件是手动编辑的。
从 @/i18n/navigation 导入 Link、useRouter、usePathname 和 redirect。切勿从 next/link 或 next/navigation 导入。
不使用内联样式。不使用 CSS 模块。仅使用 Tailwind 工具类和标记类。
Next.js 特殊文件（page、layout、error、loading、notfound）之外没有默认导出。
标题、正文和行内标记在长篇内容（案例研究、博客文章和文档）中的呈现方式。
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Block quotes set a passage apart from the body — used for pulled statements and emphasis within an article.
Bold text
Emphasis