bede

AI_RULES.md

@@ -15,7 +15,7 @@ This is the **Single Source of Truth** for ALL AI agents. Refer to [PROJECT_ARCH
 
 ## 2. ENGINEERING & OPERATIONAL LAWS
 - **ENGLISH ONLY**: Interfaces, code, variables, and docs MUST be in English. Translate any Romanian text found in code immediately.
-- **GIT PROTOCOL**: Use system `git`. Never push or use `--force` unless explicitly asked.
+- **GIT PROTOCOL**: Use system `git`. Never push or use `--force` unless explicitly asked. Never push to master unless user say so. The maik work is done in "dev" git branch, and in other branches only user say so explicitly.
 - **VERSIONING**: Update `VERSION.json` on every commit using `scripts/save_version.py`.
 - **SSOT INTEGRITY**: Every feature change MUST update: `README.md`, `USER_GUIDE.md`, `PROJECT_ARCHITECTURE.md`, `DEPLOYMENT.md`, and `dev_docs/PLAN.md`.
 - **CODE QUALITY**: Files under 300 lines, complexity < 10, strict Single Responsibility Principle.

DESIGN.md

@@ -1,145 +1,149 @@
 ---
-name: Obsidian & Amber
+name: Industrial Precision
 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'
+  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: '#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'
+  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: 32px
+    fontSize: 48px
     fontWeight: '700'
-    lineHeight: '1.2'
+    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: Inter
-    fontSize: 16px
+    fontFamily: Space Grotesk
+    fontSize: 18px
     fontWeight: '400'
     lineHeight: '1.5'
   body-md:
-    fontFamily: Inter
-    fontSize: 14px
+    fontFamily: Space Grotesk
+    fontSize: 16px
     fontWeight: '400'
     lineHeight: '1.5'
-  data-lg:
+  label-md:
     fontFamily: Space Grotesk
-    fontSize: 18px
+    fontSize: 14px
     fontWeight: '500'
-    lineHeight: '1.2'
+    lineHeight: '1'
     letterSpacing: 0.05em
-  data-sm:
+  mono-data:
     fontFamily: Space Grotesk
-    fontSize: 12px
-    fontWeight: '500'
-    lineHeight: '1.2'
-    letterSpacing: 0.1em
-  label-caps:
-    fontFamily: Space Grotesk
-    fontSize: 11px
+    fontSize: 14px
     fontWeight: '700'
     lineHeight: '1'
-    letterSpacing: 0.15em
+    letterSpacing: 0.02em
 spacing:
   unit: 4px
   gutter: 16px
-  margin: 24px
-  container-max: 1440px
+  margin: 32px
+  container-gap: 24px
+  stack-sm: 8px
+  stack-md: 16px
 ---
 
 ## 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.
+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 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.
+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 **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. 
+The palette is anchored by a deep charcoal and true black foundation to minimize eye strain in low-light environments and maximize contrast. 
 
-**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.
+- **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
 
-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.
+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.
 
-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.
+- **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 **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.
+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.
 
-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.
+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 **Tonal Layering and Bold Borders** rather than traditional soft shadows. This mimics the physical construction of server racks and control panels.
+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.
 
-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.
+- **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)**. 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.
+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:** 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.
+- **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.