Telemetry DarkPhase 1 · Visual foundation

Sumio Design System

A live reference for the colors, typography, and core building blocks that every Sumio page is made of. If it looks right here, it will look right everywhere.

Color

Defined once as CSS variables, used everywhere through Tailwind utilities.

Core surfaces

Background
Obsidian Space
#0A0B0E
Surface
Slate Shield
#12141C
Surface Raised
elevated
#171A24
Border
Neural Gray
#1E2230
Border Strong
emphasized
#2A2F40

Text

Text Primary
#E6E9F0
Text Secondary
#A0A6B8
Text Muted
#6B7280

Quantum Cyan accent

Accent Gradient
#00F2FE → #4FACFE
Accent From
#00F2FE
Accent To
#4FACFE
Accent Solid
#22D3EE

Semantic states

Success
Emerald Light
#05C46B
Warning
Ion Amber
#FFC048
Error
Proton Red
#FF5E57
Info
#4FACFE

Data-type tints

Text
#8B93A7
Number
#4FACFE
Date
#A78BFA
Boolean
#05C46B
Currency
#FFC048

Typography

Geist Sans for the interface, JetBrains Mono for data and formulas.

Talk to your data
Display · 3rem / 700
Heading One
H1 · 2rem / 600
Heading Two
H2 · 1.5rem / 600
Heading Three
H3 · 1.25rem / 600
Body large — the quick brown fox jumps over the lazy dog.
Body-lg · 1.125rem / 400
Body — the quick brown fox jumps over the lazy dog.
Body · 1rem / 400
Body small — the quick brown fox jumps over the lazy dog.
Body-sm · 0.875rem / 400
Caption label · metadata
Caption · 0.75rem / 500 · uppercase
=ROUND(B2*C2, 2)
Mono · 0.875rem · formulas & plans

Buttons

Five variants. Hover, focus (tab), and active (press) states are interactive — try them.

DefaultDisabledLoading
Primary
Secondary
Ghost
Destructive
Success

Inputs

Click into the command box and you'll see the cyan focus ring breathe (it stays still if you've asked for reduced motion).

Sort Revenue ▾Filter North regionFind duplicates on Email
Processing state
Brain is thinking…

Metric cards

Big tabular figures with trend delta badges.

Files Processed Today
24
+8vs yesterday
Operations Executed
142
+23%this week
Time Saved
128hrs
+12%cumulative
Rows after cleanup
284,807 → 2,940
−281,867duplicate rows removed

Data-type chips

Shown on every column header so the inferred type is obvious at a glance.

TextNumberDateBooleanCurrency
Customer
Text
Revenue
Currency
Order Date
Date
Active
Boolean
Acme Co.
₹1,20,400
2026-03-14
TRUE
Globex
₹84,250
2026-04-02
FALSE

Confidence meter

How sure the AI is about its interpretation — green high, amber medium, red low.

Clear instruction98%
Slightly vague72%
Ambiguous column45%
AI interpretation
You asked: “find fraud transactions”

I'm reading this as Filter Class = 1.

Confidence94%