sparklingman
Замовити

Design System · v5

Дизайн-система sparklingman

Кольори, шрифт, сітка й компоненти, з яких зібраний sparklingman.com. Тут лише справжні класи сайту на Tailwind CSS v4: клік по класу копіює його, кожен приклад можна скопіювати кодом.

Почати з кольорів Компоненти →
бренд-колір pink-600
#e60076
бренд-колір pink-600
відтінків рожевого
11
відтінків рожевого
шрифт — font-mono
1
шрифт — font-mono
Tailwind CSS
v4
Tailwind CSS

01 · Основа

Принципи

Чотири правила, з яких складається вигляд sparklingman.com. Якщо сумніваєтесь, як зробити новий блок, — почніть звідси.

Чорне тло

Сайт живе на bg-black: на чорному картини й фото світяться. Білий аркуш — лише для довгого тексту статей.

Один акцент — рожевий

pink-600 #e60076 — заливка при наведенні, активний стан, мітки. Світлі відтінки 50–400 — текст на чорному.

Один шрифт

font-mono стоїть на <html>: увесь сайт — моноширинним. Ієрархію дають розмір, жирність і розрядка.

Доступність за замовчуванням

Контраст тексту не нижче AA, видимий фокус, alt у кожного фото, підписи до іконок, рух без різких анімацій.

02 · Основа

Кольори

Рожева шкала Tailwind v4, чорне тло і прозорі шари білого. Кожен колір має роль — не беріть відтінок «бо гарний».

pink-50

Заголовки на чорному

● 19.2 AAA○ 1.1 —

pink-100

Основний текст на чорному

● 17.9 AAA○ 1.2 —

pink-200

Текст чипів і міток

● 15.2 AAA○ 1.4 —

pink-300

Посилання, наведення

● 11.5 AAA○ 1.8 —

pink-400

Надзаголовки, ціни

● 7.6 AAA○ 2.8 —

pink-500

Рамки, лінія цитати

● 5.9 AA○ 3.6 AA 18px+

pink-600

Бренд: заливка, активний стан

● 4.6 AA○ 4.5 AA

pink-700

Тіні карток

● 3.6 AA 18px+○ 5.9 AA

pink-800

Темний рожевий на білому

● 2.7 —○ 7.9 AAA

pink-900

Кінець градієнтів

● 2.2 —○ 9.7 AAA

pink-950

Глибокі тіні, фон

● 1.4 —○ 15.1 AAA

● — контраст на чорному, ○ — на білому (WCAG 2.1). Клік по кольору копіює клас, по HEX — сам колір.

Чорний, білий і прозорість

Сірих кольорів на сайті немає: глибину дають прозорі шари білого поверх чорного.

Тло всього сайту

Скляна картка

Поле, кнопка копіювання

Рамки й роздільники

Чип поверх фото

Аркуш статті

Рівні тексту на чорному

Заголовок — головне на екрані

19.2:1

Основний текст сторінки

17.9:1

Лід і описи під заголовками

Дата, час читання, підписи

Надзаголовок, ціна, акцент

7.6:1

Службові кольори

Лише там, де колір несе зміст. Для оформлення — тільки рожевий.

blue-600

Посилання в тексті статті (на білому 5.3:1)

green-400

Успіх: «Скопійовано», статус

orange-500

Попередження: примітка tone="warn"

Градієнти

sparklingman

Назва сайту в шапці

Іконка застосунку без картинки

03 · Основа

Типографіка

Один моноширинний шрифт на весь сайт. Ієрархія — розміром, жирністю й розрядкою, а не різними гарнітурами.

Aa

АБВГҐДЕЄЖЗИІЇЙКЛМНОПРСТУФХЦЧШЩЬЮЯ
абвгґдеєжзиіїйклмнопрстуфхцчшщьюя
ABCDEFGHIJKLM abcdefghijklm
0123456789 € ₴ → · — « »

Шрифт

font-mono

Системний моноширинний: SF Mono на Mac і iPhone, Menlo, Consolas. Нічого не завантажується — текст з'являється одразу.

Головний заголовок

h1 у першому екрані кожної сторінки

Дизайн-система

Заголовок матеріалу

h1 статті, картини, роботи, застосунку, послуги, товару

Скільки часу знадобиться хакеру?

Надзаголовок

над заголовком секції, розділ блогу

За темою

Заголовок секції

h2 кожної секції

Читайте також

Заголовок картки

h3 у картці; text-lg — у магазині

Футер у веброзробці

Лід

опис під h2

Короткий вступ під заголовком секції, до двох рядків.

Основний текст

текст сторінок

Звичайний абзац тексту на чорному тлі.

