НА СТАРТ Styleguide

Фундамент бренда: цветовая палитра, типографика, радиусы и отступы. Единственный источник правды для всех поверхностей НА СТАРТ.

База — текст и фон

Акцентная палитра — 7 семей × 4 интенсивности

100% — для маркеров, блоков, рамок таблиц, сносок, обложек, разделительных слайдов. 75% — для блоков. 50% — для блоков и фона. 25% — для фона.

Фирменные элементы

⭐

Звёздочка

⭐ / ✦

Декор на акцентных слайдах · буллит · маркер выделения · часть логотипа

Спортивное контурное поле

cyan · green · orange · purple · blue

Фон карточек амбассадоров · разделители слайдов · обложки по виду спорта · social → подробно в Brand assets

Типографика

Радиусы

Переиспользуемые блоки. Все компоненты собираются из токенов раздела 01, имеют единый язык бордеров, теней и состояний.

Story card (с фото ребёнка)

.story-card

Серёжа · хоккей

11 лет · Челябинск

64%

Алина · фигурное

9 лет · Казань

42%

Канонический формат сбора: фото ребёнка-крупно, имя + спорт, возраст + город, прогресс-бар с конкретным процентом.

Корневой принцип: поддержка, не помощь. Не апеллируем к жалости. Разделяем путь и приглашаем стать соучастником. Язык спорта работает в 8× лучше языка благотворительности (CTR декабрь 2025–январь 2026).

Лексика

Формула Tone of Voice

Пример поста — правильный тон

История от родителя

«Дима тренируется четвёртый год. Знаю как важны сборы перед турниром — это где он растёт быстрее всего. В этом году решили подключить НА СТАРТ: пусть его поддержит сообщество. Делюсь.»

Почему работает:

• ✓ Личная история — родитель рассказывает про своего ребёнка, не от лица фонда
• ✓ Конкретно — имя, возраст, спорт, цель (сборы перед турниром)
• ✓ Спокойно — «делюсь», не «поддержите срочно»
• ✓ Спорт-фрейм — «растёт быстрее», не «трудная судьба»
• ✕ Нет CTA «перейдите», «спасите», «уникальная платформа»

Distinctive Brand Assets (DBA по Sharp/Romaniuk) — узнаваемые знаки бренда. Используются последовательно, без альтернатив.

Логотип

На цвете (primary)

На светлом фоне

Декоративные splash-формы — рабочие активы

Извлекла каждую форму из брендбука «Концепт Фирстиль» как отдельный PNG с прозрачным фоном — можно использовать сразу: класть в hero, на карточки, фоном в макете. До получения SVG-экспорта это работает.

Источник — страница «Примеры» брендбука

Canonical-форма из Figma (vector-05 — peach sparkle)

Образец качества: чистая PNG-форма с прозрачным фоном из брендбука Без артефактов, без перекрытий. Источник — Figma «Концепт Фирстиль». Артём прислал 16.05. Используется в тестовом деке slide 05 как акцент. Жду остальные vector-01…N от Алёны для замены моих extracted-форм.

Рабочие PNG (извлечённые из скана брендбука)

Splash

#9fe3fa

Soft Star

#ecd5ff

Burst

#2bee54

Pillow

#ffddd3

Squiggle

#f1ff62

Sparkle

#0fb8ef

Quote

#326bf6

Spark

#0fb8ef

PNG лежат в /assets/nastart/shapes/ + manifest.json со списком. У некоторых есть мелкие «дырки» в местах, где другие формы перекрывали их в исходной иллюстрации — для финальных hero-кадров стоит дождаться SVG-экспорта из Figma (3dAgV7EqzKHPnaFO7Co1qB) от Алёны. Но для черновиков и социалок этим уже можно работать.

Спортивные контурные поля

Фирменный элемент НА СТАРТ для всего, что связано со спортом: контурное изображение площадки/арены/инвентаря белыми линиями на цветной плашке из палитры. Самостоятельный distinctive brand asset — используется как фон карточек амбассадоров, разделителей слайдов, обложек подборок по виду спорта, social-постов.

Соответствие «вид спорта → цвет»

Библиотека контурных полей

Готовые поля под основные виды спорта. PNG, скруглённые углы, белые линии на цветной плашке. Лежат в /assets/nastart/sport-fields/.

Хоккей

cyan-hockey-rink.png

Теннис

green-tennis-court.png

Футбол

green-soccer-field.png

Баскетбол

orange-basketball-court.png

Фехтование

coral-fencing-piste.png

Лёгкая атлетика (cyan)

cyan-athletics-track.png

Лёгкая атлетика (purple)

purple-athletics-track.png

