Command Center Brand Style Guide
← Color Fonts

Command Center

A security operations interface split into two layers: a light, warm, document-like workspace and a dark frosted shell around it (black at 70%, 12px blur, thin white borders). Orange carries action, telemetry, hover and focus. Focused and slightly premium, never neon.

Source: designmd.ai/frknaykc/command-center · by @frknaykc · MIT

Typography

Native system stack
Heading system
system-ui
Specimen · 600 · 48px · lh 1 · ls -0.025em (display-hero 6rem 600; headline-xl 2rem 700; headline-lg 1.5rem 700; title-md 1.125rem 700)
Body system
ui-sans-serif
body-lg 1rem / 1.5rem · body-md 0.875rem / 1.25rem · body-sm 0.8125rem 700 / 1rem
This is how body text feels at 18px when applied to a real paragraph block in an incident report.
Original: ui-sans-serif, system-ui, sans-serif / ui-monospace, SFMono-Regular, Menlo -> HTML: same native stacks, no webfont. The source asks for the browser default on purpose (practical, fast-loading) and forbids swapping in geometric or editorial fonts, so there is nothing to substitute. Labels · label-sm 0.75rem 600 · ls 0.05em.
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
01 02 03 04 05 06 07 08 09 0%

Colors

Light · orange band
Primary#FE6E00
Background#FCFAF7
On background#423D38
Shell base · 70%#000000

Background #FCFAF7 · Surface #F3F4F6 / #EDEBE9 / #FFFFFF · Text #423D38 / #797067 · Outline #E3E0DD / #D1D5DC · Accent #FE6E00 / #FF6B00 · Focus #F97015

Semantic success #00C758 · warning #EDB200 · danger #FB2C36 · info #3080FF. Dark mode #413830 / #4A423A / #FAFAF9 / #B9B3AC.

MockPlannedIn developmentIntegratedProduction ready

Overview

Shell + document
Container1400px · padding 32px
Shell header64px
Sidebar256px · collapsed 64px
LoginSplit halves: white map, orange panel

Components

Rebuilt from recipe
OverviewThreats
card-panel · 12px · 24px
Open findings
Sign in Production ready

Buttons

Primary + ghost shell
Primary
Primary#FE6E00 · text #FFFFFF · hover #FF6B00
Size / radius40px · padding 0 16px · 6px
Ghost shell40x40 · rgba(255,255,255,.7) · 8px
Typelabel-md 0.875rem 500

Spacing

4px rhythm
Module
Asset inventory
Sections step 24px apart, metric grids use 16px gaps and cards keep 24px inside. Moderate density, never cramped.
Add asset
Scale
xs 4sm 8md 12lg 16xl 242xl 323xl 404xl 64
Gaps · Card padding
grid gap 16pxsection 24pxcard 24pxcontainer 32px

Elevation & Depth

Glass shell · soft cards

Two strategies by layer: the shell uses blur plus transparency like dark glass over the workspace; cards use thin borders and quiet shadows; dialogs may go stronger. Chart fills use opacity instead of full saturation.

subtle
raised
dialog
Shell#000 at 0.70 · blur 12px
Shell border1px #FFFFFF at 0.10
Raised0 4px 12px rgba(0,0,0,.12)
Chart fill#FE6E00 at 0.60

Shapes

Softened, never bubbly

Base control radius 8px, tight controls and inputs 6px, cards 12px, pills and badges fully rounded. Chrome panels stay square at the macro level, with rounding reserved for the interactive elements inside.

xs 4pxsm 6pxmd 8pxlg 12pxpill 9999px
Primary radius8px controls · 6px buttons
Shell0px

Do's and Don'ts

Guardrails

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.
Keep compact system-sans typography and restrained spacing.
Use white or translucent white inside the shell, not warm gray text.
Keep analytical cards quiet so charts and findings stand out.

Don't

Don't replace the warm neutrals with pure white and cool grays.
Don't add saturated brand colors beyond orange and the status palette.
Don't turn the whole product into a dark dashboard; only the chrome is dark glass.
Don't make every card solid orange, heavily tinted or dramatically shadowed.
Don't swap in trendy geometric or editorial fonts.

Motion

Standard easing

Short, practical transitions on the standard curve. Hover the shell nav items or the primary button: the orange fill arrives in 150ms.

Durations150 · 200 · 300ms
Panel500ms
Easing standardcubic-bezier(0.4, 0, 0.2, 1)
Generated from DESIGN.md · design-md-styleguide · Command Center by @frknaykc (MIT)
06

