Visual design concept about mam_mol

[ksusharimm]

Стилизация

Цвет фона белый.
В итоге определились, что даем пользователю возможность кастомизировать один акцентный цвет, который будет использоваться в ряде компонентов (кнопках, иконках и т.д.). Так как вне зависимости от яркости выбранного акцентного цвета шрифт на нем должен читаться, для пользователя будет возможность также переключить цвет шрифта между белым и черным. В этом случае цвет шрифта будет меняться только в компонентах акцентного цвета с прозрачностью не более 50%.
Также будет возможность откатить кастомизацию до цветов по умолчанию.

Цветовая схема для графиков будет строиться следующим образом:
Каждый последующий цвет выбирается на цветовом круге как контрастный по отношению к имеющимся цветам. За "нулевой" цвет берется акцентный (поставленный по умолчанию или кастомизированный пользователем), далее по порядку контрастные по указанной схеме. Эта схема работает только для цветового тона. Для того, чтобы выбранные таким образом цвета сочетались, каждый последующий цвет также варьируется по насыщенности между 40% и 50% и по яркости между 55% и 85%.

При наведении курсора на цветной кликабельный элемент графика, его яркость понижается на 20%.

[nin-jin]

Конкретно по графикам пишем сюда: #2
А тут общие концепции, принципы по которым будем разрабатывать компоненты.

[ksusharimm]

upd
Так как одним из компонентов будут белые поля ввода текста, берем цвет фона ECECF3.
Шапка приложения будет окрашиваться в фирменный цвет компании, который далее используется как акцентный на странице. Назовем его цвет Х (далее это потребуется для объяснения формулы выбора цвета).
Если к шапке должна будет добавиться вторая шапка, она будет такого же цвета, то есть цвета X, и между ними будет разделитель цвета шрифта на этом фоне (так как шрифт может быть либо темным, либо светлым в зависимости от цвета Х) с полупрозрачностью 50%. Пример скидываю.
Основной сайд-бар будет цвета 2F3955, который не будет участвовать в графиках. В случае, если со строки сайд-бара необходимо перейти на второй сайд-бар, то следующий будет такого же цвета, как фон, то есть ECECF3. Пример прикладываю.
Сайд-бары имеют черную тень с прозрачностью 50%, x = 0, y = 2, размытие 4.

Данные для формулы вычисления цвета шрифта
За акцентный цвет берем фирменный цвет компании, он же цвет Х, и его показатели H, S и B.

1. Если (S + B) > 17, при этом (S - B) < 10, цвет X слишком яркий для того, чтобы располагать на нем шрифт любого цвета. Если выполняется это условие, то значение S нужно уменьшить до такого значения, чтобы выполнялось правило (S + B) < 17, при этом (S - B) < 10. Измененный цвет X будет почти такого же оттенка, однако будет приятнее глазу.
2. Если (S + B) > 17, при этом (S - B) < 10, цвет Х остается без изменений, а шрифт подбираем по следующим правилам:
   2.1. При B < 80 шрифт белого цвета.
   2.2. При S < 45 и B > 80 шрифт будет цвета Х со значением B меньше на 60%.
   2.3. При S > 45 и B > 80, начинается самое интересное :) Если оба этих показателя увеличиваются, то черный шрифт будет использоваться при H от 30 до 195 при S = 45 и B = 80, а при H от 0 до 30 и от 195 до 360 будет использоваться белый цвет. При увеличении показателй S и B показатель H для белого шрифта будет стремиться к нулю, то есть чем больше S и B, тем меньше белого шрифта будет использоваться, пропорционально от H = 30 от H = 195. Если непонятно, иллюстрирую примером.

Можно ли использовать эти данные, чтобы построить формулу?

[ksusharimm]

upd
Цвет фона белый.
Фирменный цвет X на примере показан в квадрате внутри артбордов.
H фирменного цвета остается неизменным.
Для верхней панели S = 50, B = 80.
Для сайд-бара S = 10, B = 95.
Для чекбокса, радио-баттонов и свитчеров цвет активной заливки S = 60, B = 90.
Второй сайдбар, выходящий из строки первого, S = 4, B = 98.
Обводка S = 30, B = 80.
Неактивная кнопка S = 0, B = 90.
Надпись на неактивной кнопке S = 10, B = 50.
Примеры cкидываю.

[nin-jin]

Текущие договорённости:

1. Цвета интерфейса приложения будут строиться от базового цвета по формулам.
2. Базовый цвет задаётся дизайнером и вносится разработчиком.
3. Попробуем два варианта подбора цветов для графиков:
   3.1. По формулам относительно базового цвета.
   3.2. Предопределённая дизайнером фиксированная палитра на 16 цветов. При выводе большего числа графиков, считаем, что пользователь не должен ожидать, что все цвета будут различимы и просто повторяем цвета из палитры.

[nin-jin]

Предлагаю следующие правила:

1. Базовый размер шрифта: 12pt.
2. Семейство шрифтов: 'Segoe UI', Frutiger, 'Frutiger Linotype', 'Dejavu Sans', 'Helvetica Neue', Arial, sans-serif.
3. Высота линии: 1.5
4. Отступы задаём в vmin.
5. Размеры шрифтов в rem.
6. Размеры скруглений в rem.
7. Ограничения на размеры в rem.

vmin - 1% от минимума из ширины и высоты окна браузера.
rem - базовый размер шрифта.

[nin-jin]

От vmin пришлось отказаться в пользу rem, так как субпиксельные размеры вызывают косяки рендеринга в Хроме.

Так как возражений не последовало, то считаю вопрос утверждённым.