Style Guide & Design System

Цветовая палитра

Минималистичная палитра с акцентом на контрасте черного и белого, дополненная мягкими градиентами и акцентными цветами.

Black
#000000
RGB: 0, 0, 0
White
#FFFFFF
RGB: 255, 255, 255
Background
#FAFAFA
RGB: 250, 250, 250
Gray
#666666
RGB: 102, 102, 102
Success Green
#4ade80
RGB: 74, 222, 128
Error Red
#ef4444
RGB: 239, 68, 68

Градиенты

Мягкие пастельные градиенты используются для фонов и декоративных элементов.

Gradient 1
Gradient 2
Gradient 3

Типографика

Основной шрифт — Inter. Используется жирное начертание для заголовков (800-900) и регулярное для основного текста (400-600).

Hero Text / 72px / Bold 800
brandme app
Heading 1 / 56px / Bold 800
Люди не умеют упаковывать себя
Heading 2 / 40px / Bold 800
BrandMe App — это онлайн-сервис
Heading 3 / 28px / Bold 700
Константин Морошин
Body Large / 20px / Regular 400
Вместо громоздкого сайта или устаревшего резюме вы получаете лаконичную, визуально выверенную страницу, которую удобно использовать как ссылку в био.
Body Regular / 16px / Regular 400
Эксперт в области ИИ, CEO Algoritmic Lab, разработчика web3/AI проектов
Body Small / 14px / Regular 400
Москва, Россия • Русский, Английский

Кнопки

Два основных стиля кнопок: заполненная черная (primary) и контурная (secondary).

Иконки

Простые графические элементы с четким значением.

✓
Success / Check
✕
Error / Cross
◉
Brand Icon

Теги

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

Авторство песен Звукопроизводство Управление бюджетом Запись в студии

Карточки профиля

Карточки с фотографией, именем, описанием и кнопками действий.

👤
Константин Морошин
CEO

Эксперт в области ИИ, CEO Algoritmic Lab, разработчика web3/AI проектов

Отступы и интервалы

Система 8px grid для согласованных отступов.

8px (xs)
16px (sm)
24px (md)
32px (lg)
48px (xl)
64px (2xl)

Дизайн-принципы

Минимализм

Чистый дизайн с фокусом на содержании, много воздуха и пространства.

Контраст

Сильный контраст черного и белого для четкой иерархии.

Типографика

Крупные жирные заголовки как основной визуальный элемент.

Скругления

Мягкие скругленные углы (16-24px) для дружелюбного восприятия.