PET RELAXA — 54 design variants

Online shop for CBD oils for cats and dogs: catalog, cart, checkout, dose calculator. Variants by Fable, Opus and Astra; «improved by» = second pass by the other model; «Job template» = built on the job-site templates. Inside each variant use ‹ › (or ← →) to flip through all of them.

Astra · astra-01

Ритм турботи

Швейцарская типографическая сетка превращает магазин в выразительный предметный каталог с крупными заголовками, тонкими линиями и коралловой витриной.

Open site → · mobile
Astra → improved by Fable · astra-01-fx

Ритм турботи (Astra, improved by Fable)

Швейцарская типографическая сетка Astra (крупные заголовки, тонкие линии, коралловая витрина) сохранена, а магазин под ней переработан: липкая шапка, корзина-ящик с прогрессом бесплатной доставки, визуальный чекаут с кар

Open site → · mobile
Astra · astra-02

Турбота, що обіймає

Пастельные органические формы, живая фотография и округлый Nunito создают тёплый магазин, похожий на заботливое объятие.

Open site → · mobile
Astra → improved by Fable · astra-02-fx

Турбота, що обіймає (Astra, improved by Fable)

Пастельные органические формы, живая фотография и округлый Nunito Astra сохранены: магазин стал заметно живее — дышащая капля-подложка и покачивающийся цветок в hero, карточки с мягкой тенью, скруглённый drawer-корзины,

Open site → · mobile
Astra · astra-03

Добре бути поруч

Винтажная эстетика 70-х соединяет тёплую бумагу, крупную антикву Lora, терракотовые арки и горчичные полосы в спокойный магазин для тех, кого любят.

Open site → · mobile
Astra → improved by Fable · astra-03-fx

Добре бути поруч (Astra, improved by Fable)

Винтажная эстетика 70-х Astra (тёплая бумага, антиква Lora, терракотовые арки, горчичные полосы) сохранена и доведена до блеска: медленно вращающееся солнце и мерцающая звезда в hero, печать и арка реагируют на наведение

Open site → · mobile
Astra · astra-04

Нічого зайвого

Монохромная фотография, белое пространство и единственный бирюзовый акцент превращают магазин в предельно чистую предметную витрину.

Open site → · mobile
Astra → improved by Fable · astra-04-fx

Нічого зайвого (Astra, improved by Fable)

