Design System Inspired by Planetfall

1. Visual Theme & Atmosphere

Planetfall is a global latency monitoring platform. Indigo on deep black surfaces creates a premium monitoring dashboard aesthetic — technical and precise. Every design decision optimises for at-a-glance comprehension of latency data across dozens of regions.

Key Characteristics:

• Indigo accent on near-black surfaces
• Data-density first — big numbers, small labels
• Status colors as a first-class design element
• Inter for technical clarity at small sizes

2. Color Palette & Roles

Primary

• Indigo (#6366F1): CTAs, active states, chart primary
• Indigo Hover (#4F46E5): Hover state

Accent Colors

• Cyan (#06B6D4): Secondary chart series, links

Neutral Scale

• Text Primary (#F4F4F5): Headings, body
• Text Secondary (#A1A1AA): Labels, metadata
• Text Muted (#71717A): Placeholders, disabled

Surface & Borders

• Background (#09090B): App background
• Surface (#18181B): Cards, panels
• Surface Raised (#27272A): Input fields
• Border (#3F3F46): Dividers

Semantic / Status

• Fast (#22C55E): <200ms latency
• Moderate (#F59E0B): 200–500ms
• Slow (#EF4444): >500ms
• Down (#7F1D1D): Unreachable

3. Typography Rules

Font Family

Primary: Inter, fallback: system-ui, sans-serif. Mono: JetBrains Mono

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Display	Inter	36px	700	1.1	-0.01em	Hero metrics
H1	Inter	28px	700	1.2	0	Dashboard title
H2	Inter	20px	600	1.3	0	Section headings
H3	Inter	16px	600	1.4	0	Card titles
Body	Inter	14px	400	1.6	0	UI body
Metric	Inter	40px	700	1	-0.02em	KPI numbers
Code	JetBrains Mono	13px	400	1.6	0	Region codes

Principles

• Large metric numbers are the hero — make them bold and prominent
• Labels beneath metrics are 12px/400 — never compete with the number

4. Component Stylings

Buttons

• Primary: bg #6366F1, text #FFFFFF, padding 9px 18px, radius 6px, font 14px/600
• Secondary: bg transparent, border 1px solid #3F3F46, text #F4F4F5
• Ghost: bg transparent, text #A1A1AA, hover text #F4F4F5

Cards & Containers

• bg #18181B, border 1px solid #3F3F46, radius 8px, padding 20px

Inputs & Forms

• bg #27272A, border 1px solid #3F3F46, radius 6px, padding 9px 14px, text #F4F4F5
• Focus: border #6366F1

Navigation

• Left sidebar #09090B, 240px, border-right #18181B
• Top nav #09090B, 56px

5. Layout Principles

Spacing System

• 4px — Metric label gap
• 8px — Status dot + label
• 12px — Card internal padding
• 16px — Card padding
• 20px — Widget content
• 24px — Section gaps
• 32px — Dashboard row gaps
• 48px — Page sections

Grid & Container

• Dashboard: fluid 12-column grid. Widgets: 3-column default, resizable.

Whitespace Philosophy

Monitoring UIs need visual breathing room between metric tiles — never crowd them.

Border Radius Scale

• None (0px): Status bars, sparklines
• Sm (4px): Status badges, tags
• Md (6px): Buttons, inputs
• Lg (8px): Cards, widgets
• Full (9999px): Status dots, ping indicators

6. Depth & Elevation

Level	Treatment	Use
Flat	none	Background
Raised	0 0 0 1px rgba(255,255,255,0.06)	Cards
Overlay	0 4px 20px rgba(0,0,0,0.6)	Dropdowns
Modal	0 8px 40px rgba(0,0,0,0.7)	Dialogs

7. Do's and Don'ts

Do

• Use the 3-tier latency color system consistently: green/amber/red
• Show P50 and P95 side by side — never just average
• Animate the globe and status dots with subtle pulse effects

Don't

• Don't use indigo for latency status colors — it's the interactive color
• Don't show raw timestamps without relative time (e.g. "2 min ago")
• Don't exceed 5 chart series without a toggle

8. Responsive Behavior

Breakpoints

Name	Width	Key Changes
Mobile	0–767px	Single column, key metrics only
Tablet	768–1023px	2-column grid, collapsed nav
Desktop	1024px+	Full dashboard, sidebar

Touch Targets

Minimum 44×44px. Globe region tap targets are at least 48×48px.

Collapsing Strategy

Sidebar collapses to icon rail. Widget grid stacks to single column.

9. Agent Prompt Guide

Quick Color Reference

• CTA / Active: Indigo (#6366F1)
• Background: Near-black (#09090B)
• Surface: Dark gray (#18181B)
• Text: Light (#F4F4F5)
• Fast (<200ms): Green (#22C55E)
• Moderate: Amber (#F59E0B)
• Slow/error: Red (#EF4444)

Iteration Guide

1. Latency status uses 3 fixed colors — never deviate for consistency
2. Metric numbers are 40px+ bold — they're the primary visual element
3. Borders on dark are very subtle: rgba(255,255,255,0.06)
4. Globe dots use the 3-tier color system directly
5. Always show percentile context next to latency numbers