Resources

copy & paste
Download DESIGN.md 
:root {
  --color-background: #fcfaf7;
  --color-on-background: #423d38;
  --color-surface: #f3f4f6;
  --color-surface-soft: #edebe9;
  --color-surface-elevated: #ffffff;
  --color-on-surface: #423d38;
  --color-on-surface-muted: #797067;
  --color-outline: #e3e0dd;
  --color-outline-strong: #d1d5dc;
  --color-primary: #fe6e00;
  --color-primary-strong: #ff6b00;
  --color-primary-warm: #ffb74d;
  --color-primary-focus: #f97015;
  --color-on-primary: #ffffff;
  --color-shell-base: #000000;
  --color-on-shell: #ffffff;
  --color-shell-border: #ffffff;
  --color-success: #00c758;
  --color-warning: #edb200;
  --color-danger: #fb2c36;
  --color-info: #3080ff;
  --color-status-mock-bg: #fef9c2;
  --color-status-mock-fg: #874b00;
  --color-status-planned-bg: #f3f4f6;
  --color-status-planned-fg: #364153;
  --color-status-development-bg: #dbeafe;
  --color-status-development-fg: #1447e6;
  --color-status-integrated-bg: #f3e8ff;
  --color-status-integrated-fg: #8200da;
  --color-status-production-bg: #dcfce7;
  --color-status-production-fg: #016630;
  --color-dark-background: #413830;
  --color-dark-surface: #4a423a;
  --color-dark-on-surface: #fafaf9;
  --color-dark-on-surface-muted: #b9b3ac;
  --font-display: "ui-sans-serif, system-ui, sans-serif";
  --font-body: "ui-sans-serif, system-ui, sans-serif";
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 9999px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-"2xl": 32px;
  --space-"3xl": 40px;
  --space-"4xl": 64px;
  --space-container-padding: 32px;
}
@theme {
  --color-background: #fcfaf7;
  --color-on-background: #423d38;
  --color-surface: #f3f4f6;
  --color-surface-soft: #edebe9;
  --color-surface-elevated: #ffffff;
  --color-on-surface: #423d38;
  --color-on-surface-muted: #797067;
  --color-outline: #e3e0dd;
  --color-outline-strong: #d1d5dc;
  --color-primary: #fe6e00;
  --color-primary-strong: #ff6b00;
  --color-primary-warm: #ffb74d;
  --color-primary-focus: #f97015;
  --color-on-primary: #ffffff;
  --color-shell-base: #000000;
  --color-on-shell: #ffffff;
  --color-shell-border: #ffffff;
  --color-success: #00c758;
  --color-warning: #edb200;
  --color-danger: #fb2c36;
  --color-info: #3080ff;
  --color-status-mock-bg: #fef9c2;
  --color-status-mock-fg: #874b00;
  --color-status-planned-bg: #f3f4f6;
  --color-status-planned-fg: #364153;
  --color-status-development-bg: #dbeafe;
  --color-status-development-fg: #1447e6;
  --color-status-integrated-bg: #f3e8ff;
  --color-status-integrated-fg: #8200da;
  --color-status-production-bg: #dcfce7;
  --color-status-production-fg: #016630;
  --color-dark-background: #413830;
  --color-dark-surface: #4a423a;
  --color-dark-on-surface: #fafaf9;
  --color-dark-on-surface-muted: #b9b3ac;
  --font-display: "ui-sans-serif, system-ui, sans-serif";
  --font-body: "ui-sans-serif, system-ui, sans-serif";
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 9999px;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;
  --spacing-"2xl": 32px;
  --spacing-"3xl": 40px;
  --spacing-"4xl": 64px;
  --spacing-container-padding: 32px;
}
{
  "colors": {
    "background": "#fcfaf7",
    "on-background": "#423d38",
    "surface": "#f3f4f6",
    "surface-soft": "#edebe9",
    "surface-elevated": "#ffffff",
    "on-surface": "#423d38",
    "on-surface-muted": "#797067",
    "outline": "#e3e0dd",
    "outline-strong": "#d1d5dc",
    "primary": "#fe6e00",
    "primary-strong": "#ff6b00",
    "primary-warm": "#ffb74d",
    "primary-focus": "#f97015",
    "on-primary": "#ffffff",
    "shell-base": "#000000",
    "on-shell": "#ffffff",
    "shell-border": "#ffffff",
    "success": "#00c758",
    "warning": "#edb200",
    "danger": "#fb2c36",
    "info": "#3080ff",
    "status-mock-bg": "#fef9c2",
    "status-mock-fg": "#874b00",
    "status-planned-bg": "#f3f4f6",
    "status-planned-fg": "#364153",
    "status-development-bg": "#dbeafe",
    "status-development-fg": "#1447e6",
    "status-integrated-bg": "#f3e8ff",
    "status-integrated-fg": "#8200da",
    "status-production-bg": "#dcfce7",
    "status-production-fg": "#016630",
    "dark-background": "#413830",
    "dark-surface": "#4a423a",
    "dark-on-surface": "#fafaf9",
    "dark-on-surface-muted": "#b9b3ac"
  },
  "typography": {
    "display-hero": {
      "fontFamily": "ui-sans-serif, system-ui, sans-serif",
      "fontSize": "6rem",
      "fontWeight": "600",
      "lineHeight": "1",
      "letterSpacing": "-0.025em"
    },
    "headline-xl": {
      "fontFamily": "ui-sans-serif, system-ui, sans-serif",
      "fontSize": "2rem",
      "fontWeight": "700",
      "lineHeight": "2.5rem",
      "letterSpacing": "-0.025em"
    },
    "headline-lg": {
      "fontFamily": "ui-sans-serif, system-ui, sans-serif",
      "fontSize": "1.5rem",
      "fontWeight": "700",
      "lineHeight": "2rem"
    },
    "title-md": {
      "fontFamily": "ui-sans-serif, system-ui, sans-serif",
      "fontSize": "1.125rem",
      "fontWeight": "700",
      "lineHeight": "1.75rem"
    },
    "body-lg": {
      "fontFamily": "ui-sans-serif, system-ui, sans-serif",
      "fontSize": "1rem",
      "fontWeight": "400",
      "lineHeight": "1.5rem"
    },
    "body-md": {
      "fontFamily": "ui-sans-serif, system-ui, sans-serif",
      "fontSize": "0.875rem",
      "fontWeight": "400",
      "lineHeight": "1.25rem"
    },
    "body-sm": {
      "fontFamily": "ui-sans-serif, system-ui, sans-serif",
      "fontSize": "0.8125rem",
      "fontWeight": "700",
      "lineHeight": "1rem"
    },
    "label-md": {
      "fontFamily": "ui-sans-serif, system-ui, sans-serif",
      "fontSize": "0.875rem",
      "fontWeight": "500",
      "lineHeight": "1.25rem"
    },
    "label-sm": {
      "fontFamily": "ui-sans-serif, system-ui, sans-serif",
      "fontSize": "0.75rem",
      "fontWeight": "600",
      "lineHeight": "1rem",
      "letterSpacing": "0.05em"
    },
    "code-sm": {
      "fontFamily": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
      "fontSize": "0.875rem",
      "fontWeight": "400",
      "lineHeight": "1.25rem"
    }
  },
  "rounded": {
    "xs": "4px",
    "sm": "6px",
    "md": "8px",
    "lg": "12px",
    "pill": "9999px"
  },
  "spacing": {
    "xs": "4px",
    "sm": "8px",
    "md": "12px",
    "lg": "16px",
    "xl": "24px",
    "\"2xl\"": "32px",
    "\"3xl\"": "40px",
    "\"4xl\"": "64px",
    "container-padding": "32px"
  }
}
---
version: alpha
name: "Command Center"
description: "Warm off-white security workspace with a dark frosted application shell and orange telemetry accents."
source: "https://designmd.ai/frknaykc/command-center"
author: "@frknaykc"
license: "MIT"
colors:
  background: "#fcfaf7"
  on-background: "#423d38"
  surface: "#f3f4f6"
  surface-soft: "#edebe9"
  surface-elevated: "#ffffff"
  on-surface: "#423d38"
  on-surface-muted: "#797067"
  outline: "#e3e0dd"
  outline-strong: "#d1d5dc"
  primary: "#fe6e00"
  primary-strong: "#ff6b00"
  primary-warm: "#ffb74d"
  primary-focus: "#f97015"
  on-primary: "#ffffff"
  shell-base: "#000000"
  on-shell: "#ffffff"
  shell-border: "#ffffff"
  success: "#00c758"
  warning: "#edb200"
  danger: "#fb2c36"
  info: "#3080ff"
  status-mock-bg: "#fef9c2"
  status-mock-fg: "#874b00"
  status-planned-bg: "#f3f4f6"
  status-planned-fg: "#364153"
  status-development-bg: "#dbeafe"
  status-development-fg: "#1447e6"
  status-integrated-bg: "#f3e8ff"
  status-integrated-fg: "#8200da"
  status-production-bg: "#dcfce7"
  status-production-fg: "#016630"
  dark-background: "#413830"
  dark-surface: "#4a423a"
  dark-on-surface: "#fafaf9"
  dark-on-surface-muted: "#b9b3ac"