Если для нового вида спорта (плавание, единоборства, лыжи и т.д.) контурного поля ещё нет — обращаемся к Алёне, она дорисовывает в общую библиотеку.

Карточка амбассадора — основное применение

Канонический формат карточки спортсмена-амбассадора для соцсетей, слайдов и подборок. Три слоя сверху вниз: фото амбассадора с лёгким наклоном → контурное поле его вида спорта → плашка цвета из палитры.

Партнёрские логотипы — оформление на слайде

Канонический формат отображения логотипа официального партнёра НА СТАРТ на слайдах и в материалах. Логотип кладётся на белую прямоугольную карточку с одним скошенным/закруглённым углом, сзади выглядывает Green-splash из палитры — это и делает логотип партнёра «нашим» по стилю, не просто вставленным.

Текущие официальные партнёры

Когда появятся новые официальные партнёры — оформляем по этому же паттерну (белая карточка → скошенный угол → green-splash сзади). Источники лого партнёров — присылает Алёна.

Hero с амбассадором — основной формат

Канонический hero — Кержаков справа, лого + tagline слева, разделитель голубой плавной кривой, акцент — green-spark sparkle.

Работа с фото детей и амбассадоров

Фотография — основной носитель тона «поддержка, не помощь». Дети — на тренировках, в действии, в естественной среде. Амбассадоры — на их территории (стадион, тренировочное поле). Никаких постановочных кадров «помоги бедному».

Правила работы с фото

Амбассадоры

5 целевых аудиторий из аудита апреля 2026. Для каждой — свой канал, свой тон, свой призыв. CustDev-данные и CTR метрики обновляются.

P1 · Parasocial fan

Парасоциальный болельщик

КтоФанат Кержакова или другого спортсмена. Чувствует «знакомство» через медиа.

КаналInstagram, Telegram, ВК — публикации звезды

ТонЛичный, от первого лица. «Я прошёл этот путь сам»

«Если бы кто-то поддержал меня в 13 — я бы дошёл быстрее. Передаю дальше.»

P2 · Parent

Родитель спортсмена

Кто35–50, дети занимаются спортом. Знает цену экипировки, поездок, тренеров.

КаналВК, Telegram-сообщества родителей, школьные чаты

ТонПонимающий, без давления. Конкретика: имя, возраст, цель

«Серёжа собирает на сборы перед чемпионатом — знаю как это важно для семьи.»

P3 · Coach

Тренер

КтоТренер в школе/клубе. Видит таланты, понимает риски «слетаемости» из спорта.

КаналПрофессиональные чаты, спортивные федерации, тренерские группы

ТонТренерская идентичность. Истории про «не дали сорваться»

«Я могу дать технику, но семья не всегда тянет соревнования. Тут поддерживают системно.»

P4 · Sympathy donor

Сопереживающий донор

КтоТот, кто хочет «делать добро» вне зависимости от спорта.

КаналПодписки в Instagram/ВК на благотворительные аккаунты

ТонПрозрачность: что собрано, куда пошло. Отчёты с конкретикой

«Видеть результат — главное. Когда ребёнок поехал на турнир — это и есть итог моего вклада.»

P5 · Corporate partner

Корпоративный партнёр

КтоБренды и B2B-компании. ESG-обязательства, желание «настоящей» аффинности с темой спорта.

КаналLinkedIn, прямые встречи, презентации, PR-материалы

ТонДеловой, с цифрами охвата, регионов, CTR. Прозрачная отчётность

«У нас 58 фондов-партнёров в 25 регионах. Можем сделать совместную кампанию с измеримым impact.»

Мобильное приложение НА СТАРТ — основная поверхность продукта. Каждый донат проходит через один визуальный язык: blue primary, soft cards, splash-формы фоном, человеческие имена и истории. Ниже — ключевые экраны и паттерны donation flow.

Экраны

Выбор ребёнка

Поддержка

Экран сбора

Карточка фонда

О фонде

История спортсмена

Принципы UI

• Адресность каждой карточки. Имя, возраст, спорт, регион — без обезличенных «помогите детям».
• Прогресс — конкретный. Не «много» / «мало», а «64% · 32 100 ₽ из 50 000 ₽».
• CTA «Поддержать» — sticky bottom. Primary blue, всегда виден, не зависит от глубины скролла.
• Сторителлинг превыше количества. Лучше 5 живых историй, чем длинный список.
• Suggested amounts. 500 / 1 500 / 3 000 ₽ + «другая». Среднее выглядит как «норма».
• «Кто открыл сбор». Имя руководителя/менеджера фонда + аватар + связка с фондом. Снимает обезличенность.
• «Кто помог» social proof. Лента аватарок болельщиков + счётчик. Снимает барьер первого доната (H-C02).
• Modal-карточка спортсмена. Полноэкранная история с фото, прогрессом, иконками регалий — без скролла к CTA.
• About фонда — single screen. Описание разворачивается без перехода — снимает CR-разрыв.
• Carousel «ещё сборы». Под детальной карточкой — peer-to-peer mover на следующий сбор.
• Share после доната. «Расскажи команде» с auto-preview + дип-линк в магазин (O11 / H-A02).
• Отчёт после доната. Push с фото или видео ребёнка через 2–4 недели — закрывает peak-end rule.
• Совместный брендинг для партнёрских сборов. Логотип партнёра + НА СТАРТ в верхнем блоке. Партнёр не растворяется, но рамка остаётся НА СТАРТ.

