Логотип Volt UI
Студія темCSS-змінні, готові до експорту

Спроєктуйте свою систему.

Налаштуйте кожен семантичний токен, порівняйте світлий і темний режими та експортуйте готову для продакшену тему Volt UI, не виходячи з браузера.

Редактор

Основи теми

Налаштування темиДайте назву, оберіть початкову палітру, а тоді доопрацюйте деталі.
Почати з

Згенерувати палітру

Перцептивні шкали OKLCH із перевіреним контрастом тексту, одразу для обох режимів.

Craft one in Palette Crafter ↗
Токени кольоруРедагуйте світлу й темну палітри окремо.СвітлаТемна
ТлоПолотно сторінки#f7fbffТекстОсновний текст#172938ПоверхняКартки й панелі#f7fbffТекст поверхніТекст на поверхнях#172938ПриглушенийЛедь помітні заливки#eef6fbПриглушений текстДругорядний текст#647888МежаЛінії та контури#d4e6efПолеМежі форм#d4e6efОсновнийГоловна дія#1896d4Текст основногоТекст на основному#ffffffВториннийДругорядна дія#32b7cfТекст вторинногоТекст на вторинному#ffffffУспіхПозитивний стан#2bb891Текст успіхуТекст на успіху#ffffffПопередженняСтан обережності#d9b03dТекст попередженняТекст на попередженні#172938ПомилкаСтан помилки#d64c7aТекст помилкиТекст на помилці#ffffffІнфоІнформаційний стан#268ee8Текст інфоТекст на інфо#ffffffКільцеКолір фокуса#1896d4
Форма та відчуттяНалаштуйте структурні токени, спільні для обох режимів.
Radius 6px
Border 1px
Focus ring 2px
Shadow 10%
Згенерований CSSВставте це у пресет теми Volt або в таблицю стилів застосунку.
Завантаження редактора…