跳至内容
品牌系统 v1

FlytBase视觉和语言系统

颜色、字体、组件、动态效果和语音。这是FlytBase品牌下产品、市场营销和合作伙伴团队的统一参考资料。

版
2026.04 版
观众
适用于产品、品牌和工程团队

颜色

该系统由三个锚点支撑。炭灰色是默认页面背景色，而非模式。信号橙是主要强调色。桉树绿是平台特定时刻的辅助强调色。切勿在同一视口中混用信号橙和桉树绿。

01

硬性规定

同一视口中切勿混用 o400 和 e400。每个部分选择一种强调色。

木炭（深色底）

默认页面背景。所有表面、边框和文本均以此比例尺为基础。

dbg#1A1A1A
ds#242424
de#2E2E2E
db#3D3D3D
dm#5C5C5C
dsc#999999
dbd#D6D6D6
dh#F0F0F0

信号橙

CTA、眉形、品牌标志和热感动画的主要强调元素。

o50#FDF0E8
o100#F4B896
o200#EC7D42
o400#D95B28
o600#A33D14
o800#7A2B0E
o900#4A1808

桉树

用于平台和数据事件的辅助强调。用于浅色反转部分。

e50#EAF0EE
e100#BACDD0
e200#72A899
e400#3A7A65
e600#2B5A4A
e800#1B3A30
e900#0F2219

冷灰色（浅色底）

倒叙部分，尤加利树是重音。

lbg#F5F5F7
ls#FFFFFF
lb#DDDFE3
lsc#555555
lp#111111

验证

仅用于表单错误状态。绝不会用作品牌颜色。

error - #F43F5E

引用时请使用标记名称，切勿使用十六进制代码。标记在 src/app/globals.css 的 @theme 中声明。

排版

三个字体家族，分工明确。Lora 用于显示。Geist 用于界面文字。Geist Mono 用于元数据。通过 next/font 加载；运行时绝不从 fonts.googleapis.com 加载。

02

展示

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 正方形区域内的图标。

03

允许

  • - 默认磷光薄层
  • - 方框内的正交磷光体
  • - 如果 src/components/icons/ 目录下缺少某个字形，则会添加一个与之匹配的 Phosphor 描边的 SVG 文件。

绝不

  • - 双色调或填充重量
  • - 表情符号作为图标
  • - 其他图标库（Lucide、Heroicons、Material、Tabler、Font Awesome）
import { House } from '@phosphor-icons/react'

<House size={20} weight="thin" />

成分

每个组件都继承标记缩放比例。除非设计需要使用带边框的元素，否则不设置边框圆角。过渡效果使用三次贝塞尔曲线(0.22, 1, 0.36, 1)，持续时间为200毫秒。

04

主要 - 信号橙色背景，单色标签，鼠标悬停时发光。

幽灵 - 透明，鼠标悬停时边框会变成 dh 色。

绿色 - 桉树，适用于平台和数据事件。

眉毛和标签

信号 01 - 自主性2号站台 - 活动更新于2026年4月21日

间距和布局

8px 基础网格，单一最大内容宽度。表面不进行圆角处理。

05

网格

8
16
24
32
48
64

基准值为 8px。增量为 8、16、24、32、48、64、96。

容器

页面最大宽度 1200px。移动设备上的水平内边距为 24px，移动设备上的水平内边距为 48px。

边界半径

默认值为零。带边框的图标方块和验证输入框是极少数例外情况。

图案和表面

三种可平铺图案和一种温度梯度图案。每个区域使用一种。

06

网格

在炭灰色底上绘制 32px 的线条，透明度为 4%。

点

在炭黑色底面上，以 14% 透明度绘制 20px 的径向点。

热的

独一无二的斜向渐变，从信号橙过渡到炭黑。用于突出重点场景，绝不用于卡片内部。

粮食

一种应用于深色表面的动态胶片颗粒叠加层。它仅作装饰作用--即使没有它，主体部分仍然清晰可辨。

运动

动作是有目的的，而非随意的。滚动屏幕显示方块，然后按住屏幕。荣耀倾向于减少动作。

07

揭示

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

所有显示立即生效。颗粒停止移动。悬停升降功能禁用。

声音和语调

写作风格要像运营人员，而不是营销人员。句子要简短。使用具体名词。避免使用流行语。

08

做

  • - 请拼写出品牌名称FlytBase和 B 的首字母都要大写。
  • - 请仅使用普通连字符。
  • - 请使用首字母大写格式撰写标题。
  • - 指出结果，而不是功能。

不要

  • - 使用长破折号或短破折号。
  • - 在产品、营销或代码中使用表情符号。
  • - 编写 Flytbase、flytbase、FLYTBASE 或 FLytbase。
  • - 使用诸如协同作用、杠杆作用或解锁之类的专业术语。

使用规则

这是一份快速参考指南，适用于所有使用该品牌进行发货的人员。完整规则请参见 Docs/AGENTS.md 和 Docs/DESIGN-SYSTEM.md。

09
  1. 01

    默认情况下使用服务器组件。客户端组件仅用于状态、效果、事件处理程序或浏览器 API。

  2. 02

    每个可索引页面都会在 generateMetadata 中调用 buildAlternates(path, locale)。不要从页面主体中生成链接 rel 属性的备选方案。

  3. 03

    所有面向用户的文本都使用了 useTranslations。只有 src/messages/en.json 文件是手动编辑的。

  4. 04

    从 @/i18n/navigation 导入 Link、useRouter、usePathname 和 redirect。切勿从 next/link 或 next/navigation 导入。

  5. 05

    不使用内联样式。不使用 CSS 模块。仅使用 Tailwind 工具类和标记类。

  6. 06

    Next.js 特殊文件（page、layout、error、loading、notfound）之外没有默认导出。

一个平台，满足您所有的后台办公需求。 无限数量的代理全天候工作。

超视距路径

您是自行逐个站点申请审批，还是采用托管服务？

投资回报率框架

当研究成果局限于一个用例时，如何确保下一阶段的预算？

数据智能

如何在不让团队埋头审校的情况下，将TB级的素材转化为实际行动？

IT与合规

数据存储在哪里？谁有权访问？硬件是否符合NDAA要求？