Палитра цветов

Цветовая палитра uStatic CSS основана на современной дизайн-системе.

Основные цвета

Primary (Основной цвет бренда)

50

100

200

300

400

500

600

700

800

900

950

Класс	Описание
bg-primary-50	Очень светлый
bg-primary-100	Светлый фон
bg-primary-200	Вторичный фон
bg-primary-300	Акценты
bg-primary-400	Основной светлый
bg-primary-500	Основной цвет
bg-primary-600	При наведении
bg-primary-700	Активный
bg-primary-800	Тёмный
bg-primary-900	Очень тёмный
bg-primary-950	Самый тёмный

Secondary (Вторичный цвет)

50

500

900

Семантические цвета

Success (Успех)

50

100

500

700

900

Просмотр

✓ Успешно!

Операция выполнена успешно

Код

<div class="bg-success text-white p-4 rounded">
  <div class="font-bold">✓ Успешно!</div>
  <div class="text-sm">Операция выполнена успешно</div>
</div>

Danger (Опасность/Ошибка)

50

100

500

700

900

Просмотр

✗ Ошибка!

Произошла ошибка при выполнении

Код

<div class="bg-danger text-white p-4 rounded">
  <div class="font-bold">✗ Ошибка!</div>
  <div class="text-sm">Произошла ошибка при выполнении</div>
</div>

Warning (Предупреждение)

50

100

500

700

900

Просмотр

⚠ Внимание!

Важная информация для пользователя

Код

<div class="bg-warning text-white p-4 rounded">
  <div class="font-bold">⚠ Внимание!</div>
  <div class="text-sm">Важная информация для пользователя</div>
</div>

Info (Информация)

50

100

500

700

900

Просмотр

ℹ Информация

Полезная информация для пользователя

Код

<div class="bg-info text-white p-4 rounded">
  <div class="font-bold">ℹ Информация</div>
  <div class="text-sm">Полезная информация для пользователя</div>
</div>

Нейтральные цвета (Gray)

50

100

200

300

400

500

600

700

800

900

Класс	Описание
bg-gray-50	Фон карточек
bg-gray-100	Фон кнопок
bg-gray-200	Границы
bg-gray-300	Разделители
bg-gray-400	Неактивные элементы
bg-gray-500	Вторичный текст
bg-gray-600	Основной текст
bg-gray-700	Заголовки
bg-gray-800	Тёмный фон
bg-gray-900	Самый тёмный

Дополнительные цвета

Красный (Red)

50

100

500

700

900

Оранжевый (Orange)

50

100

500

700

Жёлтый (Yellow)

50

100

500

700

Зелёный (Green)

50

100

500

700

Синий (Blue)

50

100

500

700

Голубой (Sky)

50

100

500

700

Специальные цвета

white

black

transparent

Примеры использования

Карточка в светлой теме

Просмотр

Заголовок

Описание карточки

Действие

Код

<div class="bg-white border border-gray-200 rounded p-6 max-w-96">
  <h3 class="text-lg font-bold text-gray-900 mb-2">Заголовок</h3>
  <div class="text-gray-600 mb-4">Описание карточки</div>
  <button
    class="bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded"
  >
    <p>Действие</p>
  </button>
</div>

Уведомления

Просмотр

✓ Операция выполнена успешно

✗ Произошла ошибка

⚠ Предупреждение

ℹ Информация

Код

<div class="flex flex-col gap-4 max-w-96">
  <div class="bg-success bg-opacity-25 border-l-4 border-success p-4 rounded">
    <div class="text-success font-medium">✓ Операция выполнена успешно</div>
  </div>
  <div class="bg-danger bg-opacity-25 border-l-4 border-danger p-4 rounded">
    <div class="text-danger font-medium">✗ Произошла ошибка</div>
  </div>
  <div class="bg-warning bg-opacity-25 border-l-4 border-warning p-4 rounded">
    <div class="text-warning font-medium">⚠ Предупреждение</div>
  </div>
  <div class="bg-info bg-opacity-25 border-l-4 border-info p-4 rounded">
    <div class="text-info font-medium">ℹ Информация</div>
  </div>
</div>

Статусы

Просмотр

Активен

Ожидание

Ошибка

Код

<div class="flex gap-2">
  <span
    class="bg-success bg-opacity-25 text-success px-3 py-1 rounded-full text-sm font-medium"
  >
    <p>Активен</p>
  </span>
  <span
    class="bg-warning bg-opacity-25 text-warning px-3 py-1 rounded-full text-sm font-medium"
  >
    <p>Ожидание</p>
  </span>
  <span
    class="bg-danger bg-opacity-25 text-danger px-3 py-1 rounded-full text-sm font-medium"
  >
    <p>Ошибка</p>
  </span>
</div>