Design system
web
v1.0.0
90/100

Dashboard Operations Dark

@dante · Dashboard

Dark modular operations system for analytics, incident response, monitoring, finance, security, and live operational dashboards, adapted from Open Design dashboard.

HTML/CSS
React
shadcn/ui
Tailwind
#analytics
#dark-mode
#dashboard
#ops
Dashboard Operations Dark
Downloads5
Download package
DESIGN.mdSKILL.md

Overview

Principles

  • Prioritize operational clarity: status, severity, recency, trend, owner, and next action.
  • Use dark surfaces to reduce dashboard glare, but keep contrast measurable and labels readable.
  • Reserve blue for navigation/primary commands and green for healthy/success signals.
  • Every chart, table, and feed needs loading, empty, stale, error, and degraded states.
  • Keep the interface dense, aligned, and scannable; avoid decorative dashboard chrome.

Preview

Open in new tab ↗

Derived view rendered server-side from package tokens and components — no authored copy.

Colors (25)

background
#09090B
foreground
#FAFAFA
card
#111827
cardForeground
#FAFAFA
popover
#111827
popoverForeground
#FAFAFA
primary
#0C5CAB
primaryForeground
#FFFFFF
secondary
#172033
secondaryForeground
#DDE7F3
muted
#18181B
mutedForeground
#A1A1AA
accent
#10B981
accentForeground
#04130D
destructive
#EF4444
destructiveForeground
#FFFFFF
border
#27272A
input
#3F3F46
ring
#0C5CAB
success
#10B981
warning
#F59E0B
info
#38BDF8
badgeBg
#0B2F24
badgeText
#7DD3A9
alertBg
#101827

Typography (7)

display
IBM Plex Sans, Inter, system-ui, sans-serif
  • 48pxThe quick brown fox jumps over the lazy dog 1234
  • 32pxThe quick brown fox jumps over the lazy dog 1234
  • 24pxThe quick brown fox jumps over the lazy dog 1234
  • 18pxThe quick brown fox jumps over the lazy dog 1234
  • 14pxThe quick brown fox jumps over the lazy dog 1234
  • 12pxThe quick brown fox jumps over the lazy dog 1234
heading
IBM Plex Sans, Inter, system-ui, sans-serif
  • 48pxThe quick brown fox jumps over the lazy dog 1234
  • 32pxThe quick brown fox jumps over the lazy dog 1234
  • 24pxThe quick brown fox jumps over the lazy dog 1234
  • 18pxThe quick brown fox jumps over the lazy dog 1234
  • 14pxThe quick brown fox jumps over the lazy dog 1234
  • 12pxThe quick brown fox jumps over the lazy dog 1234
body
IBM Plex Sans, Inter, system-ui, sans-serif
  • 48pxThe quick brown fox jumps over the lazy dog 1234
  • 32pxThe quick brown fox jumps over the lazy dog 1234
  • 24pxThe quick brown fox jumps over the lazy dog 1234
  • 18pxThe quick brown fox jumps over the lazy dog 1234
  • 14pxThe quick brown fox jumps over the lazy dog 1234
  • 12pxThe quick brown fox jumps over the lazy dog 1234
label
IBM Plex Sans, Inter, system-ui, sans-serif
  • 48pxThe quick brown fox jumps over the lazy dog 1234
  • 32pxThe quick brown fox jumps over the lazy dog 1234
  • 24pxThe quick brown fox jumps over the lazy dog 1234
  • 18pxThe quick brown fox jumps over the lazy dog 1234
  • 14pxThe quick brown fox jumps over the lazy dog 1234
  • 12pxThe quick brown fox jumps over the lazy dog 1234
caption
IBM Plex Sans, Inter, system-ui, sans-serif
  • 48pxThe quick brown fox jumps over the lazy dog 1234
  • 32pxThe quick brown fox jumps over the lazy dog 1234
  • 24pxThe quick brown fox jumps over the lazy dog 1234
  • 18pxThe quick brown fox jumps over the lazy dog 1234
  • 14pxThe quick brown fox jumps over the lazy dog 1234
  • 12pxThe quick brown fox jumps over the lazy dog 1234
mono
IBM Plex Mono, JetBrains Mono, ui-monospace, monospace
  • 48pxThe quick brown fox jumps over the lazy dog 1234
  • 32pxThe quick brown fox jumps over the lazy dog 1234
  • 24pxThe quick brown fox jumps over the lazy dog 1234
  • 18pxThe quick brown fox jumps over the lazy dog 1234
  • 14pxThe quick brown fox jumps over the lazy dog 1234
  • 12pxThe quick brown fox jumps over the lazy dog 1234
