tfm_ainventory/DESIGN.md

---
name: Industrial Precision
colors:
  surface: '#131313'
  surface-dim: '#131313'
  surface-bright: '#3a3939'
  surface-container-lowest: '#0e0e0e'
  surface-container-low: '#1c1b1b'
  surface-container: '#201f1f'
  surface-container-high: '#2a2a2a'
  surface-container-highest: '#353534'
  on-surface: '#e5e2e1'
  on-surface-variant: '#ddc1af'
  inverse-surface: '#e5e2e1'
  inverse-on-surface: '#313030'
  outline: '#a48c7c'
  outline-variant: '#564335'
  surface-tint: '#ffb781'
  primary: '#ffb781'
  on-primary: '#4e2600'
  primary-container: '#f58618'
  on-primary-container: '#5b2d00'
  inverse-primary: '#924c00'
  secondary: '#c8c6c5'
  on-secondary: '#303030'
  secondary-container: '#474746'
  on-secondary-container: '#b7b5b4'
  tertiary: '#00e639'
  on-tertiary: '#003907'
  tertiary-container: '#00bd2d'
  on-tertiary-container: '#00440a'
  error: '#ffb4ab'
  on-error: '#690005'
  error-container: '#93000a'
  on-error-container: '#ffdad6'
  primary-fixed: '#ffdcc4'
  primary-fixed-dim: '#ffb781'
  on-primary-fixed: '#2f1400'
  on-primary-fixed-variant: '#6f3800'
  secondary-fixed: '#e5e2e1'
  secondary-fixed-dim: '#c8c6c5'
  on-secondary-fixed: '#1b1c1c'
  on-secondary-fixed-variant: '#474746'
  tertiary-fixed: '#72ff70'
  tertiary-fixed-dim: '#00e639'
  on-tertiary-fixed: '#002203'
  on-tertiary-fixed-variant: '#00530e'
  background: '#131313'
  on-background: '#e5e2e1'
  surface-variant: '#353534'
typography:
  headline-lg:
    fontFamily: Space Grotesk
    fontSize: 48px
    fontWeight: '700'
    lineHeight: '1.1'
    letterSpacing: -0.02em
  headline-md:
    fontFamily: Space Grotesk
    fontSize: 32px
    fontWeight: '600'
    lineHeight: '1.2'
    letterSpacing: -0.01em
  headline-sm:
    fontFamily: Space Grotesk
    fontSize: 24px
    fontWeight: '600'
    lineHeight: '1.2'
  body-lg:
    fontFamily: Space Grotesk
    fontSize: 18px
    fontWeight: '400'
    lineHeight: '1.5'
  body-md:
    fontFamily: Space Grotesk
    fontSize: 16px
    fontWeight: '400'
    lineHeight: '1.5'
  label-md:
    fontFamily: Space Grotesk
    fontSize: 14px
    fontWeight: '500'
    lineHeight: '1'
    letterSpacing: 0.05em
  mono-data:
    fontFamily: Space Grotesk
    fontSize: 14px
    fontWeight: '700'
    lineHeight: '1'
    letterSpacing: 0.02em
spacing:
  unit: 4px
  gutter: 16px
  margin: 32px
  container-gap: 24px
  stack-sm: 8px
  stack-md: 16px
---

## Brand & Style

This design system is engineered for the high-stakes environment of a datacenter, where speed of comprehension and operational uptime are paramount. The brand personality is technical, authoritative, and unapologetically utilitarian. It draws heavily from **Minimalist Industrialism** and **Brutalism**, stripping away decorative flourishes in favor of structural clarity and high-contrast signaling.

The emotional response is one of controlled intensity—evoking the feeling of a high-end command center. It prioritizes "glanceability," ensuring that critical status changes are immediately perceptible against a void-like backdrop. The aesthetic mimics physical hardware interfaces: rack-mounted servers, heavy-duty machinery, and tactical displays.

