sfera/docs/design-system.md

Design System SFERA

UI концепция

SFERA — Enterprise AI Operating System

Интерфейс должен ощущаться как:

• Linear
• Stripe Dashboard
• Notion
• Attio
• ClickUp 3.0
• Plane
• VS Code / JetBrains IDE для authoring-сценариев 1С

SFERA не CRM. Основной UI — это современная IDE/операционная среда для 1С: semantic workspace, редактор кода, дерево объектов, дизайнер форм/отчётов, инспектор свойств, diff/preview/apply и AI-помощник.

Классический 1С Конфигуратор используется как reference workflow, а не как visual style. Мы берём рабочие паттерны 1С-разработчика: дерево конфигурации, вкладки объектов, модуль/форма/свойства/события, правый инспектор, нижние панели диагностики и поиск. Визуально это должно быть современно, плотно, спокойно и удобно для долгой работы.

Визуальный стиль

• чистый enterprise minimalism
• dark/light режим
• спокойные нейтральные цвета
• акцентный цвет для действий
• cards with soft shadows
• rounded-2xl
• минимальный glassmorphism только для важных overlay
• плотная, но не перегруженная информационная сетка

Layout principles

Главная структура

AppShell
├── Sidebar
├── Topbar
├── CommandPalette
├── Workspace
│   ├── PageHeader
│   ├── Toolbar
│   ├── ContentGrid
│   └── RightInspector
├── EditorWorkspace
│   ├── ObjectTree
│   ├── WorkspaceModeBar
│   ├── CodeEditor
│   ├── FormDesigner
│   ├── PropertiesInspector
│   ├── EventsInspector
│   ├── VersionsPanel
│   ├── DocumentationPanel
│   ├── KnowledgePanel
│   ├── LearningPanel
│   ├── ProblemsPanel
│   └── SemanticDiff
└── AI Copilot Panel

Основные зоны

Sidebar

• Dashboard
• Проекты 1С
• Объекты 1С
• Редактор BSL
• Дизайнер объектов
• Дизайнер форм
• Отчёты
• Семантический граф
• Impact analysis
• Review
• Знания
• AI
• Интеграции
• Регламентные задания
• Настройки

Topbar

• поиск
• command palette
• быстрые действия
• уведомления
• профиль
• переключение проекта/организации

Right Inspector

Контекстная панель для:

• объекта 1С
• процедуры или функции
• формы, команды или элемента формы
• реквизита или табличной части
• отчёта
• AI анализа
• истории изменений
• связанных сущностей

Компонентные правила

Карточки

• rounded-2xl
• border
• bg-card
• shadow-sm
• padding минимум p-4

Таблицы

• sticky header
• фильтры
• saved views
• быстрый поиск
• column visibility
• bulk actions
• inline status badge
• row details через drawer/inspector

Формы

• разделять на logical sections
• использовать progressive disclosure
• показывать validation inline
• сохранять drafts
• audit trail для важных изменений

Цветовые токены

background
foreground
card
card-foreground
muted
muted-foreground
border
input
primary
primary-foreground
secondary
destructive
warning
success
info

Статусы

Задача

Новая
В работе
На проверке
Выполнена
Отменена
Просрочена

Сделка

Активна
Неактивна
На бординге
Ожидает документов
Приостановлена
Закрыта

Терминал

Подключен
Не подключен
Отключен банком
Ошибка настройки

AI UX

AI должен быть не отдельной страницей, а частью workflow:

• AI Copilot справа
• подсказки в карточках
• inline completion в BSL editor
• context-aware suggestions по текущим переменным, реквизитам, табличным частям, форме и объекту 1С
• генерация кода, объектов, форм, команд и отчётов через preview/diff/apply
• объяснение текущего кода и структуры объекта
• генерация безопасных изменений 1С
• продолжение кода по текущему контексту
• объяснение изменений
• статистика токенов и лимитов

Knowledge, Docs, Training UX

SFERA должна показывать знания рядом с местом работы, а не прятать их в отдельную wiki:

• документация объекта, формы, отчёта и бизнес-правила доступны из IDE-контекста;
• база знаний связывается с lineage объекта, процедурами, запросами и событиями формы;
• training/onboarding показывает рекомендации по текущему коду, стандартам команды и типовым ошибкам;
• AI отвечает только с учётом доступных знаний, прав и privacy policy;
• history/versions объясняют, почему объект менялся, какими задачами и решениями это было связано.