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 (#F58618): "Caution Orange" is used exclusively for primary actions, critical state indicators, and highlighting active technical paths.
• Surface Palette: Backgrounds utilize a tiered black system: #0A0A0A for the base, #121212 for containers, and #1A1A1A for hover states.
• Functional Accents: A terminal-inspired green (#00FF41) is used for "Healthy" status, while a cold white (#FFFFFF) and mid-grey (#888888) 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): #0A0A0A
• Level 1 (Cards/Panels): #121212 with a 1px solid border of #222222.
• Level 2 (Modals/Popovers): #1A1A1A with a 2px solid border of the Primary Orange or a high-visibility grey.
• Active State: Elements in focus or active operation receive a 1px solid #F58618 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 #F58618 with black text. Secondary buttons are transparent with a 1px white or grey border.
• Input Fields: Darker than the container background (#000000). Use a bottom-only border or a full 1px border that changes to the primary orange on focus.
• Status Chips: High-contrast blocks. "Success" is a solid green block with black text; "Alert" is a solid orange block. No rounded corners.
• Data Tables: Zebra-striping is prohibited. Use 1px horizontal dividers only. Header cells must be all-caps Space Grotesk with a subtle background tint.
• 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 #000000 with a dim grey border to separate the feed from the management UI.