Color Palette
--bg
#0d1117
--panel
#1a1f2e
--border
#1e2530
--text
#ffffff
--muted
#8892a4
--accent
#00d4aa
--amber
#f59e0b
--danger
#ef4444
--success
#22c55e
--warning
#fbbf24
--info
#60a5fa
--gray-dark
#6b7280
--gray-medium
#9ca3af
Typography
Barlow Condensed — Display & Headings

H1 — Page Title (28px / 700)

H2 — Section Title (22px / 700)

H3 — Subsection (16px / 600)

H4 — Minor Heading (14px / 600)

Nav Link Style (15px / 600)
Geist Mono — Body & Data

Body text at 12px — This is the default font for all content, table cells, form inputs, and button labels. Geist Mono is a monospace font that gives the ecosystem its technical, data-driven feel.

LABEL TEXT — 10px uppercase, letter-spacing 0.1em

Secondary text at 11px — used for captions, footnotes, and helper text.

Buttons
Variants
Sizes
States
Badges & Pills
Status Badges
Active Pending Error Complete Info Inactive
Priority Badges
P0 Critical P1 High P2 Medium P3 Low
Form Controls
Disabled Enabled
Data Tables
Sample Data Grid
ID Name Status Type Value Created
001 Alpha Module Active Premier $1,240.00 2026-04-01
002 Beta Service Pending WebTool $890.50 2026-04-02
003 Gamma Pipeline Error Premier $0.00 2026-04-03
004 Delta Utility Active WebTool $2,100.00 2026-04-04
005 Epsilon Agent Inactive Premier $450.00 2026-04-05
Cards & Stat Tiles
Total Apps
127
Active Users
1,842
Revenue
$24.5k
Errors (24h)
3
Uptime
99.97%
Deployments
48
Key-Value Detail Panel
App NameExample Blueprint
UUID00000000-0000-0000-0000-000000000001
StatusActive
TypePremier
Created2026-04-08T16:00:00Z
AuthorMelTuc
Domainexample.meltuc.com
Modals

Click to open example modals:

Toast Notifications

Click to trigger toast notifications:

Tabs

Tab content area — each tab would show different content. The active tab has a teal underline.

Slide-Out Panels

Panels slide in from either side. The user interacts with the content, then closes it to return. Great for forms, detail views, and single-page sub-apps.

Dialog Popups

Dialogs are focused overlays for confirmations, alerts, and quick user decisions. Unlike modals, they are compact and center-focused.

Charts & Data Visualization
Horizontal Bar Chart
WebTools
489
EVE Tools
258
AI Agents
142
Internal
86
Vertical Bar Chart — Monthly Revenue
$4.2k
Jan
$6.8k
Feb
$5.1k
Mar
$8.3k
Apr
$7.5k
May
$9.2k
Jun
$10k
Jul
$8.7k
Aug
Donut Chart
532
WebTools — 60%
EVE Tools — 25%
Other — 15%
Pie Chart
Compute — 36%
Storage — 25%
Network — 15%
Database — 15%
Other — 9%
Line Chart — Requests / Hour (24h)
3k 2k 1k 00 04 08 12 16 20
Requests
Errors
Stacked Bar Chart — Resource Allocation
Production
45%
30%
15%
10%
Staging
30%
25%
25%
20%
Development
20%
15%
40%
25%
Compute
Storage
Network
Other
Sparklines — Service Health
API Gateway
99.9%
Healthy
Database
94.2%
Degraded
Cache Layer
99.99%
Healthy
Worker Queue
87.1%
Alert
Area Chart — Memory Usage (GB)
12 8 4
Used
Allocated
Progress Bars
Build Progress 78%
Storage Used 62%
Error Rate 12%