Мета

дата, час читання

27 липня 2026 · 4 хв читання

Велика цифра

лічильники на головній

55+

Заголовок секції

Надзаголовок, заголовок і посилання «Усі →» праворуч — так починаються секції головної, блогу й магазину.

За темою

Читайте також

Усі статті 
<div class="flex flex-wrap items-end justify-between gap-6">
  <div>
    <p class="text-sm font-bold uppercase tracking-[0.3em] text-pink-400">За темою</p>
    <h2 class="mt-3 text-3xl font-bold text-pink-50 md:text-5xl">Читайте також</h2>
  </div>
  <a href="/blog/" class="group inline-flex shrink-0 items-center gap-2 font-bold text-pink-300 transition hover:text-white">Усі статті <span aria-hidden="true" class="transition-transform group-hover:translate-x-1">→</span></a>
</div>

Перший екран сторінки

Однаковий на всіх сторінках розділів (Роботи, Послуги, Магазин, Про мене, Блог, Контакти): відступ pt-10 md:pt-40, текст угорі — не по центру поруч із фото. Так надзаголовок і заголовок стоять на одній висоті, коли переходиш з розділу в розділ. Сторінка одного матеріалу (стаття, картина, застосунок, товар) — так само, але надзаголовок — хлібні крихти «Розділ / Назва», а заголовок менший: text-4xl md:text-6xl.

Послуги

Заголовок сторінки

Лід: одне-два речення про сторінку.

<section class="px-6 pb-14 pt-10 md:pb-20 md:pt-40">
  <div class="mx-auto max-w-7xl">
    <p class="text-sm font-bold uppercase tracking-[0.3em] text-pink-400">Послуги</p>
    <h1 class="mt-4 text-5xl font-bold leading-[1.05] text-pink-50 md:text-7xl">Заголовок сторінки</h1>
    <p class="mt-6 max-w-2xl text-lg text-pink-100/80 md:text-xl">Лід: одне-два речення про сторінку.</p>
  </div>
</section>

04 · Основа

Сітка, відступи, форми

Ритм сторінки: контейнер, відступи секцій, заокруглення і рожеве світіння замість звичайних тіней.

Відступи

Крок Tailwind — 4px. Найчастіші: 4 у кнопках і картках, 6 — поля контейнера, 14/20 — секції.

14px
28px
312px
416px
624px
832px
1040px
1456px
2080px
2496px

Контейнер і точки зламу

Вміст — у колонці 1280px з полями 24px. Спершу верстається телефон, далі префікси sm/md/lg.

sm640pxвеликий телефон

md768pxпланшет — дві колонки, більші заголовки

lg1024pxноутбук — бічні колонки

xl1280pxширина контейнера

Заокруглення

none

фото в картках

md

код, класи

xl

примітки, поля

2xl

панелі, картки

3xl

застосунки

full

кнопки, чипи

Тіні й світіння

На чорному тінь — це рожеве світіння. Наведіть на картку: тінь стає яскравішою.

Активна
світіння

05 · Компоненти

Кнопки

Усі кнопки сайту — пігулки з тонкою рожевою рамкою. Заливка з'являється лише при наведенні або в активному стані.

Основна кнопка

Пігулка з рамкою: заливається рожевим при наведенні. Головна дія секції: «Замовити», «Купити картину», «Усі статті».

Замовити 
<a href="/contact" class="group inline-flex items-center gap-3 rounded-full px-6 py-3 font-bold text-pink-100 ring-1 ring-pink-500/40 transition hover:bg-pink-600 hover:text-white hover:ring-pink-600 focus:outline-none focus:ring-2 focus:ring-pink-600 focus:ring-offset-2 focus:ring-offset-black">
  Замовити
  <svg class="h-5 w-5 transition-transform group-hover:translate-x-1" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"/></svg>
</a>

Стани

Звичайна, наведення, фокус з клавіатури (Tab) і вимкнена. Фокус завжди видно — кільце з відступом.

Звичайна Наведення Фокус 
<div class="flex flex-wrap items-center gap-4">
  <span class="inline-flex rounded-full px-6 py-3 font-bold text-pink-100 ring-1 ring-pink-500/40">Звичайна</span>
  <span class="inline-flex rounded-full bg-pink-600 px-6 py-3 font-bold text-white ring-1 ring-pink-600">Наведення</span>
  <span class="inline-flex rounded-full px-6 py-3 font-bold text-pink-100 ring-2 ring-pink-600 ring-offset-2 ring-offset-black">Фокус</span>
  <button type="button" disabled class="inline-flex cursor-not-allowed rounded-full px-6 py-3 font-bold text-pink-100 opacity-40 ring-1 ring-pink-500/40">Вимкнена</button>