typography:
  display-hero:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontSize: "6rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "-0.025em"
  headline-xl:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontSize: "2rem"
    fontWeight: 700
    lineHeight: "2.5rem"
    letterSpacing: "-0.025em"
  headline-lg:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontSize: "1.5rem"
    fontWeight: 700
    lineHeight: "2rem"
  title-md:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontSize: "1.125rem"
    fontWeight: 700
    lineHeight: "1.75rem"
  body-lg:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontSize: "1rem"
    fontWeight: 400
    lineHeight: "1.5rem"
  body-md:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontSize: "0.875rem"
    fontWeight: 400
    lineHeight: "1.25rem"
  body-sm:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontSize: "0.8125rem"
    fontWeight: 700
    lineHeight: "1rem"
  label-md:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontSize: "0.875rem"
    fontWeight: 500
    lineHeight: "1.25rem"
  label-sm:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: "1rem"
    letterSpacing: "0.05em"
  code-sm:
    fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace"
    fontSize: "0.875rem"
    fontWeight: 400
    lineHeight: "1.25rem"
rounded:
  xs: "4px"
  sm: "6px"
  md: "8px"
  lg: "12px"
  pill: "9999px"
spacing:
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  "2xl": "32px"
  "3xl": "40px"
  "4xl": "64px"
  container-padding: "32px"
