Sentinel Spectrum Enterprise

# Sentinel Spectrum Enterprise

## Philosophy

A trustworthy enterprise SaaS language built around blue-led neutral foundations, confident green resolution states, restrained violet intelligence cues, and accessible semantic color roles for dense dashboards and workflow operations.

### Values

- Clarity before decoration
- Operational trust through stable blues and disciplined neutrals
- Success states that feel confident without becoming celebratory noise
- Automation cues that are intelligent but restrained
- Accessibility through contrast, labeling, iconography, and non-color state encoding

### Anti-Values

- Candy-colored dashboards where every metric competes for attention
- Status palettes that rely on hue alone or use low-contrast tints for critical feedback
- Overly futuristic violet gradients that undermine enterprise credibility

### Visual Character

- Blue command rails and header bands use solid #1D4ED8 fields with thin cyan keylines to establish durable navigation and product trust.
- Cards sit on warm neutral surfaces with 1px blue-gray borders, subtle inner highlight lines, and no glassmorphism or heavy shadows.
- Semantic states pair accessible color fills with icons, labels, left-edge bars, and patterned micro-stripes so meaning never depends on color alone.
- Restrained violet appears only in automation chips, insight callouts, and model-confidence indicators using small gradient strokes rather than large panels.
- Data modules use a documented categorical, sequential, and diverging palette with legend chips, direct labels, and texture markers for high-density comparison.

## Tokens

### Borders

- **Accent Width**: 3px
- **Character**: Crisp blue-gray separators, left-edge semantic bars, and occasional violet-to-cyan intelligence strokes for automation modules.
- **Default Width**: 1px
- **Style**: solid

### Colors

| Name | Value |
|------|-------|
| accent | `#6D4AFF` |
| background | `#F7F9FC` |
| border | `#CBD5E1` |
| error | `#DC2626` |
| info | `#0284C7` |
| muted | `#64748B` |
| primary | `#1D4ED8` |
| secondary | `#334155` |
| success | `#15803D` |
| surface | `#FFFFFF` |
| text | `#0F172A` |
| warning | `#B45309` |

### Data Visualization

- **Categorical**: ["#1D4ED8","#15803D","#6D4AFF","#0284C7","#B45309","#0F766E","#9333EA","#475569"]
- **Diverging Risk**: ["#DC2626","#F97316","#FACC15","#84CC16","#15803D"]
- **Gridlines**: #E2E8F0
- **Labeling**: Always pair legend swatches with direct labels and patterns for status-critical series.
- **Neutral Axes**: #94A3B8
- **Sequential Blue**: ["#EFF6FF","#DBEAFE","#93C5FD","#3B82F6","#1D4ED8","#1E3A8A"]

### Motion

- **Duration**: 160ms
- **Easing**: cubic-bezier(0.2, 0, 0, 1)
- **Philosophy**: Fast enterprise confirmation: hover lift is minimal, state changes are immediate, and no color/status transition hides critical information.

### Radii

- **Full**: 9999px
- **Lg**: 16px
- **Md**: 10px
- **None**: 0
- **Sm**: 6px

### Shadows

- **Lg**: 0 26px 60px rgba(15,23,42,0.14)
- **Md**: 0 12px 28px rgba(15,23,42,0.10)
- **Sm**: 0 1px 2px rgba(15,23,42,0.06)

### Spacing

- **Base**: 8px
- **Scale**: [4,8,12,16,24,32,48,64]

### Status Encoding

- **Automation**: #6D4AFF plus sparkle/circuit icon and confidence text
- **Error**: #DC2626 plus octagon/exclamation icon and explicit error text
- **Info**: #0284C7 plus info icon and blue outline
- **Success**: #15803D plus check icon and success label
- **Warning**: #B45309 plus triangle icon and amber left bar

### Surfaces

- **Bg Pattern**: Subtle 24px grid using blue-gray lines at 35% opacity, reserved for hero and dashboard canvases rather than form interiors.
- **Card Style**: Flat enterprise cards with 1px #CBD5E1 border, 10-16px radius, thin blue top rule for priority modules, and measured shadow on lifted overlays.
- **Treatment**: Layer warm off-white application backgrounds, white cards, and pale blue selected rows with restrained status tint panels only when paired with text labels.

### Typography

- **Base Size**: 16px
- **Body Font**: Source Sans 3
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600&family=Source+Sans+3:wght@400;500;600;700;800&display=swap
- **Heading Font**: Source Sans 3
- **Letter Spacing**: -0.01em
- **Line Height**: 1.5
- **Mono Font**: JetBrains Mono
- **Scale Ratio**: 1.22

## Rules

### Composition

