Framer
неоновая галерея в пустоте
Framer работает как почти полная темнота — черный холст, где контент парит, словно неоновая вывеска на открытии галереи. Заголовки, набранные шрифтом GT Walsheim Medium с плотной межстрочной разметкой 0,8–1,1 и агрессивным отрицательным межбуквенным расстоянием (-0.04em на 54px), создают сжатый декоративный шрифт, который выдвигается вперед, а не аккуратно располагается на странице. Единственный электрический синий цвет (#0099ff) обеспечивает все функциональные акценты — границы, свечение, значки, активные состояния, — в то время как остальная часть интерфейса остается ахроматической, полагаясь на тонкие серые переходы (#111, #171717, #242424) для создания глубины из чистого черного. Компоненты выглядят скорее продуманными, чем декорированными: закругленные радиусы 8–25px, тонкие границы 1px, минимальные тени и полупрозрачные поверхности, позволяющие просвечивать пустоте.
Разделы во всю ширину, выходящие за пределы черного холста, с контентом, ограниченным максимальной шириной ~1200px, центрированным внутри. Главный раздел представляет собой заголовок, выровненный по левому краю, и одну кнопку призыва к действию (CTA), при этом правая сторона намеренно оставлена пустой — асимметрично, не центрировано. Разделы чередуются между макетами только с текстом (крупный заголовок + подтекст) и демонстрацией скриншотов продукта. В разделе «Поставляется с Framer» используется стена с логотипами в 4-колоночной сетке. В разделе сообщества скриншот продукта помещен в центрированный контейнер максимальной ширины с закругленными краями окна. Навигация минимальна — тонкая верхняя панель с логотипом слева и ссылками, выровненными по правому краю, без видимых элементов управления. Ритм разделов: значительные вертикальные промежутки 80px между разделами, создающие отчетливые островки контента, парящие в пустоте.
Скриншоты пользовательского интерфейса продукта доминируют — обрамленные имитированным хромом окном с точками светофора, встроенные скриншоты приложения становятся главным изображением. Логотипы, служащие доказательством качества, представлены белыми надписями на черном фоне с большим интервалом. Никаких фотографий, иллюстраций, абстрактной графики — визуальный язык — это сам продукт, отображаемый в виде живого интерфейса. Стиль иконок: минималистичный, контурный, монохромно-белый в малых размерах. Плотность: преобладает текст с редкими крупными фрагментами в виде скриншотов продукта. Визуальное соотношение пространства явно отдает предпочтение типографике, а не изображениям.
Палитра
Бренд
- Vivid Violet
#0066ff— Основная кнопка действия — единственное место в интерфейсе, где отображается сплошной цветной фон кнопки.
Нейтральные
- Bone
#ffffff— Основные заголовки, основной текст на темном фоне, фон кнопок — единственный источник света. - Void
#000000— Холст страницы, фон навигации, поверхности карточек, заливка иконок — бесконечный черный цвет, поглощающий весь несущественный контент. - Graphite
#111111— Приподнятые поверхности карточек на ступеньку выше пустоты — большие функциональные карточки и модальные контейнеры. - Obsidian
#171717— Промежуточная поверхность для кнопок, дополнительных карточек, заливок пользовательского интерфейса — отделяет интерактивные элементы от холста. - Slate
#242424— При наведении курсора, поля ввода и выступающие панели — самый яркий нейтральный оттенок перед переходом к текстовому формату. - Ash
#333333— Глубокая заливка для неактивных фоновых изображений и структурных элементов.
Типографика
от 12 до 68px · 8 ступеней
- sans-serif — замена: Inter · начертания 400 · sans-serif — обнаружен в извлеченных данных, но не описан ИИ.
- GT Walsheim — замена: Inter Tight · начертания 500 · Шрифт для заголовков и заголовков — фирменный шрифт. Агрессивно сжатый, с межстрочным интервалом 0,8–1,1 и межбуквенным расстоянием от -0.04em до -0.05em в диапазоне 44–68px. Это не декоративный элемент; геометрическая теплота GT Walsheim при строгих метриках создает голос системы — уверенный, компактный, слегка футуристический. Для аналогичной геометрической выразительности можно использовать Inter Tight или Space Grotesk Bold.
- Inter Variable — замена: Inter · начертания 400 · Основной текст, навигация и дополнительные заголовки — основная рабочая лошадка. Переменная ось Inter Variable позволяет плавно интерполировать веса. Отслеживание сужается по мере увеличения размера: от -0.001em до 18px и до -0.027em до 22px. Переменная версия позволяет создавать плавные микроанимации сайта. Замена: Inter (Google) — практически идентичный запасной вариант.
Интервалы и форма
| Назначение | Значение |
|---|---|
| Плотность | средняя |
| Базовый шаг | 10px |
| Радиус кнопок | 9999px |
| Радиус карточек | 20px |
| Тени | нет — границы вместо теней |
| Между секциями | 80px |
| Ширина страницы | 1200px |
ИИ соберёт ваш сайт в стиле Framer и наполнит его
- Наполнит товарами и постами по ссылке — Instagram, TikTok, Facebook.
- Перенесёт контент со старого сайта — достаточно указать адрес.
- Современный дизайн на лучшем движке: React (Next.js) с серверным рендерингом и SEO-оптимизацией из коробки.
- Полная автоматическая SEO-оптимизация под поисковую выдачу и рекомендации нейросетей.
Похожие стили
- Auros — Абиссальный терминал с биолюминесцентными шарами данных
- Origin Financial — Полуночная галерея тихого богатства. Тихая, почти темная комната, где крупные шрифты с засечками и несколько…
- Raycast — Полуночный командный центр, коралловый неон
- Dimension — рабочее место, освещенное сумерками, с панелями из матового стекла
- Reflect Notes — Звездный фиолетовый космос — темная обсерватория, где ноты парят, словно созвездия, на фоне почти черной инд…
- Ameba — Диспетчерская в полночь — электрический синий пульс внутри матовых стеклянных панелей
- Branding — Черная стена галереи, кроваво-красные акценты — Крупные белые шрифты парят на темном холсте, напоминающем пу…
- Harness — Центр управления полетами в полночь с фосфоресцирующими зелеными акцентами
- Koto — Галерея «Обсидиан» в полночь. Почти черная сцена, где единственным теплым источником света является единстве…
- Ohzi — Светящийся куб, подвешенный в темной галерее
- Depot — Темный серверный терминал. Почти черная консоль разработчика, где один зеленый светодиод сигнализирует о нач…
- Maciej Zadykowicz — Полуночная галерея с калейдоскопическим панно — почти черная стена студии, где одно яркое красочное типограф…