From b74d1172cb1821b865f1bb38816083d1a3fd0b40 Mon Sep 17 00:00:00 2001 From: Daniel Bedeleanu Date: Sat, 25 Apr 2026 12:13:58 +0300 Subject: [PATCH] bede --- AI_RULES.md | 2 +- DESIGN.md | 178 +++++++++++++++++++++++++++------------------------- 2 files changed, 92 insertions(+), 88 deletions(-) diff --git a/AI_RULES.md b/AI_RULES.md index ba2710d7..d49f4248 100644 --- a/AI_RULES.md +++ b/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. diff --git a/DESIGN.md b/DESIGN.md index 2aae7ee0..ed7a848c 100644 --- a/DESIGN.md +++ b/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.