Здесь я разобрал сайт на детали: цвета, шрифты, кнопки, иконки и те самые отступы, из-за которых всё иногда едет. Можно потыкать элементы и сравнить светлую и тёмную темы. Заодно это шпаргалка для новых страниц: чтобы кнопки были из одной семьи, а очередной экран не выглядел случайным гостем на собственном сайте
Цвета
Базовый акцент #46a758. Полоса анонсов использует серый фон #2b2c30 и белый текст в обеих темах. На зелёных кнопках текст тёмный; оттенок ссылок учитывает фон.
--color-accent#46a758#46a758--color-background#ffffff#1d1e20--color-background-100#f9f9f9#2b2c30--color-background-200#f3f3f3#2f3035--color-background-300#ececec#38383d--color-background-400#dbdbdb#404046--color-foreground#252525#c7cbd5--color-secondary#686868#9ca0ac--color-contrast#000000#ffffff--color-success#348f3f#348f3f--color-error#ff4c4c#ff4c4c--announcement-background#2b2c30#2b2c30--announcement-foreground#ffffff#ffffffТипографика
Geist придумали в Vercel вместе с basement studio и шрифтовым дизайнером Андресом Бриганти. В конце 2022 года Vercel пришёл к студии с задачей создать открытое семейство для своего бренда и сообщества разработчиков. Первый выпуск вышел в 2023 году. В основе семейства швейцарская типографика: простые формы, чёткий рисунок и внимание к тому, как буквы ведут себя на экране
Geist Sans
Я выбрал Geist Sans для основного текста за спокойный характер. В нём есть та самая аккуратность интерфейсов, которая мне нравится: можно читать длинную статью, а можно быстро пробежать подписи. Шрифт держит страницу собранной и оставляет внимание самому тексту
Geist Mono
У Geist Mono своя роль. Каждый символ занимает одинаковую ширину: узкая i получает столько же места, сколько широкая m. Из этого получается ровный ритм, знакомый по коду и терминалам. Мне нравится этот инженерный характер, поэтому Mono стоит в заголовках, навигации и технических подписях. Вместе с Sans он связывает две стороны сайта: дизайн и технологии
Оба шрифта загружаются прямо с сайта. Если нужного символа нет в файле, браузер берёт его из системного шрифта: это особенно заметно в китайской и арабской версиях
Geist · 400 / 450 / 550 / 600
Geist Mono · 400 / 450 / 550 / 600
--font-h1 · 2remДизайн, технологии и жизнь в Дубае
--font-h2 · 1.625remДизайн, технологии и жизнь в Дубае
--font-h3 · 1.375remДизайн, технологии и жизнь в Дубае
--font-h4 · 1.25remДизайн, технологии и жизнь в Дубае
--font-h5 · 1.125remДизайн, технологии и жизнь в Дубае
--font-h6 · 1remДизайн, технологии и жизнь в Дубае
--font-large · 1.125remДизайн, технологии и жизнь в Дубае
--font-medium · .9375remДизайн, технологии и жизнь в Дубае
--font-small · .875remДизайн, технологии и жизнь в Дубае
--font-x-small · .75remДизайн, технологии и жизнь в Дубае
Иконки 67
Remix Icon делает команда Remix Design; история репозитория начинается в декабре 2018 года. Мне нравится, что у этих иконок есть общий характер: чёткие силуэты и одинаковая логика деталей. Библиотека строится на сетке 24 × 24, многие знаки существуют в контурном и залитом вариантах. Можно собрать навигацию, действия и социальные ссылки в одном стиле, и они будут выглядеть родственниками. На сайте используется версия 4.9.1, здесь показаны все 36 выбранных иконок. Я подключаю их локальными CSS-масками: размер и цвет задаются стилями, отдельный иконочный шрифт не нужен. В интерфейсе они имеют размер 32 px, в кнопке Telegram 16 px, в метаданных 12 px. Смысл действия передаётся подписью или доступным именем
Remix Icon 4.9.1 · GitHub · Remix Design · Remix Icon License v1.0
Отступы и скругления
Шкала отступов и три радиуса используются в компонентах сайта. Размеры заданы в rem и следуют настройкам шрифта браузера.
--spacing-1 · .125rem--spacing-2 · .25rem--spacing-3 · .375rem--spacing-4 · .5rem--spacing-5 · .625rem--spacing-6 · .75rem--spacing-7 · 1rem--spacing-8 · 1.25rem--spacing-9 · 1.875rem--spacing-10 · 2.5rem--radius-1
.375rem--radius-2
.625rem--radius-3
.875rem
@nevsky_alexander
В Instagram — Дубай без парадного фасада: семья, город, находки и то, что происходит между проектами. В Threads — мысли вслух о дизайне и AI, на YouTube — видео, которым тесно в сторис. Подписывайтесь там, где вам удобнее: будем на связи