Брендовая система v1

Визуально-вербальная система FlytBase

Цвета, шрифты, компоненты, анимация и озвучка. Единый справочник для продуктовых, маркетинговых и партнерских команд, работающих под брендом FlytBase.

Версия: Выпуск 2026.04
Аудитория: Для команд, занимающихся разработкой продуктов, брендингом и проектированием.

Цвета

Система основана на трех якорях. Угольно-черный - это фон страницы по умолчанию, а не режим. Сигнально-оранжевый - основной акцент. Эвкалиптовый - второстепенный акцент для сцен на платформе. Никогда не смешивайте сигнально-оранжевый и эвкалиптовый цвета в одном окне просмотра.

Жесткое правило

Никогда не смешивайте цвета o400 и e400 в одном окне просмотра. Выбирайте один акцент для каждого раздела.

Уголь (темная основа)

Фон страницы по умолчанию. Поверхности, границы и текст определяются этим масштабом.

dbg#1A1A1A

ds#242424

de#2E2E2E

db#3D3D3D

dm#5C5C5C

dsc#999999

dbd#D6D6D6

dh#F0F0F0

Сигнальный оранжевый

Основной акцент для призывов к действию, бровей, фирменных точек и термоанимации.

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 во время выполнения.

Отображать

Lora

Автономные операции

Заголовки, оформление, редакционные акценты. Курсивом Lora выделяет одно слово в заголовке, никогда не целое предложение.

Интерфейс

Geist

Программное обеспечение для корпоративного парка дронов, разработанное для масштабируемого использования.

Основной текст, кнопки, навигация и формы. Весь текст пользовательского интерфейса размещен в Geist.

Метаданные

Geist Mono

FLT-2026.04 - 12:00 UTC

Брови, метки, временные метки, числа и код.

Шкала

Заголовки располагаются по кривой clamp(32px, 4vw, 56px). Основной текст занимает 17px/1.6. Брови располагаются на уровне 10px с межбуквенным расстоянием 0.12em.

Иконография

Иконки привязаны к @phosphor-icons/react с толщиной линии 1 пиксель (тонкая). Стандартная толщина линии допустима только внутри квадратных рамок размером от 32 до 40 пикселей для иконографических элементов в рамках.

Позволять

- Тонкий фосфорный слой по умолчанию
- Фосфор правильной формы внутри квадрата с окаймлением
- Одноразовый SVG-файл в src/components/icons/, если отсутствует глиф, соответствующий обводке Phosphor.

Никогда

- Двухцветные или заполняющие веса
- Эмодзи в виде иконок
- Другие библиотеки иконок (Lucide, Heroicons, Material, Tabler, Font Awesome)

import { House } from '@phosphor-icons/react'

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

Компоненты

Каждый компонент наследует масштаб токена. Радиус скругления углов отсутствует, если только дизайн не предусматривает использование обрамленного элемента. Переходы выполняются с помощью функции cubic-bezier(0.22, 1, 0.36, 1) с интервалом 200 мс.

Основной цвет - оранжевый фон, монохромная метка, свечение при наведении курсора.

Призрак - Прозрачный, рамка при наведении курсора становится теплее.

Зеленый - эвкалипт для платформ и событий, связанных с данными.

Брови и этикетки

Сигнал 01 - АвтономияПлатформа 02 - СобытияОбновлено 21.04.2026

Интервалы и расположение

Базовая сетка 8 пикселей и одна максимальная ширина содержимого. Поверхности не закруглены.

Сетка

Базовый размер 8 пикселей. Используйте деления с шагом 8, 16, 24, 32, 48, 64, 96.

Контейнер

Максимальная ширина страницы 1200 пикселей. Горизонтальный отступ 24 пикселя на мобильных устройствах, 48 пикселей на мобильных устройствах.

Радиус границы

По умолчанию - ноль. Исключения составляют квадратные значки в рамках и поля ввода для проверки данных.

Узоры и поверхности

Три варианта рисунка, допускающих многократное повторение, и один температурный градиент. Используйте по одному варианту на каждый раздел.

Сетка

Линии шириной 32 пикселя с прозрачностью 4% на фоне угольного цвета.

Точки

Радиальные точки размером 20 пикселей с альфа-каналом 14% на фоне угольного цвета.

Тепловой

Уникальный диагональный градиент от ярко-оранжевого до угольно-черного цвета. Используется для эффектных моментов, никогда не внутри карточек.

Зерно

Анимированное наложение, имитирующее зернистость пленки, на темные поверхности. Оно носит декоративный характер - основной фрагмент остается полностью читаемым и без него.

Движение

Движение должно быть целенаправленным, а не случайным. Отображайте блоки при прокрутке, затем удерживайте. Honor предпочитает минимальное движение.

Раскрывать

duration 0.9s - ease power3.out

0.9s ease power3.out, 24px rise, 12% threshold. Выполняется один раз для каждого элемента.

Ховер

duration 200ms - cubic-bezier(0.22, 1, 0.36, 1)

200 мс ease cubic-bezier(0.22, 1, 0.36, 1). Основные кнопки приподнимаются на 1 пиксель и светятся.

Ограниченная подвижность

prefers-reduced-motion: reduce

Все проблемы решаются мгновенно. Подача зерна прекращается. Подъемные платформы отключены.

Голос и тон

Пишите как профессионал, а не как маркетолог. Короткие предложения. Конкретные существительные. Никаких модных словечек.

Делать

- Напишите название бренда FlytBase. С заглавной буквы F, с заглавной буквы B.
- Используйте только обычные дефисы.
- Напишите заголовки в виде предложений.
- Укажите результат, а не характеристику.

Не

- Используйте длинные или короткие тире.
- Используйте эмодзи в описании товаров, маркетинге или коде.
- Напишите Flytbase, Flytbase, FLYTBASE или FLytbase.
- Используйте такие термины, как синергия, рычаг или разблокировка.

Правила использования

Краткое справочное руководство для всех, кто осуществляет поставки под этим брендом. Полные правила находятся в файлах Docs/AGENTS.md и Docs/DESIGN-SYSTEM.md.

01
По умолчанию используются серверные компоненты. Клиентские компоненты используются только для состояния, эффектов, обработчиков событий или API браузера.
02
Каждая индексируемая страница вызывает метод buildAlternates(path, locale) в функции generateMetadata. Не следует передавать параметр link rel alternate из тела страницы.
03
Весь текст, предназначенный для пользователей, использует useTranslations. Только файл src/messages/en.json редактируется вручную.
04
Импортируйте ссылки, используйте маршрутизатор, используйте путь и перенаправляйте из @/i18n/navigation. Никогда не используйте next/link или next/navigation.
05
Встроенные стили запрещены. CSS-модули запрещены. Только утилиты Tailwind и классы токенов.
06
Экспорт по умолчанию запрещен вне специальных файлов Next.js (page, layout, error, loading, notfound).

Единая платформа для всего вашего бэк-офиса.
Бесконечное количество агентов, работающих круглосуточно.

Заполнитель для инфографики BVLOS

Путь BVLOS

Получать все необходимые разрешения самостоятельно, для каждого объекта отдельно, или работать в рамках управляемого сервиса?

структура ROI

Как обеспечить выделение бюджета на следующий этап, если результаты ограничены одним вариантом использования?

Заполнитель для инфографики ROI

Заполнитель для инфографики данных

Данные в разведку

Как превратить терабайты видеоматериала в реальные действия, не завалив команду просмотром отснятого материала?

ИТ и соответствие нормативным требованиям

Где хранятся данные, кто имеет к ним доступ и соответствует ли оборудование требованиям NDAA?

Заполнитель для инфографики по ИТ