tfm_ainventory/DESIGN.md

name, colors, typography, spacing

name	colors	typography	spacing
Industrial Precision	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 #131313 #131313 #3a3939 #0e0e0e #1c1b1b #201f1f #2a2a2a #353534 #e5e2e1 #ddc1af #e5e2e1 #313030 #a48c7c #564335 #ffb781 #ffb781 #4e2600 #f58618 #5b2d00 #924c00 #c8c6c5 #303030 #474746 #b7b5b4 #00e639 #003907 #00bd2d #00440a #ffb4ab #690005 #93000a #ffdad6 #ffdcc4 #ffb781 #2f1400 #6f3800 #e5e2e1 #c8c6c5 #1b1c1c #474746 #72ff70 #00e639 #002203 #00530e #131313 #e5e2e1 #353534	headline-lg headline-md headline-sm body-lg body-md label-md mono-data fontFamily fontSize fontWeight lineHeight letterSpacing Space Grotesk 48px 700 1.1 -0.02em fontFamily fontSize fontWeight lineHeight letterSpacing Space Grotesk 32px 600 1.2 -0.01em fontFamily fontSize fontWeight lineHeight Space Grotesk 24px 600 1.2 fontFamily fontSize fontWeight lineHeight Space Grotesk 18px 400 1.5 fontFamily fontSize fontWeight lineHeight Space Grotesk 16px 400 1.5 fontFamily fontSize fontWeight lineHeight letterSpacing Space Grotesk 14px 500 1 0.05em fontFamily fontSize fontWeight lineHeight letterSpacing Space Grotesk 14px 700 1 0.02em	unit gutter margin container-gap stack-sm stack-md 4px 16px 32px 24px 8px 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.