Book a call
◂ All design systems

// DS_01 · KINETIK STUDIO

Midnight Pro.

Dark only. Gray plus one single cyan accent. Interfaces that feel like the control panel of a live system.

PRODUCT
kinetik-site and the internal AI Command Center panel
SOURCE OF TRUTH
Figma file Kinetik Studio Design System, page Color
STATUS
One generation, the most mature of the three. Full ramps, complete semantic layer.
13semantic tokens
1accent, no exceptions
3typographic roles
5named components

01 How it was built

Replay the construction of the system step by step. Tokens light up in the order they were created; audit findings and decisions appear where they happened.

BUILD 01/06 · tokens 0/13

Choose a world, not a theme

The deliberate call: a live system control panel instead of a generic SaaS dashboard. Every later token answers to that sentence.

[DECISION] Reject the generic dashboard look.

bg-basebg-surfacebg-raisedbg-overlaytext-primarytext-secondarytext-tertiaryaccent-defaultaccent-hoveraccent-mutedstate-successstate-warningstate-danger

02 How it connects

Every component traces back to a token and every token to an intent. Click a node to see what depends on it.

INTENTSEMANTIC TOKENSCOMPONENTSLive system panelSingle accentBusiness vocabularybg-basebg-raisedtext-tertiaryaccent-defaultstate-successstate-dangerStatus barStatus badgeConnection graphTerminalPrimary CTA
SEMANTIC TOKENS bg-base

Base background of the entire app.

2 connected nodes highlighted. Click any node to trace it.

03 Ask the system

An oracle that answers design questions from the system's own rules. Ask in English or Spanish, or paste any hex to find its token.

DS_01@oracle $

The oracle answers from the system's own rules, tokens and changelog. No guessing: every answer shows the chain it resolved through and a confidence label, the same rule the Launch Mobility guide uses for inferred values.

04 The vocabulary, alive

The named components of Midnight Pro running for real: status bar, section header, badges, connections and terminal.

KINETIK_OS v1.0 · STATUS: ONLINE · LATENCY 9ms · 00:00:00

// AGENTS_ONLINE · 004

[ACTIVE][ONLINE][ERROR]
  1. $ kinetik init --env=prod
  2. ✓ tokens loaded · 13 semantic
  3. ✓ agents online · 4
  4. ▸ watching pipelines…

05 Live accessibility audit

Every text token against every background token, WCAG 2.1 ratio computed on the spot.

24/28 pairs pass AA for body text · computed live in your browser

bg-base bg-surface bg-raised bg-overlay
text-primaryAa18.6 · AAAAa18.0 · AAAAa16.7 · AAAAa17.4 · AAA
text-secondaryAa6.1 · AAAa5.9 · AAAa5.5 · AAAa5.7 · AA
text-tertiaryAa3.0 · AA LGAa2.9 · FAILAa2.7 · FAILAa2.8 · FAIL
accent-defaultAa11.3 · AAAAa10.9 · AAAAa10.1 · AAAAa10.6 · AAA
state-successAa10.6 · AAAAa10.3 · AAAAa9.5 · AAAAa9.9 · AAA
state-warningAa12.2 · AAAAa11.8 · AAAAa11.0 · AAAAa11.4 · AAA
state-dangerAa7.4 · AAAAa7.1 · AAAAa6.6 · AAAa6.9 · AA

06 Specimen

Click any swatch to copy its value.

BACKGROUND
TEXT
ACCENT
STATE
SPACE GROTESK · Titles and headings

Systems that run your business.

JETBRAINS MONO · Status bar and system text

KINETIK_OS v1.0 · STATUS: ONLINE · LATENCY 9ms

INTER · Labels and UI

PROJECTS · CONNECTIONS · GRAY · CYAN

07 Rules

  1. One accent only. Cyan carries CTAs, focus and glow; nothing else competes with it.
  2. Dark only. There is no light theme to maintain, so every surface is tuned for one context.
  3. The interface speaks the business vocabulary: agents, digital workers, pipelines.
  4. System text is always mono. Status bars, readouts and badges never switch face.
  5. Section headers follow // NAME_SECTION, zero padded numbering.
  6. Connections glow cyan when active and fall back to dotted gray when idle.

08 Known gaps

  • Spacing, radii, shadow and motion values live in Figma and the internal guide, not on the public page.
  • Gray and cyan ramps are defined by step (950 to 50) but their hex values are not published yet.
NEXT_SYSTEMLaunch Mobility ▸
Book a call