디자인 시스템
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
다운로드5
패키지 JSON 다운로드
DESIGN.mdSKILL.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.

프리뷰

새 창으로 열기 ↗

패키지 안의 토큰·컴포넌트 정의로부터 순수하게 합성된 파생 뷰입니다 (편집 콘텐츠 없음).

색상 (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

타이포그래피 (7)

display
IBM Plex Sans, Inter, system-ui, sans-serif
  • 48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
heading
IBM Plex Sans, Inter, system-ui, sans-serif
  • 48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
body
IBM Plex Sans, Inter, system-ui, sans-serif
  • 48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
label
IBM Plex Sans, Inter, system-ui, sans-serif
  • 48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
caption
IBM Plex Sans, Inter, system-ui, sans-serif
  • 48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
mono
IBM Plex Mono, JetBrains Mono, ui-monospace, monospace
  • 48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
scale
unparsed
{
  "h1": "28px/1.15",
  "h2": "22px/1.2",
  "h3": "16px/1.35",
  "body": "14px/1.55",
  "caption": "12px/1.45"
}

컴포넌트 (15)

Button

Operational dashboard component for clear command actions.

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

Input

Operational dashboard component for single-line fields.

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

Textarea

Operational dashboard component for long-form input.

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

Select

Operational dashboard component for bounded choices.

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

Checkbox

Operational dashboard component for independent options.

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

RadioGroup

Operational dashboard component for exclusive choices.

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

Switch

Operational dashboard component for immediate preferences.

shadcn
Radix Switch + Tailwind CSS
1 props · 5 states · 10 tags · 4 소스
누락 상태: error

Card

Operational dashboard component for repeated content groups.

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

Dialog

Operational dashboard component for focused blocking decisions.

shadcn
Radix Dialog + Tailwind CSS
1 props · 4 states · 13 tags · 4 소스
누락 상태: 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 소스
누락 상태: default

Tabs

Operational dashboard component for peer views in one context.

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

Table

Operational dashboard component for structured records.

shadcn
HTML table + Tailwind CSS
1 props · 7 states · 14 tags · 4 소스
누락 상태: disabled

Badge

Operational dashboard component for compact metadata.

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

Alert

Operational dashboard component for inline status and validation.

shadcn
shadcn/ui + Tailwind CSS
1 props · 3 states · 13 tags · 4 소스
누락 상태: hover, disabled

Toast

Operational dashboard component for non-blocking feedback.

shadcn
Sonner or shadcn Toast + Tailwind CSS
1 props · 3 states · 12 tags · 4 소스
누락 상태: 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.

어댑터 (6)

전체 파일 (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

버전