</div>

Розміри й варіанти

Мала — для фільтрів і другорядних дій; заповнена — активний стан; кругла — стрілки й номери сторінок.

Мала Заповнена Текстова 
<div class="flex flex-wrap items-center gap-4">
  <a href="/blog/" class="rounded-full px-4 py-2 text-sm font-bold text-pink-100 ring-1 ring-pink-500/40 transition hover:bg-pink-600 hover:text-white hover:ring-pink-600">Мала</a>
  <a href="/blog/" class="rounded-full bg-pink-600 px-6 py-3 font-bold text-white shadow-lg shadow-pink-700/40 transition hover:bg-pink-500">Заповнена</a>
  <a href="/blog/" aria-label="Далі" class="grid h-11 min-w-11 place-items-center rounded-full px-3 text-pink-100 ring-1 ring-pink-500/40 transition hover:bg-pink-600 hover:text-white hover:ring-pink-600">
    <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"/></svg>
  </a>
  <a href="/blog/" class="group inline-flex items-center gap-2 font-bold text-pink-300 transition hover:text-white">Текстова <span aria-hidden="true" class="transition-transform group-hover:translate-x-1">→</span></a>
</div>

Так

  • Одна основна кнопка на екран.
  • Дієслово: «Купити картину», «Написати».
  • Стрілка → веде далі, ↗ — на інший сайт.
  • Висота не менше 44px — зручно пальцем.

Ні

  • Кілька заповнених кнопок поруч.
  • «Натисніть тут», «Детальніше» без контексту.
  • Інші кольори кнопок, крім рожевого.
  • Прибирати кільце фокусу без заміни.

07 · Компоненти

Мітки й чипи

Маленькі підписи, що пояснюють картку з першого погляду.

Мітки на фото

Чорний чип — тема статті; рожевий — статус («Бета», «Продано»). Завжди в лівому верхньому куті.

Код Скоро Бета Продано 
<div class="flex flex-wrap items-center gap-3">
  <span class="rounded-full bg-black/80 px-3 py-1 text-xs font-bold text-pink-200 ring-1 ring-white/10">Код</span>
  <span class="rounded-full bg-black/80 px-3 py-1 text-xs font-bold text-pink-200 ring-1 ring-white/10">Скоро</span>
  <span class="rounded-full bg-pink-600 px-3 py-1 text-xs font-bold text-white">Бета</span>
  <span class="bg-pink-600 px-3 py-1 text-xs font-bold uppercase tracking-wider text-white">Продано</span>
</div>

Стрічка «Продано»

Загнутий кінчик — для картин у галереї проданих.

Продано 
<div class="relative h-40 w-56 bg-white/5 shadow-2xl shadow-pink-700/20">
  <span class="absolute -left-2 top-4 z-10 bg-pink-600 px-3 py-1 text-xs font-bold uppercase tracking-wider text-white shadow-md before:absolute before:left-0 before:top-full before:border-l-8 before:border-t-8 before:border-l-transparent before:border-t-pink-900">Продано</span>
</div>

Ціна й статус

Ціна — рожева й жирна; продана — приглушена.

800 €

1200 €

iPhone · iPad · Mac

<div class="flex flex-wrap items-baseline gap-8">
  <p class="text-lg font-bold text-pink-400">800 €</p>
  <p class="text-lg font-bold text-pink-100/30" title="Продано">1200 €</p>
  <p class="text-xs tracking-wider text-pink-400">iPhone · iPad · Mac</p>
</div>

08 · Компоненти

Картки

Картки — серце сайту. Нижче не копії, а справжні картки з бази: зміниться чанк — зміниться й тут.

Стаття блогу · blogCardDark

Квадратне фото без заокруглення, рожеве світіння, мітка теми, дата й час читання. Живі картки — три останні статті.

робочий стіл з ноутбуком і екраном входу

20 жовтня 2026 · 4 хв читання

Скільки часу знадобиться хакеру злам пароля?
Обкладинка статті «Навіщо нам штучний інтелект у повсякденному житті» ШІ

22 вересня 2026 · 2 хв читання

Навіщо нам штучний інтелект у повсякденному житті
Архітектура масштабного React Native проєкту Код

9 серпня 2026 · 3 хв читання

Архітектура масштабного React Native проєкту

 
{% list parents=255 data="image,topic" limit=3 hide_containers=1 %}
  {% include blogCardDark %}
{% endlist %}

Картина · shopCard

Фото у своїх пропорціях, назва і ціна в один рядок, розмір під ними.

Agreed to agree

