
FRANKY'S
Ретро-игровой киоск на стойке скейт-шопа
Визуальный язык Franky's — это сочетание ретро-аркады и скейт-шопа: тёплый кремовый холст (#f3e5df), обрамлённый жёсткими пиксельными рамками, вездесущая чёрно-белая шахматная доска и единственный пиксельный шрифт Arcade, используемый для каждого слова на сайте. Палитра намеренно скудная — сохранились только два хроматических цвета (сигнально-оранжевый #faa21f для вывески и насыщенный зелёный #128e44 для кнопки покупки), причём вся иерархия выражена за счёт увеличения толщины шрифта Arcade с 400 до 700 и за счёт чёрного на кремовом фоне. Поверхности остаются плоскими и монолитными; глубина достигается только за счёт вставленной кремовой линии 1px на кнопках и тональной игры шахматной доски. Компоненты напоминают спрайты витрин магазинов 1990-х: толстые черные рамки, плотные радиусы 6–12px, компактные внутренние отступы 4–8px и переключатели 3D/AR, которые выглядят как пиксельные значки, а не как хромированные элементы. Новые страницы должны сохранять атмосферу аркадного автомата: никаких градиентов, кроме оранжевой бегущей строки, никаких мягких теней, никакой декоративной типографики — только кремовая бумага, черные пиксельные линии и один теплый оранжевый цвет.
На настольных компьютерах отображается полноэкранная страница товара, максимальная ширина 1200px, центрированная. Ритм сверху вниз: оранжевая бегущая строка → кремовый заголовок с черной линией → разделение на две колонки (55% шахматная доска на главной странице / 45% сетка карточек товара в две колонки) → кремовая полоса в нижнем колонтитуле. На мобильных устройствах главная страница сворачивается в шахматную доску во всю ширину, а сетка становится одноколоночной. Карточки равномерно распределены в двухколоночной сетке с разделителями серого цвета Pixel (#e5e7eb) между ними. Расстояние между разделами минимальное (43–61px), и интерфейс никогда не использует темные полосы, занимающие всю ширину страницы — кремовый холст отображается без перерывов.
Фотография кепок на чистом кремовом фоне, по центру и с плотной кадрировкой, с мягкой угольно-черной тенью снизу. Никакого образа жизни, никаких моделей, никакого контекста — кепка является главным элементом. Шахматная доска позади главного элемента служит графической поверхностью. Никаких иллюстраций, никаких 3D-рендеров, кроме переключателя дополненной реальности, никаких декоративных значков, кроме пиксельного крестика в логотипе.
Палитра
Бренд
- Marquee Orange
#faa21f— Панель уведомлений в верхней части экрана, акцентные элементы, фирменный стиль. - Buy Green
#128e44— Кнопка «ДОБАВИТЬ В КОРЗИНУ» заполнена — единственное действие покупки, отмеченное зеленым цветом.
Нейтральные
- Arcade Cream
#f3e5df— Фон страницы, поверхности карточек товаров, вставки на кнопках. - Ink Black
#000000— Основной текст, шахматная разметка, все границы пользовательского интерфейса, контуры карточек, обводка иконок. - Pixel Gray
#e5e7eb— Тонкие границы, разделители карточек, структурные правила между ячейками сетки. - Charcoal
#333333— Вторичный тон поверхности, шахматные квадраты теней, цвет теней - Carbon
#151515— Насыщенные нейтральные тона для заливки иллюстраций и наиболее плотных шахматных плиток. - Muted Gray
#737373— Отключенный/заглушенный текст на кнопках и в основном тексте
Типографика
от 10 до 18px · 4 ступеней
- Arcade — замена: VT323 · начертания 400, 700 · Единый шрифт используется во всем интерфейсе — все заголовки, метки, цены, кнопки, основной текст и значки выполнены в шрифте Arcade. Переход от 400 к 700 — единственный инструмент для создания иерархии; использование второго шрифта разрушило бы иллюзию киоска.
Интервалы и форма
| Назначение | Значение |
|---|---|
| Плотность | плотная |
| Базовый шаг | 4-8px |
| Радиус кнопок | 6px |
| Радиус карточек | 12px |
| Тени | нет — границы вместо теней |
| Между секциями | 43-61px |
| Ширина страницы | 1200px |
ИИ соберёт ваш сайт в стиле FRANKY'S и наполнит его
- Наполнит товарами и постами по ссылке — Instagram, TikTok, Facebook.
- Перенесёт контент со старого сайта — достаточно указать адрес.
- Современный дизайн на лучшем движке: React (Next.js) с серверным рендерингом и SEO-оптимизацией из коробки.
- Полная автоматическая SEO-оптимизация под поисковую выдачу и рекомендации нейросетей.
Похожие стили
- 099 SUPPLY — Стена галереи, заполненная черно-белыми объектами
- teenage engineering — Промышленный каталог в студийном освещении — продукт является единственным значимым объектом на странице, а …
- Custo — Галерея цвета оружейной стали с монолитным шрифтом. Выставочный зал в приглушенных серо-зеленых тонах, где е…
- Walden — Тишина лесной подстилки — каждый продукт — это камень, каждый пиксель — это мох и тишина
- Fiverr — В центре внимания цифрового базара — яркий зеленый пульс на темных театральных сценах. Одна неоново-зеленая …
- Peloton — Красный маяк на угольно-черной взлетно-посадочной полосе. Фитнес-шоурум, где один ярко-красный указатель CTA…
- HOUSEPLANT — книжный магазин с орехами на льняной бумаге
- Adam Lippes — Монохромная редакционная студия на кремовой бумаге — разворот Vogue, где единственным украшением является се…
- Elektron — Панель управления оборудованием в полночь — почти чёрный холст, на котором фотографии продукта сияют, а инте…
- Sigmaphoto — Монохромная галерея прецизионных приборов — тихая белая комната, где единственный цвет, имеющий значение, — …
- Channel Studio — Студийная фотолаборатория с одним коралловым плафоном
- Specht Studio — Галерейная стена, наполненная сдержанным любопытством. Собственная хромированная отделка студии – это белая …