PulseMetrics / Design System

Data that
hits different.

A high-density analytics design system built for teams that live in dashboards. Electric cyan, monospace data typography, and neon signals that make every number impossible to ignore.

Space Grotesk JetBrains Mono Cyan #22D3EE Dark Default Data-Heavy
Color Tokens
Electric neon palette — each color maps to a data signal type.
Primary Accent
accent
—
accent-hover
—
accent-dim
alpha
Neon Data Palette
neon-green
positive
neon-pink
series B
neon-orange
warning
neon-purple
trending
Surfaces
bg-base
deep dark
bg-surface
cards
bg-elevated
raised
text-primary
icy blue-white
Typography
Space Grotesk for UI — JetBrains Mono for all data values.
display / 38px / 700
1.2B events
h1 / 28px / 700
Real-Time Dashboard
h2 / 22px / 600
User Retention Funnel
h3 / 17px / 600
Session Distribution
body / 14px / 400
Track every event, cohort, and conversion path across your entire product surface. Real-time streams update every 500ms with sub-second latency.
data / 13px mono
p95_latency: 48ms · throughput: 24,891 req/s · error_rate: 0.04%
caption / mono
SESSION_ID: a3f92b · TIMESTAMP: 2025-03-20T22:14:08Z
Buttons
High-contrast actions for data-dense interfaces.
Primary
Secondary & Ghost
Neon Actions
Status Badges
System and data stream status indicators.
Live Alert Anomaly Trending ↑ Paused
Form Inputs
Query builder, filter, and configuration components.
⚡
🔍
// Supports BigQuery, Redshift, Snowflake, and ClickHouse dialects
KPI Cards
Data-forward metric cards with sparkline bars and progress fills.
DAU👥
84,291 users
↑ 14.2% vs last week
Conversion🎯
3.84%
↑ 0.4pp vs last month
P95 Latency⚡
48ms
↓ 12ms vs SLA 200ms
Error Rate🚨
0.04%
↓ 0.02pp vs yesterday
Charts
Multi-series bar chart with neon color palette.
Weekly Active Users by Platform
Web
Mobile
API
MonTueWedThuFriSatSun
Metric Tickers
Compact real-time signal cards for system health dashboards.
📡
Throughput
24,891 rps
↑ healthy
🔋
Uptime
99.97%
↑ 30-day avg
🌡
Queue Depth
1,204 jobs
⚠ elevated
Events Table
High-density data table — monospace values, color-coded deltas.
Event Count (7d) Unique Users Δ vs Prior Avg / User Status
page_view
web · all pages		 4,812,004 84,291 +14.2% 57.1 Live
cta_click
pricing · hero		 128,440 44,820 +8.7% 2.9 Trending ↑
checkout_start
e-commerce funnel		 18,204 12,391 -2.4% 1.5 Alert
api_error
gateway · timeout		 8,102 2,840 +44.1% 2.9 Anomaly
subscription
pro · annual		 892 892 +22.0% 1.0 Live
PulseAI
Natural language querying over your entire data warehouse.
📡
PulseAI Analyst
Connected — Streaming
GPT-4.1
I've detected an anomaly in api_error events — up 44.1% over the past 48 hours. The spike correlates with the v2.4.1 deployment at 2025-03-18 14:32Z. P95 latency on the auth endpoint jumped from 48ms to 312ms. Recommend rollback or hotfix.
PulseAI · 22:14:08
Show me the top 5 events driving the spike and suggest a root cause.
analyst@co · 22:14:41
Top contributors: auth_token_refresh (+180%), session_validate (+92%), api_rate_limit (+68%). Root cause likely: JWT expiry bug introduced in v2.4.1 — token refresh loop on mobile clients. Affected ~2,840 users. Fix: revert JWT_EXPIRY_SECONDS to 3600.
PulseAI · 22:14:42
Theme Compare
Dark mode built for NOC screens — light mode for executive reports.
🌙 Dark Mode (Default)
--bg-base: #020610
--accent: #22D3EE
--text: #E2F0FF
Font: Space Grotesk
☀️ Light Mode
--bg-base: #F0F5FF
--accent: #0891B2
--text: #060F2A
Font: Space Grotesk
CSS Token Export
Complete PulseMetrics design token set.
/* PulseMetrics Design System v1.0 — Dark Theme */
/* Backgrounds */
--bg-base: #020610;
--bg-surface: #060D1F;
--bg-elevated: #0C1530;

/* Accent — Electric Cyan */
--accent: #22D3EE;
--accent-hover: #67E8F9;
--accent-dim: rgba(34,211,238,0.10);

/* Neon Palette */
--neon-green: #4ADE80;
--neon-pink: #F472B6;
--neon-orange: #FB923C;
--neon-purple: #A78BFA;

/* Typography */
--font-ui: 'Space Grotesk';
--font-data: 'JetBrains Mono';
PULSEMETRICS DESIGN SYSTEM v1.0 · STUDIOFLOW.TOP · BUILT WITH ❤ BY APTOCODE