Agreed to agree

1500 €

50 × 80 см. Acrylic on canvas.
Картина: Межа

Border

2000 €

80 × 80 см. Acrylic on canvas.
Anabiosis

Anabiosis

2500 €

80 × 80 см. Acrylic on canvas.

 
{% list parents=163 data="image,price,sold,detail" limit=3 without="sold" hide_containers=1 %}
  {% include shopCard %}
{% endlist %}

Застосунок · appCard

Скляна картка з іконкою, описом і платформами.

Stellar Sich

Stellar Sich

Класичний піксель-арт шутер: 12 рівнів, боси й 10 видів бонусів.

iOS
Тяма

Тяма

Спокійна й азартна гра про злиття кульок із живою фізикою.

iOS
Мрій

Мрій

Трекер звичок із Помодоро-таймером — без реклами й підписок.

iOS

 
{% list parents=408 data="image,platforms,app_status" limit=3 hide_containers=1 sort=menuindex dir=asc %}
  {% include appCard %}
{% endlist %}

Скляна картка

Для переваг, послуг, кроків. Піднімається й підсвічується при наведенні.

Послуга

Сайт під ключ

Дизайн, верстка й власна CMS — без шаблонів.

<a href="/contact" class="group block max-w-sm rounded-2xl bg-white/[0.04] p-5 ring-1 ring-white/10 transition duration-300 hover:-translate-y-1 hover:bg-white/[0.07] hover:ring-pink-500/50">
  <p class="text-xs uppercase tracking-wider text-pink-400">Послуга</p>
  <h3 class="mt-2 text-xl font-bold text-pink-50">Сайт під ключ</h3>
  <p class="mt-2 text-sm text-pink-100/70">Дизайн, верстка й власна CMS — без шаблонів.</p>
</a>

Рожева плитка

Заклик серед звичайних карток: «Дивитися всі», «Замовити».

Магазин Дивитися всі картини 
<a href="/shop/" class="group flex aspect-square max-w-xs flex-col justify-between bg-pink-600 p-6 text-white transition duration-300 hover:-translate-y-1 hover:bg-pink-500 md:p-8">
  <span class="text-sm font-bold uppercase tracking-[0.2em]">Магазин</span>
  <span class="text-3xl font-bold leading-tight">Дивитися всі картини <span aria-hidden="true" class="inline-block transition-transform group-hover:translate-x-1">→</span></span>
</a>

09 · Компоненти

Форми

Поля на чорному: прозоре тло, тонка рамка, рожеве кільце у фокусі.

Пошук

Поле блогу: лупа зліва, результати оновлюються під час введення.

<label class="relative block max-w-md">
  <span class="sr-only">Пошук по блогу</span>
  <span class="pointer-events-none absolute inset-y-0 left-4 flex items-center text-pink-100/50"><svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"/></svg></span>
  <input type="search" placeholder="Знайти статтю…" class="w-full rounded-full border-0 bg-white/[0.06] py-3 pl-12 pr-4 text-pink-50 placeholder:text-pink-100/40 outline-none ring-1 ring-white/10 transition focus:bg-white/[0.1] focus:ring-2 focus:ring-pink-500">
</label>

Форма

Підпис над полем, підказка під ним. Ті самі прозорі шари, що й у картках.

<form class="grid max-w-md gap-5">
  <label class="grid gap-2">
    <span class="text-sm font-bold text-pink-100">Ім'я</span>
    <input type="text" placeholder="Як до вас звертатися" class="w-full rounded-xl border-0 bg-white/[0.06] px-4 py-3 text-pink-50 placeholder:text-pink-100/40 outline-none ring-1 ring-white/10 transition focus:bg-white/[0.1] focus:ring-2 focus:ring-pink-500">
  </label>
  <label class="grid gap-2">
    <span class="text-sm font-bold text-pink-100">Повідомлення</span>
    <textarea rows="3" placeholder="Розкажіть про ідею" class="w-full rounded-xl border-0 bg-white/[0.06] px-4 py-3 text-pink-50 placeholder:text-pink-100/40 outline-none ring-1 ring-white/10 transition focus:bg-white/[0.1] focus:ring-2 focus:ring-pink-500"></textarea>
    <span class="text-xs text-pink-100/50">Відповідаю протягом дня.</span>
  </label>
  <label class="flex items-center gap-3 text-sm text-pink-100/70">
    <input type="checkbox" class="h-5 w-5 rounded accent-pink-600"> Надіслати копію на пошту
  </label>
  <button type="button" class="justify-self-start rounded-full bg-pink-600 px-6 py-3 font-bold text-white shadow-lg shadow-pink-700/40 transition hover:bg-pink-500 focus:outline-none focus:ring-2 focus:ring-pink-600 focus:ring-offset-2 focus:ring-offset-black">Надіслати</button>
