EORA Visual Design
Основы
Сетка / Цвет / Шрифт / Геометрия
Этот блок нужен для демонстрации отступов и только
1. Так блок выглядит с настроенными отступами:
2. Так выглядит режим редактирования блока:
Отступы
Цвет фона
Цвет заливки блока
Тексты и другие элементы впритык к верхнему и нижнему краю блока
Если у блока должна быть картинка на фоне, то она задается в режиме редактирования блока, при этом отступы от верхнего и нижнего края также задаются не через настройки (там они будут 0), а через редактирование
Cетка.
В тильде размеры отступов не всегда кратны 4 px, т.е. размещение всего с модулями 8 или 4 px проблематично.

Колонки и отступы в тильде при экранах

>1200px: 20px — 60px — 40px — 60px — 40px — … — 60px - 20px.

<1200px: 10px — 60px — 20px — 60px — 20px — … — 60px - 10px.

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

На основе этого минимальный элемент будет 5px
модуль нашей системы.
Отступ от блока
с другой темой:
Десктоп 4 (120px)
Мобилка 3 (90px)

Рамка обозначает границы зеро блока. Тупо для его понимания
Это, конечно, прикольно все.
Но юзать в тильде не удобно
Так что она есть
Но идите на

есть вот картинка

на этом все
Отступ от блока этой же темы, но, желательно, того же фона:
Десктоп: 1.5 (45px)
Мобильник: 1 (30px)
Отступ задается в настройках если блок не на весь экран.
Для удобства, оперировать будем тем, как делим экран
1 колонка. 1200+ = 1160px; 960+ = 940px; 640+ = 620px; 480+ = 460px; 320+ = 300px
2 колонки. часть1. 1200+ = 560px; для 960+ = 460px; 640+ = 300px; 480+ НЕТ; 320+ НЕТ
2 колонки. часть 2. 1200+ = 560px; для 960+ = 460px; 640+ = 300px; 480+ НЕТ; 320+ НЕТ
3 колонки. часть 1. 1200+ = 360px; для 960+ = 300px; 640+ = НЕТ; 480+ НЕТ; 320+ НЕТ
3 колонки. часть 2. 1200+ = 360px; для 960+ = 300px; 640+ = НЕТ; 480+ НЕТ; 320+ НЕТ
3 колонки. часть 3. 1200+ = 360px; для 960+ = 300px; 640+ = НЕТ; 480+ НЕТ; 320+ НЕТ
Нестандарт подчиняется предыдущим. Типо как тут. Можно и с чеивертью. 2/3. 1200+ = 760px; 960+ = 620px; 640+ = 620px; 480+ = НЕТ; 320+ = НЕТ
Нестандарт подчиняется предыдущим. 1/3. 1200+ = 760px; 960+ = 620px; 640+ = 620px; 480+ = НЕТ; 320+ = НЕТ
4 колонки. часть 1. 1200+ = 260px; для 960+ = 220px; 640+ = 2 колонки; 480+ НЕТ/2 колонки 220 px; 320+ НЕТ
Отступы от края сетки: для экрана 1200+: 20px, остальное: 10px
Рекомендации по другим отступам:

нижний отступ у последнего блока секции в мобильной версии если он темный не 90px, а 105, так как визуально это уравнивается со светлым
XXL: 120px
L: 60px
M: 40px
XS: 20px
XXS: 10px
S: 30px
XL: 90px
Цвет
Цвет бренда:
#ffcc33
Акцент
#ffffff
Фон светлой темы
Текст желтых кнопок
Заголовки темной темы
#f5f5f5
Фон светлой темы
Серые кнопки
Основные цвета и их применение:
#d8d8d8
Текст темной темы
#c4c4c4
Недоступные кнопоки
#fff099
#e6b228
Иллюстрации, иконки
#ffe05f
#ffcc33
#ffffff
#f5f5f5
#d8d8d8
#c4c4c4
#515151
#333333
#414141
#aeaeae
#868686
#4bc8dc
#f03c5a
#41375f
#d1991c
##eaeaea
#232323
#606060
#fff4c7
Только если дохрена времени
#e6b228
Замена цвета бренда для темного фона
#333333
Фон темной темы
Заголовки светлой темы
Серые кнопки
#515151
Текст светлой темы
#4bc8dc
Пока не юзаю:
Тип все ок
#f03c5a
Пока не юзаю:
Ошибки
Типографика
Lvl1
Lvl2
Lvl3
Text L
Text M
Text S
Text XS
Text M
Text S
Text XS
Fira
Sans
Fira
Sans
#333333
#515151
#333333
#333333
Тип текста
Цвет
св тема
Размер
от 640
Жирность светлая тема
80
40
40
28
Bold
Light
Bold
Bold
Межстроч.
интервал
1 / 1.25
1.25
1 / 1.25
1.25
Жирность темная тема
Размер
до 640
Semi B
Light
Semi B
Semi B
40
20
30
22
Жирность светлая тема
Bold
Light
Bold
Bold
Жирность темная тема
Semi B
Light
Semi B
Semi B
#515151
#515151
#515151
#515151
20
20
16
16
Light
Semi B
Light
Semi B
1.5
1.5
1.56
1.56
Light
Medi
Light
Medi
18
18
16
16
Light
Medi
Light
Medi
Light
Norm
Light
Norm
#515151
#515151
12
12
Light
Medi
1.67
1.67
Light
Medi
12
12
Light
Medi
Light
Norm
Заголовок большой темы
Текст к этой главе. Какое-то вступление.
Либо это единственные заголовок и подпись
какого-то важного блока
Отступает от заголовка на 30px desc/20px mob
Заголовок большой темы
Текст к этой главе. Какое-то вступление.
Либо это единственные заголовок и подпись
какого-то важного блока
Отступает от заголовка на 30px
Заголовок подтемы
Подтема отступает на 90px/60 от других блоков темы
Скорее всего в главе таких много. Возможно, в несколько колонок.
Отступает от заголовка на 20px/10
Заголовок подтемы
Подтема отступает на 90px/60 от других блоков темы
Скорее всего в главе таких много. Возможно, в несколько колонок.
Отступает от заголовка на 20px
Заголовок подтемы
Подтема отступает на 90px/60 от других блоков темы
Скорее всего в главе таких много. Возможно, в несколько колонок.
Отступает от заголовка на 20px/10
Заголовок подтемы
Подтема отступает на 90px/60 от других блоков темы
Скорее всего в главе таких много. Возможно, в несколько колонок.
Отступает от заголовка на 20px
Геометрия
- не скругляем углов
- смещаем обводку влево и вниз
- искусственно добавляем обводку
- не усложняем геометрию
- используем акцент желтого цвета
- используем тень у блоков
- не используем тень на кнопках
- используем «переходы» в паттернах