EAM Design System v1.0

🎨 Colors (16 tokens)

Primary
--color-primary: #0b2a4a
--color-primary-light: #1a4060
--color-primary-dark: #071a2e
Accent
--color-accent: #1f6d9b
--color-accent-light: #4a9bcb
--color-accent-dark: #15507a
Semantic
--color-success: #1f6d3a
--color-warning: #b47d00
--color-danger: #b22222

🔤 Typography (8 sizes)

Font Sizes
--font-xs: 0.6rem --font-sm: 0.7rem --font-md: 0.8rem --font-lg: 0.95rem --font-xl: 1.2rem --font-2xl: 1.6rem --font-3xl: 2.2rem
Font Weights
Light (300) Regular (400) Semibold (600) Bold (700) Extrabold (800)

📐 Spacing (8 tokens)

Space Tokens
--space-1: 0.25rem --space-2: 0.5rem --space-3: 0.75rem --space-4: 1rem --space-5: 1.5rem --space-6: 2rem --space-8: 3rem
Visual Demo
space-1
space-2
space-3
space-4

🔘 Buttons (5 variants × 3 sizes)

Variants Default
Sizes
States
With Icons

✏️ Inputs (4 types)

Text Input
Please enter a valid email address
Select & Textarea

🏷️ Badges (6 variants)

Status Badges
Активен В работе Критично Инфо Скоро AI
Card Badges
Live
Beta
AI

📇 Portal Cards (interactive)

Live
Насос ЦНС-180
Центробежный, 180 м³/ч
Beta
Компрессор 6К-100
Поршневой, 100 атм
AI
Теплообменник ТТ-40
Кожухотрубный, 40 м²

💬 Toast & Modal

Toast
Modal

Нажмите для демонстрации

🧭 Breadcrumbs

EAM Portal / ТОиР / Активы

📑 Tabs

📄 Pagination

📭 Empty State

Активы не добавлены

Нажмите «Добавить» чтобы создать первый актив, или импортируйте данные из Excel.

🦴 Skeleton Loading

📊 Table with Selection

Инв. № Название Тип Статус Действия
INV-1024 Насос ЦНС-180 Оборудование Активен
INV-2048 Компрессор 6К-100 Оборудование На ТО
INV-3072 Теплообменник ТТ-40 Оборудование Критично

📐 Layout Examples

Sidebar + Main
Grid Cards