Use a stable enterprise shell: blue-led navigation, neutral work canvas, metric cards in a 12-column grid, and analysis panels that keep status, data, and action controls visually separated.

### Density

Moderately dense dashboard rhythm with 16px card padding, 8px row gaps, 40px controls, and whitespace preserved around decision-critical actions.

### Hierarchy

Lead with compact headings, strong numeric values, and labeled status rows; reserve high-saturation color for active navigation, semantic alerts, and chart series rather than general decoration.

### Signature Patterns

- Command-blue navigation rail with active items indicated by a white pill, 3px cyan keyline, icon, and text label for accessible orientation.
- Semantic evidence strips on cards: a colored left bar, matching icon badge, short label, and small patterned stripe for non-color status confirmation.
- Intelligence accents use violet micro-gradients on chip borders, model confidence meters, and automation callouts but never replace the core blue/neutral foundation.
- Chart panels include a fixed palette rail showing categorical, sequential, and diverging swatches with direct labels and texture tokens for critical series.

## Layout

### Breakpoints

- **Desktop**: 1024px and above
- **Mobile**: 0-639px
- **Tablet**: 640-1023px

### Grid

Desktop uses a 12-column grid with 24px gutters; tablet collapses to 6 columns; mobile uses one column with persistent status summaries above tables.

### Whitespace

Use 24px page gutters, 16px card interiors, 8px control clusters, and larger 32px pauses between navigation, data, and decision zones.

## Guidance

### Do

- Use blue as the primary trust and navigation color, not as a universal status color.
- Pair every status hue with text, icon, border position, or pattern so color-blind users retain meaning.
- Keep violet accents small and specific to intelligence, recommendations, automation, or model confidence.
- Define chart palettes by categorical, sequential, and diverging use cases before assigning colors to datasets.

### Don't

- Do not use low-contrast pastel text on tinted alert backgrounds.
- Do not let green compete with primary actions except in explicit completion and success states.
- Do not apply rainbow palettes to enterprise dashboards without semantic ordering, direct labels, and contrast checks.
- Do not use large purple gradients for general hero surfaces or navigation.

---
version: "alpha"
name: "Sentinel Spectrum Enterprise"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  accent: "#6D4AFF"
  background: "#F7F9FC"
  border: "#CBD5E1"
  error: "#DC2626"
  info: "#0284C7"
  muted: "#64748B"
  primary: "#1D4ED8"
  secondary: "#334155"
  success: "#15803D"
  surface: "#FFFFFF"
  text: "#0F172A"
  warning: "#B45309"
typography:
  headline-lg:
    fontFamily: "Source Sans 3"
    fontSize: "1.816rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.01em"
  headline-md:
    fontFamily: "Source Sans 3"
    fontSize: "1.488rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.01em"
  body-md:
    fontFamily: "Source Sans 3"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.01em"
  label-md:
    fontFamily: "JetBrains Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  full: "9999px"
  lg: "16px"
  md: "10px"
  none: "0px"
  sm: "6px"
spacing:
  base: "8px"
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  2xl: "32px"
  3xl: "48px"
  4xl: "64px"
components:
  color-reference-accent:
    backgroundColor: "{colors.accent}"
  color-reference-background:
    backgroundColor: "{colors.background}"
  color-reference-border:
    backgroundColor: "{colors.border}"
  color-reference-error:
    backgroundColor: "{colors.error}"
  color-reference-info:
    backgroundColor: "{colors.info}"
  color-reference-muted:
    backgroundColor: "{colors.muted}"
  color-reference-primary:
    backgroundColor: "{colors.primary}"
  color-reference-secondary:
    backgroundColor: "{colors.secondary}"
  color-reference-success:
    backgroundColor: "{colors.success}"
  color-reference-surface:
    backgroundColor: "{colors.surface}"
  color-reference-text:
    backgroundColor: "{colors.text}"
  color-reference-warning:
    backgroundColor: "{colors.warning}"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "#ffffff"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: "{spacing.md}"
  card-surface:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.md}"
    padding: "{spacing.md}"
  input-default:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.md}"
    height: "44px"
---

# Sentinel Spectrum Enterprise

## Overview

A trustworthy enterprise SaaS language built around blue-led neutral foundations, confident green resolution states, restrained violet intelligence cues, and accessible semantic color roles for dense dashboards and workflow operations.

### Values

- Clarity before decoration
- Operational trust through stable blues and disciplined neutrals
- Success states that feel confident without becoming celebratory noise
- Automation cues that are intelligent but restrained
- Accessibility through contrast, labeling, iconography, and non-color state encoding

### Anti-Values

- Candy-colored dashboards where every metric competes for attention
- Status palettes that rely on hue alone or use low-contrast tints for critical feedback
- Overly futuristic violet gradients that undermine enterprise credibility

