Шаблоны и примеры

Пять брендовых шаблонов 1080×1080 с UI-плашками (логобейдж 华铭 Хуамин, watermark, корнер-бейдж) рядом с примерами их использования. Все элементы — inline SVG, скачиваются прямо из браузера.

Как читать страницу

Каждый блок ниже — пара: пустой шаблон с готовыми UI-элементами бренда (логобейдж 华铭 Хуамин в углу, корнер-бейдж, фоновый watermark-иероглиф) и пример заполнения с реальным контентом. Дизайнер скачивает пустой SVG и заполняет своими данными.

Пустой шаблон — для скачивания

Пример заполнения — для референса

Доступны два формата: SVG (масштабируется без потерь, открывается в Figma / Illustrator) и PNG 1080×1080 (готов для прямой загрузки в VK / Telegram / Instagram).

Шаблон 1

Анонс экзамена

Тёмный градиент с зелёным свечением, watermark «考» (экзамен) в правой части. Корнер-бейдж — для типа экзамена (HSK / HSKK / YCT / BCT).

#0a1f0e → #0c2710 watermark: 考 corner: primary

Пустой шаблон

Пример заполнения

Шаблон 2 · Срочное

Дедлайн / напоминание

Красный градиент с виньеткой и watermark «急» (срочно) в центре. Корнер-бейдж — белая плашка «Срочно». Только для реально срочных постов.

#d9382c → #a82820 watermark: 急 corner: white

Пустой шаблон

Пример заполнения

Шаблон 3

Образовательный контент

Белый фон с зелёным акцентом сверху и тонкой внутренней рамкой. Логобейдж в primary-light. Используется для иероглифа недели, фразы дня, грамматических заметок.

#ffffff accent top: primary 6% border 2px primary 10%

Пустой шаблон

Пример заполнения

Шаблон 4

Расписание / таблица

Светлый фон + тёмная шапка 160px + зелёный разделитель 4px. В шапке — логобейдж и корнер с периодом. Основная зона — для списка дат.

#f8f9fa header 160px divider 4px

Пустой шаблон

Пример заполнения

Шаблон 5

Цитата / событие

Зелёный градиент primary с затемнением в правом нижнем углу. Watermark «华». Корнер-бейдж — белый с надписью «Событие».

#2f7537 → #265c2c watermark: 华 corner: white

Пустой шаблон

Пример заполнения

Скачивание начато