Design System

Smarket Design System
Design System / Friendly Smart Shopping
SMART SHOPPING / PRICE COMPARISON / SAVINGS

SMARKET DESIGN SYSTEM

A friendly smart-shopping identity for comparing prices, building baskets and saving money.

Економія 426 грн

Brand Colours

A restricted 8-colour palette. Designed to feel fresh, modern, and app-like without losing trust. No red, blue, or complex gradients.

Primary Green

–sm-primary #265447

Main brand colour for primary actions, headings, icons and strong UI elements.

Primary Dark

–sm-primary-dark #173B33

Main dark text colour and can be used for deep backgrounds.

Accent Yellow

–sm-accent-yellow #FACC14

Main accent colour for highlights, badges, savings, active states and attention points.

Fresh Mint

–sm-mint #6FE3C2

Fresh secondary accent colour for smart-shopping and app-like elements.

Soft Mint

–sm-mint-soft #EAF7F2

A soft mint background for calm UI areas and highlighted containers.

Soft Background

–sm-bg-soft #F6FAF8

The main soft page background across the platform.

White

–sm-white #FFFFFF

Used for clean cards, floating elements, and high-contrast text areas.

Muted Text

–sm-muted #6D8279

Used for muted text, captions, secondary dates and supporting labels.

Text & Background Combinations

Examples of approved high-contrast combinations using the core token set.

Топ пропозиція

Розумні покупки на кожен день

Створюйте списки покупок та знаходьте найкращі пропозиції від супермаркетів.

Для сім’ї

Порівнюй ціни швидше

Ми автоматично перевіряємо ціни у Сільпо, АТБ та Novus.

Новинка

Скануйте штрих-коди

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

Акція тижня

Знижки на свіжі овочі

Заощаджуйте до 40% на сезонних продуктах у вашому місті.

Typography Hierarchy

A strict two-font system. Manrope for confident, friendly headings. Inter for highly readable, clean body text and UI.

SMARKET DESIGN SYSTEM
Display Title
FontManrope
Sizeclamp(52px, 7vw, 84px)
Weight800
Line-height0.98
Letter-spacing-0.045em
Use: major brand statements and design system intro titles
Розумна економія для кожної покупки
Heading 1 (H1)
FontManrope
Sizeclamp(42px, 5.5vw, 68px)
Weight800
Line-height1.04
Letter-spacing-0.04em
Use: homepage hero headings and main page titles
Порівнюй ціни між магазинами
Heading 2 (H2)
FontManrope
Sizeclamp(34px, 4vw, 48px)
Weight700
Line-height1.08
Letter-spacing-0.035em
Use: main section headings
Збери кошик швидше
Heading 3 (H3)
FontManrope
Size30px
Weight700
Line-height1.15
Letter-spacing-0.025em
Use: subsection headings and important block titles
Акції поруч
Heading 4 (H4)
FontManrope
Size24px
Weight700
Line-height1.2
Letter-spacing-0.02em
Use: smaller content headings
Список покупок
Heading 5 (H5)
FontManrope
Size20px
Weight700
Line-height1.25
Letter-spacing-0.015em
Use: compact heading groups and UI panels
Найкраща ціна
Heading 6 (H6)
FontManrope
Size16px
Weight700
Line-height1.25
Letter-spacing0.02em
Use: small grouped titles and strong labels
Smarket допомагає знайти магазин, де весь список покупок коштує дешевше.
Body Large
FontInter
Size19px
Weight400
Line-height1.7
Letter-spacing-0.01em
Use: intro paragraphs and important explanatory text
Додайте продукти у кошик, перевірте актуальні акції та порівняйте загальну суму між супермаркетами.
Body
FontInter
Size16px
Weight400
Line-height1.65
Letter-spacing-0.005em
Use: normal paragraph text
Оновлено сьогодні о 10:30
Small Text
FontInter
Size14px
Weight400
Line-height1.5
Use: captions, notes and supporting text
Ціни можуть відрізнятися залежно від магазину.
Tiny Text
FontInter
Size12px
Weight500
Line-height1.45
Colour#6D8279
Use: disclaimers, helper text and small UI notes
SMART SHOPPING
Eyebrow Label
FontInter
Size12px
Weight700
Line-height1.2
Letter-spacing0.12em
Use: small labels above section headings
Економія 426 грн
Savings Label
FontInter
Size13px
Weight700
Line-height1.2
Letter-spacing0.02em
Use: savings badges and promotional highlights
Сільпо • АТБ • Novus
Meta Text
FontInter
Size13px
Weight500
Line-height1.4
Colour#6D8279
Use: dates, shops, categories, locations and secondary UI details
“Купувати розумно — це не про обмеження, а про контроль бюджету.”
Italic Text / Quotes
FontInter
Size17px
Weight400
Line-height1.65
StyleItalic
Use: quotes, insight text and brand messages

Buttons

Interactive elements for user actions. Hover over the buttons to see transitions and micro-interactions. Font: Inter 14px/16px, 700 weight.

1. Primary Button
2. Primary Large
3. Yellow Accent
4. Mint Accent
5. Outline Green
6. Dark Button
7. Text Link Переглянути акції →

Border Radius

A defined scale of rounded corners to ensure the UI feels modern, friendly, but structured.

Extra Small

--radius-xs: 6px;

Tags, badges and compact UI elements.

Small

--radius-sm: 10px;

Buttons, inputs and small panels.

Medium

--radius-md: 16px;

Normal cards and colour blocks.

Large

--radius-lg: 24px;

Large showcase panels and hero containers.

Shadows

Soft, professional shadows tinted with the primary dark colour (rgba 23, 59, 51).

Extra Small Shadow

--shadow-xs

Small UI examples and color cards.

Small Shadow

--shadow-sm

Normal cards, hover states for buttons.

Medium Shadow

--shadow-md

Featured panels and overlays.

Large Shadow

--shadow-lg

Main hero design system preview elements.

Spacing Scale

A predictable 4pt and 8pt based scale used for margins, padding, and gaps.

8px
16px
24px
32px
40px
56px
72px
96px