Монохромная витрина Astra с единственным бирюзовым акцентом сохранена, но стала живой: чёрно-белые фотографии и упаковки «проявляются» в цвет при наведении, все состояния интерфейса (шаги, «Додано», успех, выбранные карт

Open site → · mobile
Astra · astra-05

Особиста формула

Тёмный интерактивный конфигуратор подбирает концентрацию по виду и весу питомца, а объёмный флакон меняет этикетку и плавно реагирует на выбор.

Open site → · mobile
Astra → improved by Fable · astra-05-fx

Особиста формула (Astra, improved by Fable)

Тёмный интерактивный конфигуратор Astra с объёмным флаконом сохранён и усилен: флакон плавно парит, орбиты медленно вращаются, индикаторы «живут», а результат подбора показывает миниатюру упаковки с картой диапазонов; ко

Open site → · mobile
Astra · astra-06

Тиха гавань

Современная морская графика: круглое фото-иллюминатор, глубокий синий, сигнальный красный, полосы и горизонтальные товарные полки создают собственный мир тихой гавани.

Open site → · mobile
Astra → improved by Fable · astra-06-fx

Тиха гавань (Astra, improved by Fable)

Морская графика Astra (иллюминатор, глубокий синий, сигнальный красный, полосы) сохранена и ожила: полосы-волны тихо покачиваются, красный бейдж «Поруч. Щодня.» плавает и выравнивается при наведении, фото в иллюминаторе

Open site → · mobile
Astra · astra-07

З любов’ю, щодня

Фотоколлаж из бумажных вырезок: лаймовые листы, фиолетовая типографика, скотч и неровные края собирают магазин в личную записку о заботе.

Open site → · mobile
Astra → improved by Fable · astra-07-fx

З любов’ю, щодня (Astra, improved by Fable)

Коллаж из бумажных вырезок Astra (лаймовые листы, фиолетовая типографика, скотч, рваный край) сохранён и стал тактильнее: полароид и лаймовый лист приподнимаются и выравниваются при наведении, наклейка «З любов’ю, щодня»

Open site → · mobile
Astra · astra-08

У вашому ритмі

Спортивный retail: кобальт, оранжевые маркеры, диагональные срезы, наклонная типографика и размерная сетка превращают выбор масла в подбор повседневной экипировки.

Open site → · mobile
Astra → improved by Fable · astra-08-fx

У вашому ритмі (Astra, improved by Fable)

Спортивный retail Astra (кобальт, оранжевые маркеры, диагональные срезы, наклонная типографика, размерная сетка) сохранён и получил динамику: оранжевые маркеры и слово «РИТМІ.» влетают в hero, характеристики появляются к

Open site → · mobile
Astra · astra-09

Простір турботи

Архитектурная галерея с боковой навигацией: четыре упаковки выставлены в освещённых нишах, а каменные оттенки, пространственные тени и спокойная антиква задают ритм всему магазину.

Open site → · mobile
Astra → improved by Fable · astra-09-fx

Простір турботи (Astra, improved by Fable)

Архитектурная галерея Astra с боковой навигацией и четырьмя освещёнными нишами сохранена: ниши выезжают каскадом при загрузке, при наведении в нише «включается» свет и упаковка приподнимается, пункты бокового меню сдвига

Open site → · mobile
Astra · astra-10

Поруч щодня

Уютный цифровой мир с пиксельными питомцами, оконными рамками и переключением дня и вечера превращает магазин в дружелюбный домашний рабочий стол.

Open site → · mobile
Astra → improved by Fable · astra-10-fx

Поруч щодня (Astra, improved by Fable)

Уютный пиксельный «рабочий стол» Astra (оконные рамки, пиксельные питомцы, переключение дня и вечера, моноширинный Jet) сохранён и ожил: облака дрейфуют, солнце мерцает, питомцы покачиваются «по пикселям», курсор мигает

Open site → · mobile
Fable · fable-01

Product Theatre

Apple-style «театр продукту»: липкий hero на 3 екрани, де коробка PET RELAXA росте й обертається під час скролу, а потім розкладається у чотири концентрації; величезна щільна типографіка Inter Tight, чергування білих і ч

Open site → · mobile
Fable → improved by Astra · fable-01-ax

Product Theatre / Precision (Fable, improved by Astra)

Усилен театр продукта: крупная упаковка в световом круге, асимметричная типографика и сохранённое раскрытие четырёх линеек при прокрутке.

Open site → · mobile
Fable · fable-02

Calm Spa

Спа-настрій спокою: м'які дрейфуючі градієнтні плями, «дихаючі» кільця навколо фото з ритмом «Вдих… Видих…», органічна форма, що повільно морфиться, серифний Cormorant Garamond з курсивними акцентами та кремово-шавлієва

Open site → · mobile
Fable → improved by Astra · fable-02-ax

Calm Spa / Soft Ritual (Fable, improved by Astra)

Сохранён spa-характер: выразительная антиква, мягкие кольца и фотография с отдельной карточкой MINI; исправлена мобильная сетка показателей качества.

Open site → · mobile
Fable · fable-03

Editorial Magazine

Журнальна верстка «випуску про спокій»: газетний тікер і масивна обкладинка Playfair Display з буквицею, тонкі типографські лінійки, колонки з розділювачами, «У цьому випуску» як зміст, Академія винесена вперед великою г

Open site → · mobile
Fable → improved by Astra · fable-03-ax

Editorial / The Care Issue (Fable, improved by Astra)

Журнальная обложка перестроена в выразительный разворот: антиква, крупное фото, бордовые акценты и полоса содержания; статьи открываются локально.

Open site → · mobile
Fable · fable-04

Bento Grid

Увесь магазин — як bento-сітка на сірому полотні: білі, чорні, бірюзові та лаймові плитки різних розмірів (hero з нахиленою коробкою, фото, статистика, продукти, калькулятор, COA, Академія, FAQ, доставка), гротеск Golos

Open site → · mobile
Fable → improved by Astra · fable-04-ax

Bento / Care Blocks (Fable, improved by Astra)

Усилена bento-композиция: зелёный главный блок, лаймовые акценты, выразительные плитки фото и COA, улучшенные карточки товаров и мобильная сетка.

Open site → · mobile
Fable · fable-05

Playful Illustrated

Грайливий «стікерний» магазин: намальовані інлайн-SVG кіт і пес (кліпають очима, пес виляє хвостом), товсті чорні контури та зміщені тіні, маркерні підсвітки в заголовках, пружні bouncy-анімації кнопок і карток, кошик «п

Open site → · mobile
Fable → improved by Astra · fable-05-ax

Playful Illustrated / Happy Ritual (Fable, improved by Astra)

Усилена игровая композиция: крупный солнечный круг, упаковка и рисованные питомцы, выразительная типографика и мобильная сцена; улучшены доступность и путь покупки.

Open site → · mobile
Fable · fable-06

Nordic Calm

Скандинавський мінімалізм: біле полотно, дуб і шавлія — магазин, у якому кожна лінійка читається з першого погляду, а повітря між блоками працює як дизайн.

Open site → · mobile
Fable → improved by Astra · fable-06-ax

Nordic Calm

Скандинавський мінімалізм: біле полотно, дуб і шавлія — магазин, у якому кожна лінійка читається з першого погляду, а повітря між блоками працює як дизайн.

Open site → · mobile
Fable · fable-07

Lab Sheet

Магазин як лабораторний протокол: міліметровий папір, моноширинні показники, картки-специфікації та дата-візуалізація COA — прозорість стає головним аргументом покупки.

Open site → · mobile
Fable → improved by Astra · fable-07-ax

Lab Sheet (Fable, improved by Astra)

Усилена лабораторная эстетика: крупная типографика, экспозиция MINI, таблица COA и контрастные акценты; исправлены доступность и путь покупки.

Open site → · mobile
Fable · fable-08

Night Calm

Темна преміальна вітрина: глибокий teal, золото й м'яке сяйво — магазин, у якому упаковки стоять на підсвічених «вітринних» плитках, а спокій передано кольором і світлом.

Open site → · mobile
Fable → improved by Astra · fable-08-ax

Night Calm (Fable, improved by Astra)

Сохранена ночная премиальная палитра: световая арка, крупная антиква и интерактивный выбор четырёх линеек в hero; улучшены мобильная версия и оформление.

Open site → · mobile
Fable · fable-09

Quiz First

Магазин, що починається з питання: «Хто ваш улюбленець?» — три кроки (вид → вага → інтенсивність) видають лінійку й орієнтовну дозу, і лише потім іде каталог.

Open site → · mobile
Fable → improved by Astra · fable-09-ax

Quiz First (Fable, improved by Astra)

Перестроен трёхшаговый подбор: тёплая двухколоночная композиция, крупные карточки питомцев и понятный прогресс; исправлены ввод веса, фокус шагов и покупка результата.

Open site → · mobile
Fable · fable-10

Storm to Calm

Скрол-історія однієї грозової ночі: тремтячий пес під дощем і блискавками, поява флакона, світанок і спокійний сон — а далі теплий магазин.

Open site → · mobile
Fable → improved by Astra · fable-10-ax

Storm to Calm (Fable, improved by Astra)

Сохранена история грозы и рассвета: выразительная сцена у окна, четыре доступные главы и быстрый переход в магазин; улучшены контраст, reduced motion и оформление.

Open site → · mobile
Job template · job-01

Bauhaus

Магазин PET RELAXA як баухаус-плакат: чорні лінії 2 px, нульові радіуси, жорсткі тіні, гігантські слова-водяні знаки «Спокій / Баланс / Доза / Турбота» і геометрія коло-трикутник-квадрат, де кожна фігура й колір — це одн

Open site → · mobile
Job template · job-02

Справа партії

Магазин PET RELAXA як відкрита «справа партії»: темний hero зі схемою «Certificate of Analysis → незалежна лабораторія → флакон із печаткою ПЕРЕВІРЕНО», картки товарів-теки зі скріпками й печатками концентрацій, а в темн

Open site → · mobile
Job template · job-03

Маршрут

Магазин PET RELAXA як маршрут від Києва до вашого дому: у hero — темна панель-карта України з анімованими пунктирними дугами Нової Пошти з Києва до семи міст, координатами, компасом і кнопкою паузи, а внизу панелі — «ваш

Open site → · mobile
Job template · job-04

Нічний спокій

Магазин PET RELAXA як нічний преміум-бутик: майже чорне полотно з плівковим зерном, тонкі золоті лінії, легкий дисплейний шрифт із золотим останнім рядком, а товари, кроки, статті й форми — кремові «вікна», що світяться

Open site → · mobile
Opus · opus-01

Neo-Brutal

Необруталістичний магазин: товсті чорні рамки, жорсткі офсетні тіні, наклейки під кутом, кольори ліній узяті з коробок (зелений MINI, бурштиновий SMALL, синій MEDIUM, помаранчевий LARGE), гігантська гротескна типографіка

Open site → · mobile
Opus · opus-02

Glass & Aurora

Нічний «скляний» магазин: живе полярне сяйво з розмитих кольорових плям, матові скляні панелі з backdrop-blur, чотири коробки PET RELAXA, що повільно обертаються на 3D-орбіті зі світінням у кольорі своєї лінійки, кільцев

Open site → · mobile
Opus · opus-03

Warm Vet Clinic

Теплий «ветеринарний кабінет», якому довіряють: кремовий фон, глибокий бірюзово-зелений бренду і теракота, фото лікарки з ретривером в арці, рукописні нотатки Caveat, калькулятор у вигляді картки улюбленця на планшеті з

Open site → · mobile
Opus · opus-04

Рушник (Modern Ukrainian Craft)

Сучасний український крафт: лляне полотно, класична антиква Yeseva One, червоно-чорна вишивка хрестиком, що «вишивається» стібок за стібком під час прокрутки, і власний орнамент для кожної лінійки — у кольорі її коробки

Open site → · mobile
Opus · opus-05

Kinetic Calm

Кінетична типографіка «спокій у русі»: гігантське слово СПОКІЙ повільно «дихає» товщиною й нахилом літер (змінний шрифт Geologica: wght, slnt, SHRP), а під курсором літери важчають; у калькуляторі вага шрифту дорівнює ва

Open site → · mobile
Opus · opus-06

Флакон 360°

Магазин-«3D-студія»: справжній інтерактивний флакон PET RELAXA на WebGL (three.js, локально) у центрі сцени — його можна крутити пальцем чи мишею, при прокрутці він обертається й показує 4 факти про продукт, а перемикач

Open site → · mobile
Opus · opus-07

PET RELAXA App

Магазин, який відчувається як нативний застосунок: нижній таб-бар (Головна · Каталог · Підбір · Кошик · Більше), «сторіс» академії, свайп-каруселі пропозицій і товарів, товари та кошик відкриваються bottom sheet-ами (зак

Open site → · mobile
Opus · opus-08

Ваги

Магазин починається з питання «Скільки важить ваш пес?»: величезний циферблат ваг зі стрілкою (тягніть стрілку, повзунок або «− / +») наживо підбирає лінійку, дозу в натисканнях і ціну, а вся сторінка перефарбовується в

Open site → · mobile
Opus · opus-09

Лісова тиша

Магазин як прогулянка нічним лісом: генеративний SVG-ліс у тумані з місяцем і світлячками (паралакс шарів), ботанічний листок коноплі, що «промальовується» лінією, кремовий папір, плівкове зерно поверх усього і серифна т

Open site → · mobile
Opus · opus-10

Дві стежки

Перший екран розділений навпіл — «Коти» | «Собаки» (половина під курсором розширюється, шов з «або» їде слідом), а обрана сторона перебудовує весь магазин під улюбленця: колір теми, калькулятор (вид і швидкі ваги), реком

Open site → · mobile