tfm_ainventory/DESIGN.md

---
name: Obsidian & Amber
colors:
  surface: '#0c1322'
  surface-dim: '#0c1322'
  surface-bright: '#323949'
  surface-container-lowest: '#070e1d'
  surface-container-low: '#141b2b'
  surface-container: '#191f2f'
  surface-container-high: '#232a3a'
  surface-container-highest: '#2e3545'
  on-surface: '#dce2f7'
  on-surface-variant: '#d8c3ad'
  inverse-surface: '#dce2f7'
  inverse-on-surface: '#293040'
  outline: '#a08e7a'
  outline-variant: '#534434'
  surface-tint: '#ffb95f'
  primary: '#ffc174'
  on-primary: '#472a00'
  primary-container: '#f59e0b'
  on-primary-container: '#613b00'
  inverse-primary: '#855300'
  secondary: '#ffb599'
  on-secondary: '#5a1c00'
  secondary-container: '#f66018'
  on-secondary-container: '#4f1700'
  tertiary: '#56e5a9'
  on-tertiary: '#003824'
  tertiary-container: '#30c88f'
  on-tertiary-container: '#004e34'
  error: '#ffb4ab'
  on-error: '#690005'
  error-container: '#93000a'
  on-error-container: '#ffdad6'
  primary-fixed: '#ffddb8'
  primary-fixed-dim: '#ffb95f'
  on-primary-fixed: '#2a1700'
  on-primary-fixed-variant: '#653e00'
  secondary-fixed: '#ffdbce'
  secondary-fixed-dim: '#ffb599'
  on-secondary-fixed: '#370e00'
  on-secondary-fixed-variant: '#7f2b00'
  tertiary-fixed: '#6ffbbe'
  tertiary-fixed-dim: '#4edea3'
  on-tertiary-fixed: '#002113'
  on-tertiary-fixed-variant: '#005236'
  background: '#0c1322'
  on-background: '#dce2f7'
  surface-variant: '#2e3545'
typography:
  headline-lg:
    fontFamily: Space Grotesk
    fontSize: 32px
    fontWeight: '700'
    lineHeight: '1.2'
    letterSpacing: -0.02em
  headline-md:
    fontFamily: Space Grotesk
    fontSize: 24px
    fontWeight: '600'
    lineHeight: '1.2'
  body-lg:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: '400'
    lineHeight: '1.5'
  body-md:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: '400'
    lineHeight: '1.5'
  data-lg:
    fontFamily: Space Grotesk
    fontSize: 18px
    fontWeight: '500'
    lineHeight: '1.2'
    letterSpacing: 0.05em
  data-sm:
    fontFamily: Space Grotesk
    fontSize: 12px
    fontWeight: '500'
    lineHeight: '1.2'
    letterSpacing: 0.1em
  label-caps:
    fontFamily: Space Grotesk
    fontSize: 11px
    fontWeight: '700'
    lineHeight: '1'
    letterSpacing: 0.15em
spacing:
  unit: 4px
  gutter: 16px
  margin: 24px
  container-max: 1440px
---

## Brand & Style

This design system is engineered for high-stakes datacenter environments where clarity and rapid data ingestion are critical. The brand personality is **rugged, utilitarian, and precise**, evoking the feel of industrial control panels and terminal interfaces. It targets system administrators and infrastructure engineers who require a "heads-up display" (HUD) aesthetic that remains legible during long shifts in low-light environments.

The design style is **Industrial Brutalism**. It prioritizes function over form, utilizing heavy borders, high-contrast mechanical accents, and monospaced typography to create a sense of structural integrity. Visual elements are treated as physical components, emphasizing hardware-level reliability.

## Colors

The palette is anchored by **Deep Obsidian (#111827)** to minimize eye strain and light bleed in dark server rooms. **Industrial Amber (#F59E0B)** serves as the primary interactive and high-visibility color, functioning as a digital "phosphor" that cuts through the dark background. 

**Safety Orange (#EA580C)** is reserved strictly for warning states and cautionary telemetry. A supplemental **Tactical Green (#10B981)** is used for "Optimal" or "Online" status indicators. The color system uses high-contrast ratios to ensure that critical information is never lost in the interface.

## Typography

While the user requested "Roboto Mono," this design system utilizes **Space Grotesk** for technical data and headlines to provide a modern, geometric "tech-brutalist" edge, paired with **Inter** for dense body text to maintain maximum legibility.

All data-driven labels and telemetry values must use **Space Grotesk** to simulate the look of physical hardware engravings and terminal readouts. Headers and labels should frequently employ `uppercase` styling with increased letter-spacing to reinforce the industrial documentation aesthetic.

## Layout & Spacing

This design system employs a **Fluid-Grid hybrid** model. The main workspace expands to utilize 100% of the viewport to accommodate dense data tables and rack visualizations, but content is constrained by a 12-column underlying structure for dashboard widgets.

The spacing rhythm is strictly based on a **4px baseline grid**. Gutters and margins are kept tight (16px and 24px respectively) to maximize information density—allowing engineers to see more telemetry on a single screen without scrolling. Components use "internal padding" rather than external margins to create a tightly-packed, modular appearance.

## Elevation & Depth

Depth is conveyed through **Tonal Layering and Bold Borders** rather than traditional soft shadows. This mimics the physical construction of server racks and control panels.

1.  **Base Level:** Deep Obsidian (#111827) representing the "chassis."
2.  **Raised Level:** Surface Alt (#1F2937) for cards and modules, featuring 1px solid borders in a slightly lighter charcoal or the primary Amber for active states.
3.  **Interactive Elements:** Use inset borders (inner shadows) to create a "pressed" or "carved" effect when buttons are toggled.

Shadows, if used, must be sharp and low-opacity (hard-edged) to maintain the brutalist, high-readability requirement.

## Shapes

The shape language is strictly **Sharp (0px)**. All containers, buttons, and input fields must have 90-degree corners. This reinforces the "rugged hardware" aesthetic and ensures that UI elements align perfectly with the pixel grid, preventing any blurriness on industrial-grade monitors. 

Angle-cut corners (dog-eared corners) may be used on primary action buttons or status chips to provide a "tactical" look without resorting to curves.

## Components

- **Buttons:** High-contrast blocks. Primary buttons use a solid Amber background with black text. Secondary buttons use an Amber 1px border with no fill.
- **Input Fields:** Deep charcoal fills with an Amber bottom-border only. Labels are placed above the field in `label-caps` style.
- **Data Tables:** Zebra-striping is forbidden. Instead, use thin 1px horizontal dividers. Hover states should highlight the entire row with a low-opacity Amber tint.
- **Status Chips:** Rectangular boxes with no roundedness. Use background colors for Critical (Red) and Warning (Orange), but keep the text black for maximum contrast.
- **Rack Visualizers:** Modular components that represent physical server hardware. Use high-contrast outlines to distinguish between individual units (U).
- **Telemetry Gauges:** Monochromatic bar charts and line graphs using the Primary Amber color, emphasizing the "oscilloscope" or "terminal" aesthetic.