Design System v4 · Dice

env: demo · UI Kit v0.3.6

Зары — colors × values

white
red
black

Sizes

xs
sm
md
lg
xl

CSS dice — 50 вариантов по группам

Грани кубей, а не овалы: чистый HTML/CSS без PNG. 25 разных визуальных идей, каждая показана парой светлый/тёмный.

Design exploration · 50 5 групп · 25 самостоятельных идей · 2 тона в каждой паре

Glass

мягкое стекло · 5 самостоятельных пар
01 · Базовое преломление двойной луч и голубая глубина · светлый
01 · Базовое преломление двойной луч и голубая глубина · тёмный
02 · Мягкая линза выпуклая грань и широкая внутренняя тень · светлый
02 · Мягкая линза выпуклая грань и широкая внутренняя тень · тёмный
03 · Каустический свет разорванные блики по двум диагоналям · светлый
03 · Каустический свет разорванные блики по двум диагоналям · тёмный
04 · Ледяной скол холодный срез с острым внутренним ребром · светлый
04 · Ледяной скол холодный срез с острым внутренним ребром · тёмный
05 · Мокрое стекло капельный блик и тяжёлое основание · светлый
05 · Мокрое стекло капельный блик и тяжёлое основание · тёмный

Plastic

пластик · 5 самостоятельных пар
01 · Soft-touch бархатистая поверхность без блика · светлый
01 · Soft-touch бархатистая поверхность без блика · тёмный
02 · Литая форма толстый кант и след пресс-формы · светлый
02 · Литая форма толстый кант и след пресс-формы · тёмный
03 · Конфетный глянец один яркий студийный софтбокс · светлый
03 · Конфетный глянец один яркий студийный софтбокс · тёмный
04 · Ребристый пластик тонкие полосы меняют боковой свет · светлый
04 · Ребристый пластик тонкие полосы меняют боковой свет · тёмный
05 · Молочный поликарбонат свет проходит сквозь цветной объём · светлый
05 · Молочный поликарбонат свет проходит сквозь цветной объём · тёмный

Metal

металл · 5 самостоятельных пар
01 · Шлифованная сталь горизонтальная щётка и холодный кант · светлый
01 · Шлифованная сталь горизонтальная щётка и холодный кант · тёмный
02 · Анодированный металл цветной оксидный перелив · светлый
02 · Анодированный металл цветной оксидный перелив · тёмный
03 · Хромированная грань жёсткая зеркальная полоса · светлый
03 · Хромированная грань жёсткая зеркальная полоса · тёмный
04 · Кованая поверхность мелкие неровности ловят точки света · светлый
04 · Кованая поверхность мелкие неровности ловят точки света · тёмный
05 · Чёрный титан двойной тёмный кант и стальной порог · светлый
05 · Чёрный титан двойной тёмный кант и стальной порог · тёмный

Matte

матовые поверхности · 5 самостоятельных пар
01 · Меловая грань сухой цвет и мягкий рассеянный край · светлый
01 · Меловая грань сухой цвет и мягкий рассеянный край · тёмный
02 · Каменная кромка тяжёлая внутренняя тень без блика · светлый
02 · Каменная кромка тяжёлая внутренняя тень без блика · тёмный
03 · Пудровая тень цвет растворяется к центру · светлый
03 · Пудровая тень цвет растворяется к центру · тёмный
04 · Глубокий каучук утопленные ямочки и глухой контраст · светлый
04 · Глубокий каучук утопленные ямочки и глухой контраст · тёмный
05 · Матовая керамика тонкая глазурная линия по ребру · светлый
05 · Матовая керамика тонкая глазурная линия по ребру · тёмный

Other

экспериментальные поверхности · 5 самостоятельных пар
01 · Неоновая кромка светится край, а не вся грань · светлый
01 · Неоновая кромка светится край, а не вся грань · тёмный
02 · Перламутр молочная дуга и радужный сдвиг · светлый
02 · Перламутр молочная дуга и радужный сдвиг · тёмный
03 · Торцевое дерево направленная текстура и тёплая фаска · светлый
03 · Торцевое дерево направленная текстура и тёплая фаска · тёмный
04 · Тонкая призма цветной спектр на внутреннем срезе · светлый
04 · Тонкая призма цветной спектр на внутреннем срезе · тёмный
05 · Голографическая плёнка несколько независимых цветных отражений · светлый
05 · Голографическая плёнка несколько независимых цветных отражений · тёмный