Одиннадцать тем для одного каталога музыки

Rate My Music — личный сайт, где альбомы оцениваются по трекам: из оценок треков складывается итог альбома от 0 до 100, десятки отмечаются отдельно. Я сделал для него систему тем: каждая меняет палитру, шрифты, скругления и пару фирменных деталей, а разметка страниц остаётся одной. Все изображения ниже — скриншоты работающего сайта, а не макеты.

11 тем
1 разметка на все темы
смена темы без перезагрузки
адаптив 390 px → 1440 px

Главная страница сайта в теме «Галерея ночью»: пластинка с обложкой и цитата

Страница альбома на телефоне в теме «Галерея ночью»

Темы

Одна страница альбомов в каждой теме

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

Шрифты
Оценка

Обзор

Все темы рядом

Другие экраны

Статистика и артисты

Страница статистики: капсула месяца с временем прослушивания, средней оценкой, альбомом и треком месяца — Статистика: «капсула» текущего месяца в духе Spotify Sound Capsule — время с музыкой, средняя, альбом и трек месяца, дни недели.

Список артистов на телефоне с фото, средней оценкой и прогрессом по дискографии — Артисты: средняя оценка на фото и полоска «сколько альбомов дискографии оценено».

Процесс

Как сделано

Референсы и наброски
Для каждой идеи сначала статичный набросок на реальных данных: список альбомов и страница альбома. В работу шли только темы, прошедшие отбор.
Токены вместо разметки
Тема — это набор переменных: фон, текст, акцент, цвет десяток, шкала оценок, шрифты, скругления. Страницы берут только переменные, поэтому новая тема не трогает компоненты.
Фирменная деталь
Поверх токенов у темы одна-две детали, которые не передать цветом: пряжка вместо кольца в «1017», оторванный край чека, точечный шрифт «Матрицы».
Проверка на устройствах
Каждая тема проверена на телефоне и на компьютере: без горизонтальной прокрутки, с читаемым текстом и ровной шапкой.

Работал в паре с ИИ-ассистентом Claude Code: я ставил задачу, выбирал направления по наброскам и проверял результат на своём телефоне, ассистент писал код и готовил наброски.