tfm_ainventory/DESIGN.md

name, colors, typography, spacing

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