Люди важнее механик
Мы показываем не набор функций сервера, а то, что игроки могут создать, пережить и запомнить вместе.
Brand systemВерсия 1.0 · 2026
FoxWorld — это люди
Брендбук для живого мира
Общая система решений для продукта, контента и интерфейса. Она помогает делать новые страницы узнаваемыми без копирования одной и той же композиции.
mark / 01Стратегическая основа
FoxWorld — общее место, а не набор игровых функций
Бренд строится вокруг сообщества, общего мира и накопленной истории. Каждая страница должна отвечать не только на вопрос «что здесь можно сделать», но и «зачем это важно людям».
Главное сообщение
Мир, который создают игроки.
Это не рекламный слоган на все случаи, а фильтр решений: игрок должен оставаться автором происходящего, а интерфейс — помогать увидеть его вклад.
Позиционирование
Закрытый Minecraft SMP для людей, которым важны совместные проекты, доверие и мир с памятью — без платных преимуществ и навязанного сценария.
Мир хранит историю
Проекты, места, сезоны и профили должны складываться в одну живую хронику сообщества.
Тепло без инфантильности
FoxWorld дружелюбен и выразителен, но не превращается в игрушечный интерфейс или шумный игровой портал.
Ясность создаёт доверие
Правила, статусы и последствия действий объясняются прямо. Визуальная красота никогда не скрывает смысл.
Идентичность
Знак простой, пространство вокруг него — спокойное
Лисья голова — основной узнаваемый знак FoxWorld. В продукте она работает как самостоятельная иконка или в связке с текстовым названием FoxWorld, набранным Geist Sans Semibold.
FoxWorldИспользуй
- • Исходный квадратный PNG без изменения пропорций.
- • Размер от 32 px в интерфейсе; 24 px допустим только для favicon.
- • Светлый знак на фирменном оранжевом или спокойном нейтральном фоне.
- • Текстовую связку «знак + FoxWorld» с заметным свободным пространством.
Не используй
- • Не растягивай, не поворачивай и не обрезай знак.
- • Не перекрашивай лису и не добавляй обводки или новые эффекты.
- • Не ставь логотип прямо на пёстрое изображение без спокойной подложки.
- • Не собирай альтернативные маскоты и не заменяй знак emoji.
Цветовая система
Один фирменный акцент, нейтральная основа, честные статусы
Оранжевый обозначает FoxWorld и главное действие. Он не подменяет значения success, warning, danger и information. В коде всегда используются семантические токены, значения которых адаптируются к теме.
Fox orange
#E87534 / #F28A4Evar(--fw-brand-primary)Идентичность, главное действие, выбранное состояние
Ink
#18181B / #FAFAFAvar(--fw-neutral-strong)Сильный текст, контрастные брендовые поля
Success
#16A34A / #4ADE80var(--fw-status-success)Только подтверждённый успех и здоровое состояние
Warning
#D97706 / #FBBF24var(--fw-status-warning)Ожидание, внимание, обратимое ограничение
Danger
#DC2626 / #F87171var(--fw-status-danger)Ошибка, риск и необратимое действие
Information
#2563EB / #60A5FAvar(--fw-status-info)Нейтральная системная информация
Поверхности вместо новых оттенков
Структура создаётся уровнями поверхности, отступами и типографикой. Не добавляй новый серый или оранжевый ради одной карточки.
Overlay · level 3
Card · level 2
Section · level 1
Правило 80 / 15 / 5
Ориентир, а не математическое ограничение: интерфейс остаётся нейтральным, а оранжевый сохраняет силу главного акцента.
Типографика
Geist говорит ясно, масштаб создаёт характер
Geist Sans используется для интерфейса и редакционного текста. Geist Mono — только для идентификаторов, версий, координат и другой технической метаинформации.
Display
01
Ключевая мысль
40–60 / 1.0 / 700
H1
02
Заголовок страницы
32–48 / 1.05 / 700
H2
03
Заголовок секции
24–36 / 1.1 / 650
H3
04
Название блока
20–24 / 1.2 / 600
Body
05
Основной текст для чтения
16 / 1.65 / 400
Meta
06
Дата, статус, идентификатор
12 / 1.5 / 500
Иерархия читается с первого взгляда
Один H1 на страницу, короткие H2, длина строки основного текста 55–75 знаков и спокойный межстрочный интервал. Eyebrow — короткий ориентир, а не второй заголовок.
Типографика не становится декором
Не используй капс для длинного текста, более трёх весов в одном блоке, центрирование больших абзацев и моноширинный шрифт для обычного интерфейса.
Изображения и атмосфера
Показывай следы жизни, а не абстрактный Minecraft
Изображение должно доказывать, что мир кем-то прожит: архитектура, встречи, совместная работа, маршруты и места с историей важнее эффектного, но безличного пейзажа.
Главный сюжет
Люди и созданные ими места
Сюжет
В кадре понятно, что происходит и почему это связано с игроками.
Кадрирование
Широкие планы для секций, выраженная точка внимания и место под текст.
Обработка
Естественный цвет мира, мягкое затемнение под текст, без тяжёлых фильтров.
Композиция страниц
Секции задают ритм, карточки объясняют детали
Не заключай каждую часть страницы в ещё одну рамку. Полноширинный фон отделяет крупную смысловую главу; карточка нужна только самостоятельной сущности или действию.
01
Public Content
Главная, новости, правила, каталоги и публичные профили
Выразительное вступление → смысловые секции → ясное действие
02
Public Immersive
Карта и другие полноэкранные среды
Canvas на весь экран → компактный доступный слой управления
03
Player Workspace
Личный кабинет, настройки и повседневные задачи игрока
Навигация задачи → рабочая область → одно главное действие
04
Operator Console
Плотные административные и диагностические интерфейсы
Контекст и права → данные → безопасные операционные действия
Ритм Public Content
Один смысл — одна секция
Чередуй свет, нейтральную поверхность, изображение и акцент. Различия должны объясняться содержанием, а не желанием украсить пустое место.
Hero · обещание и действие
Content · объяснение
Immersive · история мира
CTA · следующий шаг
Интерфейсные компоненты
Переиспользуй поведение, варьируй композицию
Единый бренд рождается из предсказуемых состояний: кнопка, форма, статус и карточка должны вести себя одинаково во всех разделах, даже если страницы выглядят по-разному.
Действия
На видимой области — одно главное действие. Destructive не становится оранжевым; disabled сохраняет читаемую форму и не выглядит выбранным.
Состояния
АктивноОжидаетОшибкаИнформацияАрхив
Значение передаётся текстом, иконкой или формой — не только цветом. Не показывай raw enum: преобразуй техническое состояние в понятный человеку язык.
Обязательная матрица состояний
Default → hover → active
Keyboard focus
Disabled / loading
Empty / error / success
Light / dark
320 / 768 / 1440 px
200% zoom
Reduced motion
Голос и текст
Говорим как участник сообщества, который хорошо знает систему
Голос FoxWorld тёплый, прямой и уверенный. Мы не заигрываем с игроком, не прячемся за канцеляритом и не обещаем того, чего продукт не может доказать.
Человечно
«Расскажи о себе»
Не: «Заполните биографические данные пользователя»
Конкретно
«Маркер появится после проверки»
Не: «Ваш запрос будет обработан в установленном порядке»
С уважением
«Не удалось сохранить. Попробуй ещё раз»
Не: «Вы совершили недопустимое действие»
Иерархия сообщений
- 1. Действие: что человек может сделать сейчас.
- 2. Последствие: что изменится после действия.
- 3. Контекст: детали, ограничения и техническая метаинформация.
Словарь FoxWorld
- Игрок
- не пользователь, когда речь о жизни сообщества
- Мир
- не инстанс и не продуктовая платформа
- Место
- точка с контекстом и историей, не pin
- Присоединиться
- не конвертироваться и не активироваться
Дизайн → разработка
Каждое решение должно быть воспроизводимым
Брендбук полезен только тогда, когда новый экран можно собрать из существующих правил, проверить и поддерживать. Ниже — обязательная последовательность для любой новой страницы.
Порядок реализации
- 1
Выбери шаблон
Public Content, Public Immersive, Player Workspace или Operator Console.
- 2
Сформулируй главный смысл
Одна задача страницы, одно основное действие и понятный результат для человека.
- 3
Собери семантику
Используй --fw-* токены, уровни surface 0–3 и существующие UI-примитивы.
- 4
Опиши состояния
Normal, hover, focus, disabled, loading, empty, error и success до полировки.
- 5
Проверь систему
Обе темы, клавиатура, reduced motion, 200% zoom и ширины 320 / 768 / 1440 px.
Definition of done
- Страница выглядит частью FoxWorld без логотипа в каждом блоке.
- Смысл и главное действие понятны до изучения деталей.
- Нет новых hardcoded-цветов при наличии семантического токена.
- Карточки не вложены друг в друга без смысловой причины.
- Статусы понятны без цвета, focus видим, touch target не меньше 44 px.
- Новый паттерн задокументирован и показан в UI-стенде.
Источники истины
Семантика — docs/brand. Токены — app/globals.css. Компоненты — components/ui. Проверка — npm run brand:check.
Сначала правило, затем вариант
Если новый экран требует исключения, сначала объясни продуктовую причину. После этого решение можно добавить в систему и сделать доступным остальным страницам.