### Visual Character

- Blue command rails and header bands use solid #1D4ED8 fields with thin cyan keylines to establish durable navigation and product trust.
- Cards sit on warm neutral surfaces with 1px blue-gray borders, subtle inner highlight lines, and no glassmorphism or heavy shadows.
- Semantic states pair accessible color fills with icons, labels, left-edge bars, and patterned micro-stripes so meaning never depends on color alone.
- Restrained violet appears only in automation chips, insight callouts, and model-confidence indicators using small gradient strokes rather than large panels.
- Data modules use a documented categorical, sequential, and diverging palette with legend chips, direct labels, and texture markers for high-density comparison.

## Colors

Use the YAML color tokens as the normative palette. The prose below names the roles agents should preserve when generating UI.

| Token | Value |
|-------|-------|
| accent | `#6D4AFF` |
| background | `#F7F9FC` |
| border | `#CBD5E1` |
| error | `#DC2626` |
| info | `#0284C7` |
| muted | `#64748B` |
| primary | `#1D4ED8` |
| secondary | `#334155` |
| success | `#15803D` |
| surface | `#FFFFFF` |
| text | `#0F172A` |
| warning | `#B45309` |

## Typography

- **Headline-Lg**: Source Sans 3, 1.816rem, weight 700, line-height 1.1.
- **Headline-Md**: Source Sans 3, 1.488rem, weight 600, line-height 1.15.
- **Body-Md**: Source Sans 3, 16px, weight 400, line-height 1.5.
- **Label-Md**: JetBrains Mono, 0.75rem, weight 600, line-height 1.

## Layout

### Spacing Tokens

- **Base**: `8px`
- **Xs**: `4px`
- **Sm**: `8px`
- **Md**: `12px`
- **Lg**: `16px`
- **Xl**: `24px`
- **2xl**: `32px`
- **3xl**: `48px`
- **4xl**: `64px`

### Breakpoints

- **Desktop**: 1024px and above
- **Mobile**: 0-639px
- **Tablet**: 640-1023px

### Grid

Desktop uses a 12-column grid with 24px gutters; tablet collapses to 6 columns; mobile uses one column with persistent status summaries above tables.

### Whitespace

Use 24px page gutters, 16px card interiors, 8px control clusters, and larger 32px pauses between navigation, data, and decision zones.

## Elevation & Depth

### Shadows

- **Lg**: 0 26px 60px rgba(15,23,42,0.14)
- **Md**: 0 12px 28px rgba(15,23,42,0.10)
- **Sm**: 0 1px 2px rgba(15,23,42,0.06)

## Shapes

### Rounded

- **Full**: `9999px`
- **Lg**: `16px`
- **Md**: `10px`
- **None**: `0px`
- **Sm**: `6px`

### Surfaces

- **Bg Pattern**: Subtle 24px grid using blue-gray lines at 35% opacity, reserved for hero and dashboard canvases rather than form interiors.
- **Card Style**: Flat enterprise cards with 1px #CBD5E1 border, 10-16px radius, thin blue top rule for priority modules, and measured shadow on lifted overlays.
- **Treatment**: Layer warm off-white application backgrounds, white cards, and pale blue selected rows with restrained status tint panels only when paired with text labels.

### Borders

- **Accent Width**: 3px
- **Character**: Crisp blue-gray separators, left-edge semantic bars, and occasional violet-to-cyan intelligence strokes for automation modules.
- **Default Width**: 1px
- **Style**: solid

## Components

### Composition

Use a stable enterprise shell: blue-led navigation, neutral work canvas, metric cards in a 12-column grid, and analysis panels that keep status, data, and action controls visually separated.

### Density

Moderately dense dashboard rhythm with 16px card padding, 8px row gaps, 40px controls, and whitespace preserved around decision-critical actions.

### Hierarchy

Lead with compact headings, strong numeric values, and labeled status rows; reserve high-saturation color for active navigation, semantic alerts, and chart series rather than general decoration.

### Signature Patterns

- Command-blue navigation rail with active items indicated by a white pill, 3px cyan keyline, icon, and text label for accessible orientation.
- Semantic evidence strips on cards: a colored left bar, matching icon badge, short label, and small patterned stripe for non-color status confirmation.
- Intelligence accents use violet micro-gradients on chip borders, model confidence meters, and automation callouts but never replace the core blue/neutral foundation.
- Chart panels include a fixed palette rail showing categorical, sequential, and diverging swatches with direct labels and texture tokens for critical series.

## shadcn/ui Usage

