Command CenterLegacy format

Evreghen Command Center is a security operations interface that deliberately splits its personality into two layers. The workspace itself is light, warm, and document-like: an off-white canvas, neutral cards, restrained borders, and dense operational content. Around that workspace sits a darker application shell with a frosted-glass feel: black panels at 70% opacity, soft blur, thin white borders, and white navigation text. The product should feel like a modern SOC dashboard that borrows a little from premium automotive or command-console UI without becoming futuristic chrome.

Primary Orange#FE6E00
Focus Orange#F97015
Background#FCFAF7
Surface#F3F4F6
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Colors

Status Badge Colors

Typography

Primaryui-sans-serif, system-ui, sans-serif · 16px · Regular

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

Monospaceui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace · 16px · Regular

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

Display HeroPrimary · 6rem · SemiBold

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

Headline XLPrimary · 2rem · Bold

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

Headline LGPrimary · 1.5rem · Bold

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

Title MDPrimary · 1.125rem · Bold

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

Body LGPrimary · 1rem · Regular

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

Body MDPrimary · 0.875rem · Regular

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

Body SMPrimary · 0.8125rem · Bold

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

Label MDPrimary · 0.875rem · Medium

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

Label SMPrimary · 0.75rem · SemiBold

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

Code SMMonospace · 0.875rem · 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
8px
12px
16px
24px
32px
40px
64px

Evreghen Command Center is a security operations interface that deliberately splits its personality into two layers. The workspace itself is light, warm, and document-like: an off-white canvas, neutral cards, restrained borders, and dense operational content. Around that workspace sits a darker application shell with a frosted-glass feel: black panels at 70% opacity, soft blur, thin white borders, and white navigation text. The product should feel like a modern SOC dashboard that borrows a little from premium automotive or command-console UI without becoming futuristic chrome.

Components

Buttons

Inputs

Cards

Card Title

Sample body text for the card component.

StatusBadge

Metric Card

Shell

Sidebar

Header

Onboarding/Login

Default

Elevation & Depth

Shell
Subtle
Raised
Dialog

Do's & Don'ts

Do

keep the primary experience light, warm, and operational
use the dark frosted shell as a framing device around the workspace
let orange drive action, hover, focus, telemetry, and brand emphasis
preserve compact system-sans typography and restrained spacing
use white or translucent white inside the shell rather than warm gray text
keep analytical cards quiet so charts, labels, and findings can stand out

Don't

replace the warm neutrals with pure white and cool grays
introduce additional saturated brand colors beyond orange and semantic status palette
turn the entire product into a dark dashboard — only the chrome should feel like dark glass
make every card solid orange, heavily tinted, or dramatically shadowed
swap in trendy geometric or editorial fonts — the system should remain practical and native-feeling
Download .md

License MIT
Uploaded 1 weeks ago
Version v1
File size 6.6 KB
Downloads 20
Copies 3

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/marcosronei/command-center and implement it in my code

Don't have the MCP? Install it here