scale
unparsed
{
  "h1": "28px/1.15",
  "h2": "22px/1.2",
  "h3": "16px/1.35",
  "body": "14px/1.55",
  "caption": "12px/1.45"
}

Components (15)

Button

Operational dashboard component for clear command actions.

shadcn
shadcn/ui + Tailwind CSS
2 props · 6 states · 18 tags · 5 sources

Input

Operational dashboard component for single-line fields.

shadcn
shadcn/ui + Tailwind CSS
2 props · 5 states · 16 tags · 4 sources

Textarea

Operational dashboard component for long-form input.

shadcn
shadcn/ui + Tailwind CSS
1 props · 5 states · 13 tags · 4 sources

Select

Operational dashboard component for bounded choices.

shadcn
Radix Select + Tailwind CSS
1 props · 6 states · 13 tags · 4 sources

Checkbox

Operational dashboard component for independent options.

shadcn
Radix Checkbox + Tailwind CSS
1 props · 7 states · 11 tags · 4 sources

RadioGroup

Operational dashboard component for exclusive choices.

shadcn
Radix Radio Group + Tailwind CSS
1 props · 6 states · 9 tags · 4 sources

Switch

Operational dashboard component for immediate preferences.

shadcn
Radix Switch + Tailwind CSS
1 props · 5 states · 10 tags · 4 sources
Missing states: error

Card

Operational dashboard component for repeated content groups.

shadcn
shadcn/ui + Tailwind CSS
1 props · 6 states · 14 tags · 4 sources

Dialog

Operational dashboard component for focused blocking decisions.

shadcn
Radix Dialog + Tailwind CSS
1 props · 4 states · 13 tags · 4 sources
Missing states: default, hover, focus-visible, disabled

DropdownMenu

Operational dashboard component for secondary contextual actions.

shadcn
Radix Dropdown Menu + Tailwind CSS
1 props · 5 states · 13 tags · 4 sources
Missing states: default

Tabs

Operational dashboard component for peer views in one context.

shadcn
Radix Tabs + Tailwind CSS
1 props · 5 states · 11 tags · 4 sources

Table

Operational dashboard component for structured records.

shadcn
HTML table + Tailwind CSS
1 props · 7 states · 14 tags · 4 sources
Missing states: disabled

Badge

Operational dashboard component for compact metadata.

shadcn
shadcn/ui + Tailwind CSS
1 props · 4 states · 18 tags · 4 sources

Alert

Operational dashboard component for inline status and validation.

shadcn
shadcn/ui + Tailwind CSS
1 props · 3 states · 13 tags · 4 sources
Missing states: hover, disabled

Toast

Operational dashboard component for non-blocking feedback.

shadcn
Sonner or shadcn Toast + Tailwind CSS
1 props · 3 states · 12 tags · 4 sources
Missing states: default, hover, focus-visible, disabled

DESIGN.md

Principles

  • Prioritize operational clarity: status, severity, recency, trend, owner, and next action.
  • Use dark surfaces to reduce dashboard glare, but keep contrast measurable and labels readable.
  • Reserve blue for navigation/primary commands and green for healthy/success signals.
  • Every chart, table, and feed needs loading, empty, stale, error, and degraded states.
  • Keep the interface dense, aligned, and scannable; avoid decorative dashboard chrome.

Adapters (6)

  • adapters/tokens.css

    text/css

    Download
  • adapters/shadcn-registry.json

    application/json

    Download
  • adapters/tailwind.config.js

    text/javascript

    Download
  • adapters/react/index.ts

    text/typescript

    Download
  • adapters/html/index.html

    text/html

    Download
  • adapters/html/styles.css

    text/css

    Download

All files (11)

  • DESIGN.mdtext/markdown
  • SKILL.mdtext/markdown
  • tokens/colors.jsonapplication/json
  • tokens/typography.jsonapplication/json
  • tokens/components.jsonapplication/json
  • adapters/tokens.csstext/css
  • adapters/shadcn-registry.jsonapplication/json
  • adapters/tailwind.config.jstext/javascript
  • adapters/react/index.tstext/typescript
  • adapters/html/index.htmltext/html
  • adapters/html/styles.csstext/css

Versions