UI Page

Цвета

bg-gray-50

Фон для неактивных вкладок/ссылок в навигации/разворачивающихся списков

bg-sky-100

Фон для активных вкладок/ссылок в навигации

bg-blue-600

Фон для action кнопок/активный чекбокс/radiobutton/текущая страница в пагинации

<p className='bg-gray-50'>...</p>

<p className='bg-sky-100 text-blue-600'>...</p>

<p className='bg-blue-600 text-white'>...</p>

border-gray-100

Граница на белом фоне

border-gray-200

Граница на сером фоне (список ключей в модалке в аккордеоне)

text-gray-900

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

text-gray-600

Второстепенный текст (приоритет, номер уровня, найдено результатов ...)

text-blue-600

Активная вкладка/ссылка в навигации

Заголовок в разделах

<Title title='Заголовок' size='2xl' />

Обычный текст

Серый текст

Полужирный текст

Полужирный серый текст

Активная вкладка

<p>Обычный текст</p>

<p className='text-gray-600'>Серый текст</p>

<p className='font-medium'>Полужирный текст</p>

<p className='font-medium text-gray-600'>Полужирный серый текст</p>

<p className='font-medium text-blue-600'>Активная вкладка</p>

rounded-md

Везде, где надо использовать закругления