layout:
  container-max: "1400px"
  shell-header-height: "64px"
  shell-sidebar-expanded: "256px"
  shell-sidebar-collapsed: "64px"
motion:
  fast: "150ms"
  normal: "200ms"
  slow: "300ms"
  panel: "500ms"
  easing-standard: "cubic-bezier(0.4, 0, 0.2, 1)"
elevation:
  shell-blur: "12px"
  shell-opacity: "0.70"
  shell-border-opacity: "0.10"
  chart-fill-opacity: "0.60"
shadows:
  subtle: "0 1px 3px rgba(0, 0, 0, 0.10), 0 1px 2px rgba(0, 0, 0, 0.06)"
  raised: "0 4px 12px rgba(0, 0, 0, 0.12)"
  dialog: "0 20px 25px rgba(0, 0, 0, 0.10), 0 8px 10px rgba(0, 0, 0, 0.04)"
components:
  shell-sidebar:
    backgroundColor: "rgba(0, 0, 0, 0.70)"
    textColor: "{colors.on-shell}"
    rounded: "0px"
    width: "{layout.shell-sidebar-expanded}"
    padding: "{spacing.lg}"
  shell-header:
    backgroundColor: "rgba(0, 0, 0, 0.70)"
    textColor: "{colors.on-shell}"
    rounded: "0px"
    height: "{layout.shell-header-height}"
    padding: "0 16px"
  nav-item:
    backgroundColor: "transparent"
    textColor: "rgba(255, 255, 255, 0.70)"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: "6px 12px"
  nav-item-active:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: "6px 12px"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.sm}"
    height: "40px"
    padding: "0 16px"
  button-primary-hover:
    backgroundColor: "{colors.primary-strong}"
    textColor: "{colors.on-primary}"
  button-ghost-shell:
    backgroundColor: "transparent"
    textColor: "rgba(255, 255, 255, 0.70)"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    height: "40px"
    width: "40px"
  input-shell:
    backgroundColor: "rgba(255, 255, 255, 0.10)"
    textColor: "{colors.on-shell}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    height: "36px"
    padding: "0 12px"
  card-panel:
    backgroundColor: "transparent"
    textColor: "{colors.on-background}"
    typography: "{typography.body-md}"
    rounded: "{rounded.lg}"
    padding: "{spacing.xl}"
  chart-bar:
    backgroundColor: "rgba(254, 110, 0, 0.60)"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.xs}"
  table-header:
    backgroundColor: "rgba(254, 110, 0, 0.05)"
    textColor: "{colors.primary-strong}"
    typography: "{typography.label-sm}"
    height: "48px"
    padding: "0 16px"
  table-cell:
    backgroundColor: "transparent"
    textColor: "{colors.on-surface-muted}"
    typography: "{typography.body-md}"
    padding: "8px 8px"
  status-badge-mock:
    backgroundColor: "{colors.status-mock-bg}"
    textColor: "{colors.status-mock-fg}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.pill}"
    padding: "4px 10px"
  status-badge-planned:
    backgroundColor: "{colors.status-planned-bg}"
    textColor: "{colors.status-planned-fg}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.pill}"
    padding: "4px 10px"
  status-badge-development:
    backgroundColor: "{colors.status-development-bg}"
    textColor: "{colors.status-development-fg}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.pill}"
    padding: "4px 10px"
  status-badge-integrated:
    backgroundColor: "{colors.status-integrated-bg}"
    textColor: "{colors.status-integrated-fg}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.pill}"
    padding: "4px 10px"
  status-badge-production:
    backgroundColor: "{colors.status-production-bg}"
    textColor: "{colors.status-production-fg}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.pill}"
    padding: "4px 10px"
  login-panel:
    backgroundColor: "{colors.primary-strong}"
    textColor: "{colors.on-primary}"
    rounded: "0px"
    padding: "{spacing.2xl}"
  login-card:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    padding: "{spacing.2xl}"
