Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤7
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥14🌚9🤔4❤2
This media is not supported in your browser
VIEW IN TELEGRAM
Быстрее подобрать шрифт для логотипа поможет joshpuckett
Помимо того, что здесь можно в удобном виде просмотреть все шрифты, установленные на компьютере, вы можете загрузить PNG или SVG вашего логотипа, чтобы подставить его ко всем доступным шрифтам.
👉 @PortalToDesign
Помимо того, что здесь можно в удобном виде просмотреть все шрифты, установленные на компьютере, вы можете загрузить PNG или SVG вашего логотипа, чтобы подставить его ко всем доступным шрифтам.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7
image_2026-04-09_09-42-55.png
190.5 KB
Сплошные vs прозрачные цвета в UI-дизайне
Я посмотрел сотни цветовых систем, и у большинства возникает одна и та же проблема
В светлой теме тени помогают передать уровни (elevation).
В тёмной теме тени почти не видны, поэтому используют более светлые фоновые слои.
Пока всё логично. Но вот в чём проблема:
Элементы переднего плана (бейджи, алерты, кнопки) обычно делаются со сплошными цветами.
А значит…
Они выглядят по-разному в зависимости от фона, на котором находятся.
❌ Один и тот же компонент → разный внешний вид на разных уровнях elevation
Поэтому я попробовал другой подход:
Использовать прозрачные цвета для foreground-компонентов вместо сплошных.
Результат:
Они адаптируются к фону и выглядят более консистентно на разных уровнях.
Это небольшое изменение, но оно делает систему более целостной, особенно в тёмной теме.
Интересно, вы пробовали использовать прозрачные цвета в своих дизайн-системах?
С какими минусами сталкивались?🤔
👉 @PortalToDesign
Я посмотрел сотни цветовых систем, и у большинства возникает одна и та же проблема
В светлой теме тени помогают передать уровни (elevation).
В тёмной теме тени почти не видны, поэтому используют более светлые фоновые слои.
Пока всё логично. Но вот в чём проблема:
Элементы переднего плана (бейджи, алерты, кнопки) обычно делаются со сплошными цветами.
А значит…
Они выглядят по-разному в зависимости от фона, на котором находятся.
Поэтому я попробовал другой подход:
Использовать прозрачные цвета для foreground-компонентов вместо сплошных.
Результат:
Они адаптируются к фону и выглядят более консистентно на разных уровнях.
Это небольшое изменение, но оно делает систему более целостной, особенно в тёмной теме.
Интересно, вы пробовали использовать прозрачные цвета в своих дизайн-системах?
С какими минусами сталкивались?
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤10
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤8
Please open Telegram to view this post
VIEW IN TELEGRAM
Разница между просто хорошим тёмным UI и отличным?
Внутренняя тень 1px с прозрачностью 2%. Внешняя тень 1px с прозрачностью 25%.
Детали решают.
Забирай:
• Внутренняя тень: #ffffff @ 2% opacity (Y: 1px, inset)
• Внешняя тень: #000000 @ 25% opacity (Y: 0px)
👉 @PortalToDesign
Внутренняя тень 1px с прозрачностью 2%. Внешняя тень 1px с прозрачностью 25%.
Детали решают.
Забирай:
• Внутренняя тень: #ffffff @ 2% opacity (Y: 1px, inset)
• Внешняя тень: #000000 @ 25% opacity (Y: 0px)
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤8
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7
Please open Telegram to view this post
VIEW IN TELEGRAM
❤7
Please open Telegram to view this post
VIEW IN TELEGRAM
❤4😁1