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

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

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

Загрузите навыки работы с брендом.

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

Цвета

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

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

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

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

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

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

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

Эвкалипт

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

Холодный серый (светлая основа)

В некоторых местах акцент делается на эвкалипте, а в других - на других.

Семантические цвета статуса

Функциональный слой, отдельный от бренда. Каждому статусу присваивайте иконку и метку, никогда не используйте только цвет. Для статуса «Успех» используется эвкалиптовый цвет; для статусов «Ошибка», «Предупреждение», «Информация», «Прогресс» и «Обзор» используются отдельные оттенки.

Ссылка осуществляется по имени токена, никогда по шестнадцатеричному значению. Токены объявляются в файле 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 - АвтономияОбновлено 21.04.2026

brandGuidelines.components.dotStreamLabel

brandGuidelines.components.dotStreamNote

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

Базовая сетка 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

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

СМИ

Как видео и другие активные элементы интегрируются в остальную систему. Один общий компонент (AutoplayVideo) содержит все автоматически воспроизводимые клипы на сайте - главный ролик на главной странице, видеоролик о клиентах на главной странице, демонстрация бренда - поэтому воспроизведение остается согласованным.

Видео с автоматическим воспроизведением

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

ВОРОТАВоспроизводится только тогда, когда отображается (IntersectionObserver, пороговое значение 0,25) и вкладка видна. Немедленно приостанавливается при изменении любого из условий.
ОГРАНИЧЕННАЯ ДВИЖЕНИЕHonors prefers-reduced-motion: reduce. Нет автовоспроизведения; постер отображается с кнопкой ручного воспроизведения.
НЕМОЙПереключатель закреплен в правом нижнем углу. Значок динамика меняется при каждом нажатии; функция play() вызывается повторно, поэтому включение звука никогда не приводит к молчаливой паузе видео.

AutoplayVideo - home/Platform/devices.webm via Bunny Stream

Голос и тон

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

Делать

- Напишите название бренда 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).

Форматированный текст

Заголовки, основной текст и строчные символы в том виде, в котором они отображаются в длинных текстах - тематических исследованиях, сообщениях в блогах и документах.

Heading 1

Heading 2

Heading 3

Heading 4

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.

First ordered item
Second ordered item
Third ordered item

First unordered item
Second unordered item
Third unordered item

Text link

Bold text

Emphasis