---

## Overview
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.

The emotional target is focused, technical, and slightly premium rather than playful. The UI is not flat-white enterprise software, but it also is not neon cyberpunk. It lives in the middle: calm neutrals for reading and scanning, with orange used as the dominant signal for action, telemetry, hover states, focus states, and brand presence.

Default presentation is light mode. Dark mode exists, but the product identity is still anchored in the light workspace with dark shell framing.

## Colors
The visual identity revolves around warm neutrals plus a concentrated orange band.

- **Background (`#FCFAF7`):** The primary page canvas. It should read as warm paper or light stone rather than stark white.
- **Surface (`#F3F4F6`) and Surface Soft (`#EDEBE9`):** Secondary neutrals for app backgrounds, muted panels, table fills, and low-emphasis containers.
- **Foreground (`#423D38`):** Main copy color. It is dark brown-gray rather than charcoal black, which keeps the UI warmer and softer.
- **Muted Foreground (`#797067`):** Metadata, descriptions, secondary labels, and quiet table text.
- **Primary Orange (`#FE6E00` / `#FF6B00`):** The live UI uses a narrow family of close oranges rather than one perfectly normalized accent. Use this family for active navigation, CTA fills, chart bars, icon hover states, prominent labels, and onboarding.
- **Warm Orange (`#FFB74D`):** Gradient or brand warmth. This should be paired with the core orange, not used alone as the main action color.
- **Focus Orange (`#F97015`):** Use for rings, active outlines, and theme-driven highlights.
- **Shell Black (`#000000` rendered at 70% opacity):** Sidebar and top bar are never fully opaque. The shell should feel dark and glassy, not matte black.
- **Status colors:** Yellow for mock/demo, gray for planned, blue for in-development, purple for integrated, and green for production-ready.

Orange should be visually dominant, but not everywhere. The product works because most surfaces stay neutral and let orange carry state, motion, and emphasis.

## Typography
The system uses the browser’s default sans stack rather than a branded webfont. That matters: the voice is practical, fast-loading, and operational, not editorial or highly stylized.

- **Primary typeface:** `ui-sans-serif, system-ui, sans-serif`.
- **Monospace:** `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace`.
- **Page headlines:** Use bold weights and compact hierarchy. The main module title sits at `1.5rem` with strong weight rather than oversized hero typography.
- **Operational labels:** Small uppercase labels, especially in cards and tables, rely on wider tracking to feel structured and machine-like.
- **Body copy:** Standard UI sizing with moderate line height. Text should stay compact enough for dashboards.
- **Hero exception:** The onboarding map can use a much larger wordmark treatment, but this is a special-case brand moment, not the default page rhythm.

Typography should feel crisp and legible first. Avoid decorative fonts, wide-display faces, or soft rounded consumer-product typography.

## Layout & Spacing
The system is built on a familiar 4px Tailwind rhythm, but the page composition behaves more like a dashboard shell around a centered content document.

