Component Library
ASGUARD IDE Unified Design System — Canonical Components & Tokens
01. Color Palette (Design Tokens)
breeze-bg
#232629
breeze-paper
#31363b
breeze-text
#eff0f1
breeze-dim
#7f8c8d
asguard-orange
#f7992b
asguard-blue
#3daee9
status-ok
#2dd36f
status-error
#ff4961
status-warn
#ffc409
border-color
#4d5052
02. Typography Scale
Hero (Montserrat 900, 42px)
Dashboard
Heading (Fira Code 12px uppercase)
Section Title
Body (Roboto 14px)
This is regular body text used for content and descriptions. It maintains readability with line-height 1.6.
Mono Data (Fira Code 11px)
192.168.1.1 | 42.123ms | 8.4GB
Label (Fira Code 9px uppercase)
CPU USAGE
03. Status Badges
online
active
healthy
offline
error
critical
degraded
warning
maintenance
info
pending
processing
active
healthy
offline
error
critical
degraded
warning
maintenance
info
pending
processing
04. KPI Cards (Grid Component)
45px-aligned metric cards with orange accent bar
uptime
285d
cpu used
42%
memory
7.3gb
requests/s
1.2k
05. Progress Indicators
Orange → Blue gradient with smooth transitions
CPU Usage (42%)
Memory (75%)
Disk Space (57%)
06. Panel / Card Component
Primary container with orange left accent border
section header
This is content inside a canonical panel component. Features:
- Orange left accent border (2px)
- Sharp corners (no border-radius)
- Subtle shadow (box-shadow)
- Paper background color (#31363b)
- 1px dark border on all edges
07. Buttons
08. Motion: Chat Beam (Simplified)
Orange pulse glow — used for status indicators and live states
Live • Broadcasting
09. Table Component
Monospace 11px with minimal borders and hover states
| endpoint | method | status | latency |
|---|---|---|---|
| /api/dashboard | GET | 200 | 42ms |
| /wp-json/posts | GET | 200 | 38ms |
| /api/status | POST | 429 | 1523ms |
| /theme/assets | GET | 500 | 2840ms |
10. Geometry & Spacing (45px Master Grid)
| element | size | usage |
|---|---|---|
| —bar-h | 45px | Top bar / Nav height / Status bar |
| —sidebar-w | 45px | Left sidebar / Nav rail width |
| —spacing-base | 15px | Padding / Margins (primary) |
| —spacing-sm | 10px | Gap between grid items |
| —spacing-xs | 6px | Table cells / Fine-tuning |
11. Implementation Notes
/* Apply to all dashboard & widget projects */
1. Import CSS variables as root tokens
2. Use .panel for all containers
3. Use .kpi-grid + .kpi-item for metrics
4. Use .badge { &.ok, &.error, &.warn } for statuses
5. Use .progress-bar for gauges
6. Maintain 45px rhythm for layout
7. Support mobile: sidebar 45px fixed, content offset
8. Safe-area-inset-bottom for notch support
9. Dark-only theme (breeze-bg as base)
10. Animation: 0.3s transitions, optional beam pulse