Мрежа и стил
Невидимият ред зад всеки макет: 8-пикселова базова мрежа, ограничен набор радиуси и три нива сенки. Когато всички ползват едни и същи токени, всичко изглежда „от една ръка" — без да си пишем.
Базова мрежа 8px
Всички отстояния, размери и позиции са кратни на 8 (с 4 за фини корекции). Скалата е геометрична — малките стойности за вътрешности, големите за секции.
| Токен | Стойност | Типична употреба |
|---|---|---|
space-1 | 4px | Между икона и текст, фини корекции |
space-2 | 8px | Между свързани елементи (етикет → поле) |
space-3 | 12px | Вътрешност на компактни компоненти |
space-4 | 16px | Стандартен вътрешен отстъп, между карти |
space-5 | 24px | Вътрешност на карти и панели |
space-6 | 32px | Между групи съдържание |
space-7 | 48px | Между подсекции |
space-8 | 64–96px | Между големи секции на страница |
Оформление на страница
Мрежа 12 колони
Десктоп: 12 колони, канал 24px, максимална ширина на съдържанието 1200px. Таблет: 8 колони / 20px. Мобилен: 4 колони / 16px, странични полета 16–20px.
Контролни точки
640 мобилен → 980 таблет → 1240 десктоп → 1440+ широк. Дизайнът е mobile-first: базовият макет е мобилният.
Радиуси
Заоблеността е част от характера — уверена, но не игрива. Четири стойности, нищо между тях.
малки елементи, тагове, полета
бутони, входни полета, дропдауни
карти, панели, модали
пилюли, аватари, чипове
Сенки
Сенките са сини, не черни — rgba(8, 24, 51, …) — за да остават в температурата на марката. Три нива на повдигане.
Ниво 1 · покой
Карти в мрежа, полета
Ниво 2 · ховър
Повдигнати карти, дропдауни
Ниво 3 · фокус
Модали, изскачащи панели
Токени като код
Цялата система е дефинирана като CSS променливи — копирайте блока или изтеглете готови файлове за вашия стек от Ресурси.
:root {
/* Цветове */
--db-blue: #0345A5; --db-blue-600: #005FC2;
--db-blue-800: #083A80; --db-navy-900: #081833;
--db-yellow: #FDB913; --db-ink: #1F1F1F;
--db-sky-100: #EAF2FB; --db-gray-200: #E2E9F0;
/* Отстояния (8px база) */
--space-1: 4px; --space-2: 8px; --space-3: 12px;
--space-4: 16px; --space-5: 24px; --space-6: 32px;
--space-7: 48px; --space-8: 64px;
/* Радиуси */
--radius-sm: 8px; --radius-md: 12px;
--radius-lg: 16px; --radius-pill: 999px;
/* Типография */
--font-sans: 'Ubuntu', 'Segoe UI', system-ui, sans-serif;
--font-mono: 'Ubuntu Mono', ui-monospace, monospace;
}