- **Container max width:** `1400px` centered with `32px` horizontal padding.
- **Shell proportions:** The top bar is `64px` tall. The sidebar is `256px` expanded and `64px` collapsed.
- **Content rhythm:** Most page sections use `24px` vertical spacing. Metric cards and multi-column blocks use `16px` gaps.
- **Card padding:** Standard content cards use `24px` internal padding.
- **Table density:** Tables are relatively compact. Headers are `48px` tall, and cells rely on small body text and narrow padding.
- **Login/onboarding layout:** The entry screen is split into two equal halves, with a white visualization panel on one side and a saturated orange panel on the other.

This is not a sparse marketing layout. Density is moderate, but spacing is consistent and never cramped.

## Elevation & Depth
Depth comes from two different strategies depending on the layer.

- **Application shell:** The sidebar and header use blur plus transparency. They should feel like dark glass laid over the workspace.
- **Workspace cards:** Cards use subtle borders and standard UI shadows, but remain visually quiet. They should not look glossy or heavy.
- **Dialogs, dropdowns, and sheets:** These can use stronger shadows than normal cards, but should stay within the same neutral/orange system.
- **Charts and telemetry bars:** Orange fills use opacity rather than full saturation so they integrate with the quiet surrounding panels.

The product should never feel flat, but the depth model is restrained. Use blur for chrome, soft shadows for surfaces, and border definition everywhere else.

## Shapes
Corner treatment is consistent and slightly softened, but never bubbly.

- **Base control radius:** `8px`.
- **Tight controls / inputs:** `6px`.
- **Cards:** `12px`.
- **Pills and badges:** fully rounded.
- **Chrome panels:** square-edged at the macro level, with rounding reserved for internal interactive elements.

This should feel sturdy and contemporary. Avoid sharp corners on controls, but do not push the product into overly rounded consumer-app territory.

## Components
### Shell
The sidebar and top bar are the strongest visual signature. They are black at 70% opacity with a 12px blur and a faint white border. Text inside them is white or white at reduced opacity. Active and hovered navigation items flip to solid orange fills with white text.

### Buttons
Primary buttons are saturated orange with white text. The shape is compact and practical, not oversized. Ghost buttons inside the shell remain transparent until hover, then take on orange or translucent white states depending on context.

### Inputs
There are two input personalities:

- **Shell inputs:** translucent white-on-dark, used in the header search.
- **Surface inputs:** neutral border inputs on white cards, used heavily in login and form contexts.

Both should preserve clean rectangular geometry and avoid deep inset styling.

### Cards
Most analytical content sits in neutral cards with soft shadows and thin borders. Cards are readable first and decorative second. Metric cards, chart cards, and table cards should all feel like members of the same quiet surface family.

### Tables
There are two table idioms in the codebase:

- The newer app-router pages use neutral shadcn-style tables.
- Legacy table styling uses orange borders, orange-tinted headers, and faint orange zebra striping.

When generating new work, prefer the neutral table base for general product consistency, but keep the orange-accented table language available for threat-analysis or legacy-heavy contexts where the product already leans more branded and high-signal.

### Status badges
Status badges are important semantic cues. They should stay soft and readable:

- Mock: pale yellow
- Planned: soft gray
- In Development: pale blue
- Integrated: pale lavender
- Production Ready: pale green

### Onboarding
The login experience is bolder than the platform interior. It pairs a white global-map visualization with a vivid orange panel and a white login card. This is one place where the system can feel more branded and dramatic.

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

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

## Elevation tokens

- **Shell:** blur 12px, opacity 0.70, border opacity 0.10. Chart fill opacity 0.60.
- **Shadow subtle:** `0 1px 3px rgba(0, 0, 0, 0.10), 0 1px 2px rgba(0, 0, 0, 0.06)`
- **Shadow raised:** `0 4px 12px rgba(0, 0, 0, 0.12)`
- **Shadow dialog:** `0 20px 25px rgba(0, 0, 0, 0.10), 0 8px 10px rgba(0, 0, 0, 0.04)`

## Motion

Motion tokens from the source: fast 150ms, normal 200ms, slow 300ms, panel 500ms, with the standard easing `cubic-bezier(0.4, 0, 0.2, 1)`. Orange carries hover and state changes. Scroll choreography: (no especificado).

---

Source: designmd.ai/frknaykc/command-center · by @frknaykc · MIT License. Published there as "Evreghen Command Center". Converted to this format keeping the original license notice.