MERIDIAN/ components
ButtonBadgeTextStatusPillCardKPI CardLog StreamDeploy TimelineService CardAuth FormsTabs & FiltersNotificationsUser MenuColor TokensSystem Pages

01 / Button

variant: primary | secondary | ghost
size: sm | md | lg
disabled state
Link: Sign InLink: Request Access
as Link (href prop)

02 / Badge

ICEGREENAMBERREDVIOLETSURFACE
variant: ice | green | amber | red | violet | surface
HEALTHYDEGRADEDDOWN+12.4%DEPLOYIDLE
in-context usage examples

03 / Text

bodyHealth check OK — all upstream services reachable (latency p50: 22ms)
captionLast updated 2 minutes ago
labelUPTIME (30D)
mono/api/v2/users/{id}
codebilling-webhook

04 / StatusPill

HealthyDegradedDownIdleInfo
status: ok | warn | err | idle | info (default labels)
OKWARNERRIDLEINFO
with custom label prop

05 / Card

Card with HeaderLIVE

Card body content. Compose CardHeader and CardBody freely inside Card for structured panels.

Service SummaryDegraded
Uptime97.2%
p99 latency214ms
Replicas8
Teammedia

06 / KPI Card

Total Requests+12.4%
4.71M
vs 4.19M yesterday
Avg. Latency (p99)+8ms
142ms
SLO threshold: 200ms
Error Rate-0.03%
0.18%
Budget remaining: 82%
Uptime (30d)Stable
99.97%
7.9min downtime this month

07 / Log Stream

Live Log Stream
2 errors1 warn
2025-03-09 06:41:23.441ERRbilling-webhookFATAL: uncaught exception in handler. TypeError: Cannot read properties of undefined (reading 'amount')
2025-03-09 06:41:18.002WRNmedia-encoderffmpeg process exceeded memory threshold (3.8GB / 4GB limit), throttling queue
2025-03-09 06:40:55.789INFapi-gatewayHealth check OK. All upstream services reachable (latency p50: 22ms)
2025-03-09 06:40:44.112DBGauth-serviceToken refresh for user:u_9fa3b2c1, expiry extended by 7200s
2025-03-09 06:40:31.334ERRbilling-webhookStripe webhook signature verification failed, request dropped

08 / Deploy Timeline

Recent Deployments
v2.41.3
a3f8c12
feat: add retry logic to billing webhook handler
J. Park · 06:32 UTC · production
SUCCESS
3m 24s
v2.41.4
9b2d441
fix: media-encoder memory leak in ffmpeg wrapper
CI/CD · 07:15 UTC · production
Running integration tests...
IN PROGRESS
v2.41.2
f71e890
perf: search index query optimizer pass 2
A. Chen · 03:47 UTC · production
SUCCESS
2m 58s

09 / Service Card

api-gateway
Go

Public-facing REST and GraphQL gateway with rate limiting and auth middleware.

Uptime
100%
p99
38ms
RPS
4.7k
Replicas
6
auth-service
Go

OAuth2 / JWT issuance, session management, RBAC enforcement.

Uptime
100%
p99
12ms
RPS
1.2k
Replicas
4
media-encoder
Python

Async video transcoding pipeline. Pulls from SQS, outputs to S3.

Uptime
97.2%
p99
214ms
RPS
387
Replicas
8

10 / Auth Forms

Standalone centered auth pages with MERIDIAN branding. Full form validation via Zod.

Sign InRequest AccessForgot Password

11 / Tabs & Filters

mdn-chart-tab — time range selector (used on Overview + Logs charts)
mdn-level-btn — log level filter with count badge (used on Logs page)
AllGETPOSTPUT
mdn-filter-chip — compact inline filter (used on Overview endpoints table)
Settings tab nav — bottom-border active indicator (used on Settings page)

12 / Notification Panel

Click the bell icon to open the notification panel. Used in the dashboard topbar.

13 / User Menu

Click the user block to open the user menu. Used in the sidebar footer.

14 / Color Tokens

#0b0e14
--color-mdn-bg
Background
#111520
--color-mdn-surface
Surface
#161c2d
--color-mdn-surface-2
Surface 2
#1c2238
--color-mdn-surface-3
Surface 3
#1e2640
--color-mdn-border
Border
#252d4a
--color-mdn-border-2
Border 2
#3d4a6a
--color-mdn-text-dim
Text Dim
#5a6585
--color-mdn-text-muted
Text Muted
#8892a8
--color-mdn-text-body
Text Body
#b0bbce
--color-mdn-text-label
Text Label
#c8d0e0
--color-mdn-text-primary
Text Primary
#e8edf5
--color-mdn-text-bright
Text Bright
#4fc3f7
--color-mdn-ice
Ice (Primary)
#00e5a0
--color-mdn-green
Green (Success)
#fbbf24
--color-mdn-amber
Amber (Warning)
#f43f5e
--color-mdn-red
Red (Error)
#a78bfa
--color-mdn-violet
Violet (Deploy)

15 / System Pages

Full-page system states. The 404 page is the Next.js not-found.tsx convention. The 500 page is the error.tsx client boundary.

404 Not Found500 ErrorSign InRequest AccessForgot Password