NavyStackLegacy format

A deep-navy industrial dashboard design system built for equipment lifecycle management platforms. Rooted in command console aesthetics, it uses a dark sidebar (220px) and compact header (60px) with electric-cyan (`#00D4FF`) for interactive emphasis

Primary Cyan (#00D4FF
Text Secondary (#94A3B8
Card Hover (#161D48
Background (#0A0E27
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

kpiValue-apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif · 26px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

unitLabel-apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif · 14px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

pageHeading-apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif · 14–18px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

bodyText-apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif · 12–13px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

labelText-apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif · 11px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Spacing

Base: 4px
4px
14px
16px
18px
20px
24px

A deep-navy industrial dashboard design system built for equipment lifecycle management platforms. Rooted in command console aesthetics, it uses a dark sidebar (220px) and compact header (60px) with electric-cyan (`#00D4FF`) for interactive emphasis

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Card Title

Sample body text for the card component.

Inputs

status-dot

inline

table

header

bodyCell

idColumn

tab

active

Do's & Don'ts

Do

Use deep navy three-tone hierarchy (#0A0E27 → #111638 → #0D1333) for depth over shadows
Let cyan drive all interactive emphasis (active states, focus rings, data lines, primary buttons)
Use system font stack for instant load time and native rendering

Don't

Introduce additional saturated brand colors beyond cyan/purple/green/yellow/red
Use pure white for text (#FFFFFF is maximum brightness)
Add heavy box-shadows (use color hierarchy and subtle glow instead)
Increase card radius beyond 8px
Use pastel or light backgrounds (dark-mode-first for monitoring)
Use decorative fonts or spacing tricks
Place multiple filled cyan buttons in the same section
Layout

The system uses a classic app-shell layout designed for desktop (1200px+ recommended).

• Sidebar: 220px fixed width, #0D1333 background, right border 1px solid #1E2756. Contains logo area (with gradient icon), collapsible navigation tree, and scrolls independently.

• Header: 60px height, #0D1333 background, bottom border. Contains breadcrumb navigation (left), global search + notifications + user avatar (right).

• Content: Flex-1 scrollable area with 20px 24px padding.

### Content Grids

• KPI row: grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) with 16px gap.

• Chart row: Two equal columns (1fr 1fr) with 16px gap.

• Info grid: repeat(auto-fit, minmax(240px, 1fr)) with 12px gap.

• Video grid: Two equal columns with 12px gap and 16/10 aspect ratio.
Download .md
0wa0er 0wa0er @0wa0er
License MIT
Uploaded yesterday
Version v1
File size 8.3 KB
Downloads 4
Copies 2
dark dashboard enterprise industrial professional

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/0wa0er/navystack and implement it in my code

Don't have the MCP? Install it here