iistwin/attached_assets/Pasted-1-f-1765908057124_1765908057128.txt

1. Общий визуальный стиль
Создай современный, минималистичный интерфейс на базе плоского дизайна (flat design) с легкими микровзаимодействиями:

Основной подход: Максимальная компактность без визуального хаоса — информация плотно организована, но читаемая

Сетка: Используй CSS Grid / Flexbox для эффективного использования пространства

Отступы: Минимальные внутренние отступы (8px, 12px вместо 16px, 24px)

Высота строк в таблицах: Компактные (36-40px вместо 48px+)

Шрифты: Геометрический sans-serif (Inter, Roboto, Segoe UI) для лучшей читаемости в плотной сетке

Закругления: Минимальные border-radius (4-6px), не округлые кнопки

2. Светлая тема (Light Mode)
Цветовая палитра:

Фон основной: #FFFFFF или #F8F9FA (очень светлый серый для легкого разделения зон)

Фон вторичный: #F0F2F5 (для карточек, панелей)

Текст основной: #1A1A1A или #2C3E50 (темный, контрастный)

Текст вторичный: #666666 или #7A8A99 (для подписей, метаданных)

Акцент (primary): #2E8B94 или #0078D4 (спокойный синий/бирюзовый)

Акцент второй: #F57C00 или #FF9800 (оранжевый для выделения)

Статусы:

✅ Готово: #4CAF50 (зеленый)

⏳ В работе: #FFC107 (желтый)

❌ Просрочено: #F44336 (красный)

⏸️ Паузирована: #9E9E9E (серый)

Границы: #E0E0E0 или #DDD (легкая серая линия, не черная)

Стиль элементов:

Кнопки: Без теней, субтильные границы или сплошной цвет

Таблица: Четкая сетка с линиями 1px solid #E0E0E0, чередующиеся серые строки (#F8F9FA) для читаемости

Инпуты: Граница вместо фона, :focus добавляет нежную тень и меняет цвет границы

Карточки: Легкая граница, без теней (максимум 0 1px 3px rgba(0,0,0,0.05))

3. Темная тема (Dark Mode)
Цветовая палитра:

Фон основной: #1A1A1A или #0D1B1E (глубокий темный)

Фон вторичный: #262626 или #1F2937 (немного светлее основного)

Текст основной: #FFFFFF или #F5F5F5 (белый с лёгким оттенком)

Текст вторичный: #A0A0A0 или #9CA3AF (светлый серый)

Акцент (primary): #4DB5C0 или #60A5FA (более яркий бирюзовый/синий в темноте)

Акцент второй: #FFB366 или #FBBF24 (яркий оранжевый)

Статусы (более яркие варианты):

✅ Готово: #66BB6A или #10B981 (яркий зеленый)

⏳ В работе: #FDD835 или #FBBF24 (светлый желтый)

❌ Просрочено: #EF5350 или #F87171 (светлый красный)

⏸️ Паузирована: #BDBDBD или #D1D5DB (светлый серый)

Границы: #3F3F3F или #374151 (едва видимая серая линия)

Стиль элементов:

Кнопки: Мягкие, слегка видимые границы или слабая тень 0 2px 8px rgba(0,0,0,0.3)

Таблица: Строки чередуются (#262626 и #1F2937), границы едва видны

Инпуты: Тонкая граница, на :focus свечение в цвете акцента

Карточки: Мягкая граница + легкая тень для глубины

4. Структура макета (Компактность)
Хедер:

Высота: 50-56px (вместо 64px+)

Логотип/название слева, поиск в центре (компактный), пользователь справа

Иконки вместо текста где возможно

Боковая панель (если есть):

Ширина: 240-260px (узкая, но удобная)

Пункты меню: высота 40px, иконка + текст, компактное разреживание

Свернутое состояние: только иконки (120px)

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

Таблица с данными: компактные ячейки (36-40px высота), минимальные отступы

Максимум видимых строк на экране: 15-20 без скролла (за счет компактности)

Колонки: переносимые, можно скрывать/показывать

Модальные окна и формы:

Используй миниатюрные инпуты (28-32px высота)

Кнопки: компактные (8px 16px вместо 12px 24px)

Максимум 3-4 поля на видимой области

5. Интерактивные элементы
Переходы:

Все переходы: transition: all 150ms ease-in-out

Hover эффекты: легкое затемнение (opacity или background-color shift)

Focus: видимый outline или shadow

Состояния:

Активные: более яркий цвет, bold текст

Disabled: opacity: 0.5, не кликабельные

Loading: спиннер или skeleton loading

Иконки:

Используй набор иконок (Feather, Material Design, или SVG)

Размер: 16-20px в компактных местах, 24px в кнопках

6. Типография
Основной шрифт: Inter, Roboto, "Segoe UI" (sans-serif)

Размеры:

Заголовки (h1): 24-28px, font-weight: 700

Подзаголовки (h2): 18-20px, font-weight: 600

Основной текст: 14px, font-weight: 400

Подписи (caption): 12px, font-weight: 400, color: secondary text

Высота строки: 1.4-1.5 для компактности

7. Темная/Светлая темы (Техническая реализация)
Использование:

CSS переменные (CSS custom properties) для цветов

Data-атрибут или класс: data-theme="light" / data-theme="dark"

Переключатель в хедере (иконка солнца/луны, 20px)

Сохранение выбора в localStorage

Пример структуры CSS:

css
:root {
  --bg-primary: #FFFFFF;
  --bg-secondary: #F8F9FA;
  --text-primary: #1A1A1A;
  --text-secondary: #666666;
  --accent: #2E8B94;
  --border: #E0E0E0;
}

[data-theme="dark"] {
  --bg-primary: #1A1A1A;
  --bg-secondary: #262626;
  --text-primary: #FFFFFF;
  --text-secondary: #A0A0A0;
  --accent: #4DB5C0;
  --border: #3F3F3F;
}
8. Компоненты (Общие требования)
Таблица/Список:

Компактные ячейки, четкие разделители

Hoverable строки (слабое фоновое изменение)

Сортировка по клику на заголовок

Фильтры над таблицей (компактные инпуты)

Кнопки:

Primary: Сплошной цвет акцента, белый текст

Secondary: Граница + текст акцента, прозрачный фон

Tertiary: Текст акцента, без фона/границы, только на hover показывается фон

Размеры: small (28px), medium (36px), large (44px)

Инпуты:

Граница по умолчанию, focus - боковая тень или выделение границы

Placeholder: светлый текст

Error: красная граница + сообщение ошибки (12px, красный текст)

Уведомления/Алерты:

Компактные: 40-48px высота

Иконка + текст + кнопка закрыть

Позиция: top-right или bottom-right

9. Адаптивность
Desktop: Полный контент, боковая панель видна

Tablet: Боковая панель сворачивается, контент расширяется

Mobile: Полноэкранный, меню-гамбургер, стек элементов

Итоговый стиль: Минималистичный Pro Dashboard
Представь себе интерфейс, похожий на:

Todoist (за компактность и чистоту)

Linear (за современный, плотный дизайн)

Figma (за функциональность и темную тему)

Notion (за гибкость и организованность)

Главное правило: Каждый пиксель должен работать на функциональность. Никакого лишнего пространства, но и никакого визуального хаоса.