</form>

10 · Бренд

Логотип та іконки

Знак сайту — їжак із рожевих голок. Іконки інтерфейсу — тонкі контурні, одного набору.

sparklingman

Знак «Їжак»

  • Колір. Рожевий text-pink-500 через currentColor; поруч — назва градієнтом.
  • Тло. Лише чорне: прорізи між голками зроблені чорною заливкою.
  • Розмір. 40–48px у шапці, 32px у стиснутій шапці, не менше 24px.
  • Поле. Навколо знака — вільне місце не менше половини його ширини.

Іконки

Heroicons, контурні: товщина лінії 1.5 (2 — для дрібних стрілок), розмір h-5/h-6, колір — currentColor. Клік по іконці копіює її SVG.

11 · Взаємодія

Рух

Анімації короткі й тихі: картка трохи піднімається, фото повільно наближається, стрілка робить крок.

Підйом

Зум фото

Далі →

Стрілка

Світіння

300ms

Кольори, підйом, тінь — більшість наведень

500ms

Поява блоків, зміна розміру шапки

700ms

Повільний зум фото в картках

Рух тільки у відповідь на дію людини. Для тих, хто вимкнув анімації в системі, — motion-reduce:transition-none.

12 · Контент

Стаття

Білий аркуш для довгого читання. Тут усе живе: справжні стилі блогу і справжні блоки.

Заголовок розділу статті

Довгий текст читається на білому аркуші: чорні літери, рожеві заголовки. Посилання — сині з підкресленням, при наведенні рожеві. Код у реченні — P@ssword123.

Підзаголовок

  • Пункти списку з відступом між ними.
  • Без класів — стилі дає сам аркуш.

Мистецтво — це спосіб говорити без слів.

— Анатолій Куралов, художник
ДовжинаЛише цифриУсі символи
8миттєво~2 години
12~6 секунд~3 000 років

Купити картину

Написати мені

Звичайний текст — без класів

Заголовки, абзаци, списки, посилання, таблиці з markdown і код у статті оформлює site.css (.text-blog). Клас на тегу перемагає ці стилі.

Готові блоки

Цитата, примітка, кнопка, галерея, відео і зміст — одним тегом у тексті. Повний список — в адмінці, «Довідка».

{% block quote text="Мистецтво — це спосіб говорити без слів." author="Анатолій Куралов" role="художник" %}
{% block note text="Примітка: важлива думка в рожевій рамці." %}
{% block note text="Попередження." tone="warn" %}
{% block button text="Купити картину" url="/shop/" %}
{% block button text="Написати мені" url="/contact" style="outline" %}

13 · Контент

Код

Приклади коду в статтях: підсвітка, номери рядків і копіювання одним кліком.

Як вставити код

  1. Обгорніть код у <pre data-lang="html"><code>.
  2. Пишіть код як є — без &lt; і &gt;: сайт сам покаже його текстом.
  3. Мова — коротко: html, css, js, php, bash, json, markdown…
  4. У markdown те саме дає ```css.

Що отримує блок

  • Підсвітку highlight.js у рожевій темі.
  • Номери рядків в окремій колонці.
  • Назву мови й кнопку «Копіювати» з галочкою.
  • Без data-lang блок лишається звичайним.

.card:hover {
  color: #e60076;
  transform: translateY(-4px);
}


const cards = document.querySelectorAll('.card');
cards.forEach((card, i) => card.dataset.n = i + 1);

14 · Якість

Доступність

Перевірка перед публікацією нового блоку. Сайт має бути зручним для кожного — з будь-яким зором, слухом і пристроєм.

Контраст

Текст на чорному — pink-50…400 (від 7.6:1). pink-600 на чорному — 4.6:1: лише для великого тексту, кнопок і заливок.

Фокус

Кожен інтерактивний елемент має видиме кільце: focus:ring-2 focus:ring-pink-600 focus:ring-offset-black.

Розмір цілі

Кнопки й посилання-іконки — не менше 44×44px (h-11 min-w-11).

Підписи

Кнопка-іконка — з aria-label, декоративні SVG — aria-hidden="true", у фото — alt.

Рух

Без автопрокрутки й мигтіння; motion-reduce вимикає переходи.

Структура

Один h1 на сторінку, заголовки по порядку, lang="uk", навігація в <nav> з підписом.

Дизайн-система зібрана з шаблонів і чанків сайту · Tailwind CSS v4.0.17 · оновлено у жовтні 2026

Скопійовано