«Ось» — архитектурное бюро из Казани. Студия А Квадрат сделала для него сайт в духе швейцарской типографики: 12 колонок на десктопе и 4 на телефоне, чёрное на светлом фоне и один сигнальный цвет #FF3B00. Заголовки набраны Archivo, подписи и координаты — IBM Plex Mono.
Ось — архитектурное бюро
Сайт архитектурного бюро: сетка, один цвет, чертежи из кода
Сетка видна, цвет один, чертежи рисует код
Сайт состоит из 5 страниц: главная, индекс проектов, страница проекта, бюро, контакты. Данные 8 проектов лежат в одном массиве, из него собираются все страницы.
Список вместо витрины
Индекс проектов — строки с названием, типологией, местом, годом, площадью и статусом. Курсор — перекрестие с координатами; при наведении на строку рядом с ним появляется чертёж проекта. Фильтр по типологии и переключатель «список / сетка» запоминают выбор в браузере.
Три чертежа из одного объекта
На странице проекта аксонометрия, план этажа и фасад генерируются кодом из параметров: размеров корпусов, числа этажей, сетки колонн, шага окон и типа остекления. Три функции строят SVG: оси и размерные цепочки на плане, отметки уровней на фасаде, тени и штриховка на аксонометрии. Для каждого из 8 проектов параметры свои.
Ниже — паспорт проекта, текст и пять этапов от предпроекта до реализации.
Четыре колонки вместо двенадцати
Мобильная версия — отдельная раскладка на 4 колонки с теми же правилами: сетка, подписи и один акцент. Меню открывается шторкой на весь экран с нумерацией разделов.
Страница «Бюро» — четыре принципа, команда и награды. «Контакты» — ситуационная схема участка, нарисованная кодом, форма брифа с проверкой полей и маской телефона, вопросы перед встречей. Форма ничего не отправляет: это демонстрация сценария.
Под капотом — один скрипт на 880 строк и один файл стилей на 455 строк, без библиотек и сборки. При включённом prefers-reduced-motion анимации отключаются, а чертежи появляются сразу.
