Opium.Fill — стандартизация цветовой схемы глазами программиста

Скрипты и советы | 27 апреля 2020 2 011

Уроки CSS на Хабрахабре, habrahabr.ru, CSS, JavaScript, Интерфейсы, Графический дизайн, Дизайн, color management, css, javascript, react, html, управление цветом, material design, figma, ui, uikit, дизайн, design system,

Синее лицо, из глаз растут грибы

Привет. Сегодня покажу вам цветовую схему, которой пользуюсь последние 2 года. Она была придумана, чтобы на проблемном проекте избавиться от огромного количества переменных в CSS. А потом оказалось, что эти принципы можно применить почти к любому проекту.

В общем, попробую объяснить, как дизайнеры используют цвет в UI и как всё это можно «типизировать», не вгоняя дизайнеров в жёсткие рамки. Приведу примеры реализации на React JS (для разработчика) и в Figma (для дизайнера). Привязки к React и Figma у схемы нет, просто мне в них привычнее.

В схеме нет ничего хитрого и уникального (может, только название). Все идеи висят в воздухе. Можно воспринимать её как мой best practice по работе с цветом в приложениях. Opium.Fill — это общие принципы, совмещённые с любовью давать всему подряд имена.

Систему можно использована совместно с Material Design.

Статья написана для front-end разработчика и немного для дизайнера.
Читать дальше →

Источник: Уроки CSS на Хабрахабре

[Перевод] Ещё пять идей, как прокачать свое мастерство фронтенд-разработчика (декабрь 2019)

Цель публикации — подкуинуть несколько идей, что можно повторить, чтобы повысить свое мастерство front-end...

Подробнее
Каскадные Таблицы Стилей / Про цвета и input'ы

Вступление Привет, Хабр! Это мой первый хабратопик. Надеюсь, его прочитает хотя бы полтора верстальщика. Если после...

Подробнее
Дизайн-разбор ссылок в вёрстке

Привет! Это первая статья из серии разборов элементов веб-вёрстки для дизайнеров интерфейсов (и немного аналитиков)....

Подробнее
Полный гайд по CSS Flexbox с примерами из практики

Привет! Сегодня мы поговорим про flexbox в css. Это очень важная тема, в которой должен разбираться каждый...

Подробнее
Боль фронтов, или что нам нужно от дизайнеров

Пройдя путь от верстальщика-стажёра до сеньора фронтенд-разработчика, я работал в разных командах и с разными...

Подробнее
Простые советы начинающему веб-дизайнеру. Бракуем макет

Привет. В результате работы с начинающими веб-дизайнерами прослеживаются повторяющиеся ошибки — общие в не зависимости...

Подробнее

💬 Комментарии

В связи с новыми требованиями законодательства РФ (ФЗ-152, ФЗ «О рекламе») и ужесточением контроля со стороны РКН, мы отключили систему комментариев на сайте.

🔒 Важно Теперь мы не собираем и не храним ваши персональные данные — даже если очень захотим.

💡 Хотите обсудить материал?

Присоединяйтесь к нашему Telegram-каналу:

https://t.me/tcsecms

Нажмите кнопку ниже — и вы сразу попадёте в чат с комментариями