Рекомендации по дизайну
Следуйте этим правилам при создании примеров UI.
Макет
- Используйте одну центрированную колонку (
max-w-2xl,mx-auto,px-6) - Сохраняйте плоский макет — избегайте вложенных карточек, панелей или контейнеров с рамками
- Используйте отступы (
mt-*,space-y-*) и типографику для разделения секций, а не блоков - Одна область управления, одна область контента — всё остальное оставляйте без обрамления
Стили
- Нейтральная цветовая палитра для текста и границ (
text-neutral-900,text-neutral-500,border-neutral-200) - Белый фон (
bg-white) - Без декоративных стилей: никаких градиентов, тяжёлых теней, слишком больших скруглённых карточек, декоративных иконок
- Кнопки:
rounded-md,px-4 py-2,text-sm font-medium - Мелкий приглушённый текст для меток и статуса:
text-xs text-neutral-400
Компоненты
- Предпочитайте предварительно загруженные компоненты из
components/ui/, если они доступны - Избегайте добавления пользовательских UI-компонентов, если это не является строго необходимым
- Отображайте интерактивные компоненты (формы волны, визуализации) встроенно, без дополнительных контейнеров-обёрток
Принципы
- Приоритет — корректность и надёжность, а не стилизация
- Сохраняйте минимализм и утилитарность
- Компактные отступы, нейтральные цвета, без декоративных элементов hero/nav