Четыре канала, четыре тона. Везде — один бренд: splash-формы, blue, истории конкретных детей.

Шаблоны деков НА СТАРТ. Канонические виды оформления слайда — ниже. Дополнительные рабочие экземпляры — в плитках внизу.

Три вида оформления контентного слайда

Все три вида — для слайдов внутри презентации, под любую информацию. Это не титульный и не разделительный слайд: для них отдельные шаблоны. Базовые элементы общие: логотип «на старт» в левом нижнем углу, заголовок сверху-слева в фирменном цвете. Различает их форма рамки-стрелки и доступная длина заголовка.

Тип 1 — Логотип

Минимальный layout: короткий заголовок (≈2 слова) сверху-слева. Тонкая линия-стрелка начинается из правого верхнего угла, идёт по правому краю и по нижнему — упирается в логотип. Полной рамки нет, слайд «открыт» — простор под визуал/изображение. Цвет линии и заголовка перекрашивается в один из 6 цветов палитры.

Исходник PDF: slide-type-1-logo.pdf · 1920×1080

Тип 2 — Рамка

Универсальный layout: тонкая рамка-стрелка идёт от заголовка по периметру и указывает на логотип. Контент размещается внутри рамки. Подходит под слайды с двумя колонками, бул-листами, метаданными. Цвет рамки + заголовка — единый, из палитры.

Исходник PDF: three-layouts.pdf · 1920×1080

Тип 3 — Полная рамка

Layout под длинный заголовок (2–3 строки) и крупный контент. Рамка-стрелка идёт от заголовка вправо, вниз, влево и возвращается стрелкой обратно к заголовку — слайд «замкнут» рамкой. Цвет рамки и заголовка — из палитры.

Исходник PDF: slide-type-3-fullframe.pdf · 1920×1080

Пример заполнения Рамки (контент-слайд с двумя колонками)

Канонический пример наполненного слайда: две колонки в одном фрейме (Blue + Orange), у каждой — заголовок, lead-описание, bullet-list, и pill-чипы с метаданными («вклад / время / статус») — outline-капсула с лейблом + bold-текст в фирменном цвете колонки.

Структура контента: H1 (фирменный цвет колонки) → lead (Ink) → bullet-list → pill-чипы метаданных (outline-капсула + bold-цветной текст).

Что можно делать с рамкой

Цвет рамки и заголовка можно перекрашивать в любой из шести цветов основной палитры — других цветов не использовать.

Фирменная подложка для слайдов

Брендовая подложка слайда (рамка-стрелка по периметру + лого «на старт» снизу-слева) — берётся только из canonical PDF Алёны и применяется как-есть. Самостоятельные SVG-репродукции рамки/лого не использовать — они «не попадают» и Алёне приходится переделывать. Источник правды — её PDF.

Canonical-asset: podlozhka-canonical.pdf · 1920×1080. Применяется по умолчанию для всех контентных слайдов.

Цветовые варианты подложки

Синяя — основная. Используется по умолчанию для всех контентных слайдов любой деки. Остальные 5 цветов — дополнительные, для разделителей секций / акцентных слайдов / тематических кадров. Перекраска вычислительная — рамка и лого пересчитываются через alpha-blend с фоном, форма и пропорции сохраняются.

Все варианты лежат в /assets/nastart/slide-templates/podlozhka-canonical-{цвет}.png. Для других тонов рамки/лого — попросить Алёну прислать canonical PDF, перекраска делается из него за секунды.

Применение через Google Slides API

BG_URL = 'http://54.36.163.214/assets/nastart/slide-templates/podlozhka-canonical.png'

reqs = [{
    'updatePageProperties': {
        'objectId': slide_id,
        'pageProperties': {
            'pageBackgroundFill': {
                'stretchedPictureFill': {'contentUrl': BG_URL}
            }
        },
        'fields': 'pageBackgroundFill',
    }
} for slide_id in all_slide_ids]

slides.presentations().batchUpdate(
    presentationId=PID,
    body={'requests': reqs}
).execute()

Рабочие деки