## Colors

The palette is anchored by a deep charcoal and true black foundation to minimize eye strain in low-light environments and maximize contrast. 

- **Primary (#FFBA81):** "Warm Orange" is used exclusively for primary actions, critical state indicators, and highlighting active technical paths.
- **Primary Container (#F58618):** Darker orange for secondary emphasis and container highlights.
- **Surface Palette:** Backgrounds utilize a tiered system from `#0E0E0E` (darkest) to `#353534` (lighter surfaces).
- **Functional Accents:** A terminal-inspired green (`#00E639`) is used for "Healthy" status, while light grey (`#E5E2E1`) and mid-grey (`#C8C6C5`) handle content hierarchy.
- **Contrast:** Maintain a minimum 7:1 contrast ratio for all status-critical text against the dark backgrounds.

## Typography

The typography utilizes **Space Grotesk** across all levels to maintain a technical, geometric rigour. Its idiosyncratic letterforms provide a futuristic "code-like" feel while remaining highly legible at small sizes.

- **Headlines:** Use tight tracking and heavy weights to create a sense of structural density.
- **Labels:** Small caps or all-caps are preferred for metadata and technical specs to differentiate them from prose.
- **Numeric Data:** Ensure tabular figures are used for metrics, alignment of IP addresses, and throughput values to facilitate easy vertical scanning of logs and tables.

## Layout & Spacing

This design system employs a **fixed grid** model for primary dashboards to ensure telemetry data remains in a predictable location. A 12-column system is used for high-level layouts, but interior modules utilize a strict 4px baseline grid.

Spacing is compressed to increase information density, reflecting the "glass cockpit" philosophy where more data is preferable to excessive whitespace. Use heavy 24px-32px margins for the primary viewport to frame the content, but keep internal component padding tight (8px-12px) to maximize screen real estate for logs and graphs.

## Elevation & Depth

Depth is conveyed through **Bold Borders** and **Tonal Layers** rather than shadows. In a datacenter environment, shadows can muddy the interface; instead, we use high-contrast outlines to define hierarchy.

- **Level 0 (Base):** `#131313` (surface)
- **Level 1 (Cards/Panels):** `#201F1F` (surface-container) with a 1px solid border of `#564335` (outline-variant).
- **Level 2 (Modals/Popovers):** `#2A2A2A` (surface-container-high) with a 2px solid border of `#FFBA81` (primary).
- **Active State:** Elements in focus or active operation receive a 1px solid `#FFBA81` (primary) border to immediately draw the eye. No blurs or gradients are permitted.

## Shapes

The shape language is strictly **Sharp (0px)**. 90-degree angles reinforce the industrial, hardware-centric aesthetic. This lack of rounding suggests precision and eliminates the "friendly" softness typical of consumer SaaS. Every button, input, and container must maintain a hard edge to align with the rigid grid of a server rack.

## Components

- **Buttons:** Rectangular with no radius. Primary buttons are solid `#FFBA81` (primary) with black text. Secondary buttons are transparent with a 1px grey border and grey text.
- **Input Fields:** Background is `#0E0E0E` (surface-container-lowest). Use a 1px border with `#A48C7C` (outline) color, changing to `#FFBA81` (primary) on focus.
- **Status Chips:** High-contrast blocks. "Success" is solid `#00E639` (tertiary) with dark text; "Alert" is solid `#FFBA81` (primary) with dark text. No rounded corners.
- **Data Tables:** Zebra-striping is prohibited. Use 1px horizontal dividers only. Header cells use `#201F1F` background with `#C8C6C5` text (secondary).
- **Telemetry Charts:** Lines should be 2px thick with no smoothing (stair-step/linear interpolation only) to represent raw data accuracy. 
- **Log Viewers:** Use the `mono-data` type style. Background should be `#0E0E0E` (surface-container-lowest) with `#A48C7C` (outline) border to separate the feed from the management UI.