Styleguide — дизайн-системата
Вътрешна страница (noindex). Билд: 2026-06-11 16:03 UTC
Всички токени и компоненти от Фаза 1, върху реалния хедър/футър. Двете сравнения за твоето решение са отбелязани със СРАВНЕНИЕ А и СРАВНЕНИЕ Б.
Токени
Цветове
Primary (бранд зелено)
primary-50
primary-100
primary-300
primary-400 (hover)
primary-500 (база #4FC59B)
primary-700
primary-800
primary-950
Aqua (бранд циан)
aqua-50 (футър)
aqua-100 (херо фон)
aqua-200 (хедър стъкло)
aqua-600 (промо лента)
aqua-800 (текст върху aqua)
Accent (САМО промо/намаления)
accent-500 (значки)
accent-700 (промо цена)
Състояния (форми)
success-500
success-700
warning-500
warning-700
error-500
error-700
Токени
Типография
text-h1 · 32 → 44px · 800
Заглавие H1 — Персонализирани бамбукови съдове
text-h2 · 26 → 36px · 700
Заглавие H2 — Персонализирани бамбукови съдове
text-h3 · 22 → 28px · 700
Заглавие H3 — Персонализирани бамбукови съдове
text-h4 · 18 → 22px · 700
Заглавие H4 — Персонализирани бамбукови съдове
text-lead · 18 → 20px
Водещ текст (lead) — Персонализирани бамбукови съдове
text-body · 16 → 17px
Основен текст (body) — Персонализирани бамбукови съдове
text-sm · 14px
Мета текст (sm) — Персонализирани бамбукови съдове
Тегла: 400 основен · 600 акцент · 700–800 заглавия
Нормален 400, акцент 600, удебелен 700, екстра 800 — Щрбл уйме, гфъжд (кирилски десцендери не се отрязват: ред 1.5–1.6).
max-w-prose (65ch) — дълги текстове
Дължината на реда е ограничена до 65 знака за четимост. Това важи за правни страници и образователни секции, независимо от ширината на контейнера. Со своята покупка от MyMunche допринасяш за каузите, които подкрепяме всеки месец.
Токени
Отстояния и форми
Отстояния
gap-tight (8px) — в елемент
gap (16px) — между елементи
gap-grid (24px) — колони
section (48→96px) — вертикален ритъм
Радиуси
sm 6
md 10 (база)
lg 12
xl 16
2xl 24
full
Сенки
shadow-card — карти в покой
shadow-pop — hover
shadow-hard — живият бутон стил
Компоненти
Бутони
Фиксирани височини 36/44/52px (без em-скалиране — затова на живия сайт се появиха 6 размера). Първичният е нарочно бяло-върху-зелено, както на живия сайт.
СРАВНЕНИЕ А — твоето решение
Бутон: освежен срещу живия сайт
Една и съща система, два външни вида. Живият стил е с твърда черна сянка, радиус 8px и черен hover.
Вариант 1 — освежена система
radius 10px, плавен hover към по-светло зелено, без сянка
Вариант 2 — както е на живия сайт
radius 8px, твърда сянка −2px 2px 0 #000, hover = черен фон
Пробвай hover на двата. Може и да се смесят: напр. освежените цветове + твърдата сянка.
СРАВНЕНИЕ Б — твоето решение
Ширина на контейнера: 1366px срещу 1280px
Бутоните по-долу превключват ширината на ЦЯЛАТА страница (вкл. хедър/футър) на живо. Гледай на десктоп ≥1366px.
Ръбът на този панел = ръба на контейнера. Текущата ширина: 1366px
Со своята покупка от MyMunche допринасяш за каузите на "Аз вярвам и помагам" — този ред показва колко дълъг става един ред текст на пълна ширина без prose-ограничение, за да се види разликата между 1366 и 1280 пиксела на голям екран. Дългите текстове така или иначе се ограничават до 65 знака.
Компоненти
SectionHeading
Защо MyMunche?
Центрирано заглавие с еyebrow
Подзаглавие с водещ текст — обяснява секцията с едно изречение.
Ляво заглавие
Ляво подравняване, без eyebrow.
Компоненти
Цени (Price)
EUR е източникът; BGN се изчислява при билд по фиксинга 1.95583. Задраната редовна цена е
само в EUR (законово изискване). Целият BGN изход е зад един флаг showBGN —
изключваме го ~август 2026 и BGN изчезва от целия сайт на следващия билд.
Компоненти
Акордеон (Starwind)
Избираш име, шрифт и цвят — гравираме го върху бамбука. (Демо съдържание за акордеона.)
Доставка до 2 работни дни с куриер. (Демо съдържание за акордеона.)
Да — без BPA, тестван за хранителен контакт в ЕС. (Демо съдържание за акордеона.)
Компоненти
Икони
lucide, stroke 2, currentColor — една иконна система за целия сайт.
icon-sm (16px) — инлайн/мета
icon-md (20px) — бутони, списъци
icon-lg (24px) — feature блокове, навигация
Токени
Шрифтове
Nunito variable (latin + cyrillic, self-hosted woff2). Neucha САМО за преглед на персонализация.
Nunito — Бамбукови съдове за деца 123 €
Neucha — както изглеждат гравираните имена (преглед в количката, Фаза 5).