На главную
Design System · v1.0 · 2026

Язык бренда
Vkusno Polezno

Живая спецификация визуального языка — фундамент, на котором строится любая страница, баннер, стори или упаковка.

ТипПремиум-минимализм, чистая еда
ОсноваКремовые тона, шалфей, какао
ШрифтыFraunces + Manrope
СеткаCSS Grid, контейнер 1240px

Принципы

01

Светлая основа

Кремовые оттенки создают ощущение свежести и натуральности. Фон — всегда светлый.

02

Воздух важнее

Плотность — враг премиальности. Отступы щедрые, сетка не перегружена.

03

Редакторская типо

Fraunces для эмоций, Manrope для ясности. Курсив — акцент, а не декор.

04

Минимум эффектов

Тени мягкие и тёплые. Никаких жёстких градиентов, никаких ярких неонов.

Цвет

tokens.css

Базовые (кремы)

Paper--vp-paper · #fbf8f3
Milk--vp-milk · #f7f2ea
Cream--vp-cream · #efe7da
Sand--vp-sand · #e4d8c4
White--vp-white · #ffffff

Шалфей (primary)

Sage 50#eef2ec
Sage 100#d9e2d3
Sage 300#a7bca0
Sage 500#6b8f71
Sage 600#567557
Sage 700#3f5841
Sage Ink#2a3b2c

Какао (secondary)

Cocoa 300#c9ac88
Cocoa 500#8b7355
Cocoa 700#5c4a34

Акценты + текст

Berry--vp-berry · #a4596b
Honey--vp-honey · #d6a24e
Ink--vp-ink · #2a2724
Ink 2#57524b
Ink 3#8a8278
Ink 4#b6ad9e

Типографика

Fraunces · Manrope
Display --vp-t-display Fraunces · 400 · 44–84 px
Десерты, в которые влюбляются
H1 --vp-t-h1 Fraunces · 400 · 36–60 px
Каждый десерт — история заботы
H2 --vp-t-h2 Fraunces · 400 · 28–40 px
Как мы делаем свои торты
H3 --vp-t-h3 Fraunces · 400 · 22–28 px
Медовик на гречишном мёде
H4 / UI Title --vp-t-h4 Manrope · 600 · 18 px
Натуральные ингредиенты
Eyebrow .vp-eyebrow Manrope · 600 · 13 px · uppercase · 0.14em
Астана · с 2021
Lead .vp-lead Manrope · 400 · 17 px · 1.55 lh
Мы создаём десерты, которые можно есть без чувства вины — из натуральных продуктов, с любовью и вниманием к каждой детали.
Body --vp-t-body Manrope · 400 · 16 px · 1.62 lh
Тонкие медовые коржи на натуральном мёде, нежный сметанный крем с ванилью. Никакой химии — только то, что вы ждёте от настоящего медовика.
Small --vp-t-small Manrope · 400 · 13 px
За 1 кг · 8–10 порций · срок изготовления 24 часа
Mono --vp-mono JetBrains Mono · 400 · 14 px
--vp-sage-500: #6b8f71;

Пространство

4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 / 128
s-1
4px
s-2
8px
s-3
12px
s-4
16px
s-5
24px
s-6
32px
s-7
48px
s-8
64px
s-9
96px
s-10
128px

Радиусы

--vp-r-*
xs4px
sm8px
md12px
lg20px
xl32px
pill∞

Тени

тёплые, 10–14% чёрного
xshover, chips
smsubtle lift
mdcards
lgfloating
xlmodals, hero

Кнопки

.vp-btn
Primary (sage) — главное действие
Secondary (ink) — сильный акцент
Outline — второстепенное
Ghost — текстовая ссылка-кнопка
Block (full-width)

Поля

.vp-input · .vp-textarea · .vp-select

Чипы и метки

Chips ПП Натуральный Хит продаж Без сахара В наличии

Карточки

Хит

Медовик

1 кг
7 500₸

Натуральные ингредиенты

Фермерское молоко, деревенские яйца, пшеница с ближайших ферм.

★★★★★

Брали на день рождения — все в восторге! Вкусно, красиво и чувствуется, что всё натуральное.

А
Аннамарт 2026

Иконки

Phosphor · regular + duotone
cake
ice-cream
bread
pie-chart
leaf
heart
seal-check
truck
storefront
shopping-bag
whatsapp
instagram
map-pin
clock
phone
scales
shield-check
magnifier
plane
arrow-right