When the target app uses shadcn/ui, copy DESIGN.md with shadcn instead of the plain DESIGN.md. It contains the same Katagami design-language source plus the shadcn/ui primitives, imports, theme variables, component recipes, and preview-shot guidance.

DESIGN.md with shadcn: `/language/en-019ea9a3-91e9-7013-ba12-f6c3076d52b2/DESIGN.with-shadcn.md`.

The shadcn page also exposes optional machine-readable files for automation, but the human-facing handoff is DESIGN.md with shadcn.

Install recommended primitives with `npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table`.

Use these primitives in shadcn apps:
- button
- card
- input
- textarea
- select
- dialog
- sheet
- tabs
- badge
- separator
- checkbox
- switch
- slider
- tooltip
- dropdown-menu
- table

Implementation rule for agents: import shadcn primitives from `@/components/ui/*`, apply the generated CSS variables first, then compose the language-specific recipes from the companion MD. Katagami remains the source of truth; shadcn names are the implementation surface.

## Do's and Don'ts

- Do Use blue as the primary trust and navigation color, not as a universal status color.
- Do Pair every status hue with text, icon, border position, or pattern so color-blind users retain meaning.
- Do Keep violet accents small and specific to intelligence, recommendations, automation, or model confidence.
- Do Define chart palettes by categorical, sequential, and diverging use cases before assigning colors to datasets.
- Don't Do not use low-contrast pastel text on tinted alert backgrounds.
- Don't Do not let green compete with primary actions except in explicit completion and success states.
- Don't Do not apply rainbow palettes to enterprise dashboards without semantic ordering, direct labels, and contrast checks.
- Don't Do not use large purple gradients for general hero surfaces or navigation.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sentinel-spectrum-enterprise",
  "type": "registry:theme",
  "title": "Sentinel Spectrum Enterprise shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F7F9FC",
      "foreground": "#0F172A",
      "card": "#FFFFFF",
      "card-foreground": "#0F172A",
      "popover": "#FFFFFF",
      "popover-foreground": "#0F172A",
      "primary": "#1D4ED8",
      "primary-foreground": "#ffffff",
      "secondary": "#334155",
      "secondary-foreground": "#ffffff",
      "muted": "#64748B",
      "muted-foreground": "#0F172A",
      "accent": "#6D4AFF",
      "accent-foreground": "#ffffff",
      "destructive": "#DC2626",
      "border": "#CBD5E1",
      "input": "#CBD5E1",
      "ring": "#6D4AFF",
      "chart-1": "#1D4ED8",
      "chart-2": "#334155",
      "chart-3": "#6D4AFF",
      "chart-4": "#15803D",
      "chart-5": "#B45309",
      "sidebar": "#FFFFFF",
      "sidebar-foreground": "#0F172A",
      "sidebar-primary": "#1D4ED8",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#0284C7",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#CBD5E1",
      "sidebar-ring": "#6D4AFF",
      "radius": "10px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#1D4ED8",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#6D4AFF",
      "accent-foreground": "#ffffff",
      "destructive": "#DC2626",
      "border": "#303642",
      "input": "#303642",
      "ring": "#6D4AFF",
      "chart-1": "#1D4ED8",
      "chart-2": "#334155",
      "chart-3": "#6D4AFF",
      "chart-4": "#15803D",
      "chart-5": "#B45309",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#1D4ED8",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#6D4AFF",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#6D4AFF",
      "radius": "10px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019ea9a3-91e9-7013-ba12-f6c3076d52b2",
    "slug": "sentinel-spectrum-enterprise",
    "componentManifest": [
      "button",
      "card",
      "input",
      "textarea",
      "select",
      "dialog",
      "sheet",
      "tabs",
      "badge",
      "separator",
      "checkbox",
      "switch",
      "slider",
      "tooltip",
      "dropdown-menu",
      "table"
    ],
    "installCommand": "npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table",
    "nativeTokenNames": {
      "borders": [
        "accent_width",
        "character",
        "default_width",
        "style"
      ],
      "colors": [
        "accent",
        "background",
        "border",
        "error",
        "info",
        "muted",
        "primary",
        "secondary",
        "success",
        "surface",
        "text",
        "warning"
      ],
      "data_visualization": [
        "categorical",
        "diverging_risk",
        "gridlines",
        "labeling",
        "neutral_axes",
        "sequential_blue"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none",
        "sm"
      ],
      "shadows": [
        "lg",
        "md",
        "sm"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "status_encoding": [
        "automation",
        "error",
        "info",
        "success",
        "warning"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "typography": [
        "base_size",
        "body_font",
        "google_fonts_url",
        "heading_font",
        "letter_spacing",
        "line_height",
        "mono_font",
        "scale_ratio"
      ]
    }
  }
}
```