Initial commit

doc/stitch_softspm_academy_consulting/hydro_tech_intelligence/DESIGN.md

@@ -0,0 +1,169 @@
+---
+name: Hydro-Tech Intelligence
+colors:
+  surface: '#101415'
+  surface-dim: '#101415'
+  surface-bright: '#363a3b'
+  surface-container-lowest: '#0b0f10'
+  surface-container-low: '#191c1e'
+  surface-container: '#1d2022'
+  surface-container-high: '#272a2c'
+  surface-container-highest: '#323537'
+  on-surface: '#e0e3e5'
+  on-surface-variant: '#c2c6d6'
+  inverse-surface: '#e0e3e5'
+  inverse-on-surface: '#2d3133'
+  outline: '#8c909f'
+  outline-variant: '#424654'
+  surface-tint: '#b1c5ff'
+  primary: '#b1c5ff'
+  on-primary: '#002c70'
+  primary-container: '#0057cd'
+  on-primary-container: '#cbd8ff'
+  inverse-primary: '#0057cd'
+  secondary: '#4fdbc8'
+  on-secondary: '#003731'
+  secondary-container: '#04b4a2'
+  on-secondary-container: '#003f38'
+  tertiary: '#bec6e0'
+  on-tertiary: '#283044'
+  tertiary-container: '#565e74'
+  on-tertiary-container: '#d0d8f2'
+  error: '#ffb4ab'
+  on-error: '#690005'
+  error-container: '#93000a'
+  on-error-container: '#ffdad6'
+  primary-fixed: '#d9e2ff'
+  primary-fixed-dim: '#b1c5ff'
+  on-primary-fixed: '#001946'
+  on-primary-fixed-variant: '#00419d'
+  secondary-fixed: '#71f8e4'
+  secondary-fixed-dim: '#4fdbc8'
+  on-secondary-fixed: '#00201c'
+  on-secondary-fixed-variant: '#005048'
+  tertiary-fixed: '#dae2fd'
+  tertiary-fixed-dim: '#bec6e0'
+  on-tertiary-fixed: '#131b2e'
+  on-tertiary-fixed-variant: '#3f465c'
+  background: '#101415'
+  on-background: '#e0e3e5'
+  surface-variant: '#323537'
+  deep-ocean: '#0B1E3B'
+  electric-teal: '#2DD4BF'
+  warning-red: '#B91830'
+  surface-dark: '#020617'
+typography:
+  display-lg:
+    fontFamily: Space Grotesk
+    fontSize: 48px
+    fontWeight: '700'
+    lineHeight: '1.1'
+    letterSpacing: -0.02em
+  display-lg-mobile:
+    fontFamily: Space Grotesk
+    fontSize: 36px
+    fontWeight: '700'
+    lineHeight: '1.2'
+  headline-lg:
+    fontFamily: Space Grotesk
+    fontSize: 32px
+    fontWeight: '600'
+    lineHeight: '1.2'
+  headline-md:
+    fontFamily: Space Grotesk
+    fontSize: 24px
+    fontWeight: '600'
+    lineHeight: '1.3'
+  body-lg:
+    fontFamily: Hanken Grotesk
+    fontSize: 18px
+    fontWeight: '400'
+    lineHeight: '1.6'
+  body-md:
+    fontFamily: Hanken Grotesk
+    fontSize: 16px
+    fontWeight: '400'
+    lineHeight: '1.5'
+  label-sm:
+    fontFamily: Hanken Grotesk
+    fontSize: 12px
+    fontWeight: '600'
+    lineHeight: '1.2'
+    letterSpacing: 0.05em
+rounded:
+  sm: 0.25rem
+  DEFAULT: 0.5rem
+  md: 0.75rem
+  lg: 1rem
+  xl: 1.5rem
+  full: 9999px
+spacing:
+  unit: 8px
+  container-max: 1280px
+  gutter: 24px
+  margin-mobile: 16px
+  margin-desktop: 40px
+  stack-sm: 12px
+  stack-md: 24px
+  stack-lg: 48px
+---
+
+## Brand & Style
+
+The visual identity of the design system is rooted in the "Hydro-Tech" aesthetic—a sophisticated blend of deep-sea professionality and high-tech innovation. It is designed to serve as an authoritative portal for the municipal water industry, balancing the reliability of institutional knowledge with the forward-thinking nature of modern consulting.
+
+The design style is **Corporate Modern with Experimental Accents**. It utilizes a dark, data-centric interface that mimics a high-end control center or command dashboard. By moving away from standard light-mode "document" styles, the design system positions the platform as a high-value intelligence tool. The emotional response should be one of "Trusted Innovation"—feeling as established as a 2014 industry leader while appearing technologically superior to legacy competitors. Expect structured layouts, precision-engineered components, and a focus on content hierarchy that makes dense technical information (webinars, courses, consulting reports) easy to digest.
+
+## Colors
+
+The palette is anchored by **#0057CD**, a deep, vibrant blue that signals trust and industry authority. This is complemented by **Electric Teal**, used sparingly as an "Experimental" accent to represent flow, clean water, and digital innovation.
+
+- **Primary Blue:** Used for key actions, brand moments, and critical navigation.
+- **Electric Teal:** Reserved for innovation highlights, active states, and "Live" indicators for webinars.
+- **Neutrals:** The background is a sophisticated `surface-dark` (#020617) to provide a high-contrast environment for white text and blue components.
+- **Success/Warning:** Red is strictly reserved for urgent municipal alerts or critical data errors, ensuring its impact is never diluted.
+
+## Typography
+
+This design system employs a dual-sans-serif approach to distinguish between "Technical Data" and "Human Knowledge."
+
+**Space Grotesk** is used for all headlines and display elements. Its geometric, slightly eccentric letterforms evoke a sense of future-proofing and engineering precision. It is the voice of the platform's technological edge.
+
+**Hanken Grotesk** serves as the workhorse for body copy and data labels. It offers exceptional legibility in dark mode and maintains a professional, neutral tone that doesn't fatigue the eye during long-form reading of consulting reports or course materials.
+
+- **Scale:** Large display sizes use tight tracking to maintain a "journalistic" authority.
+- **Hierarchy:** Use labels in uppercase with generous tracking to categorize content types (e.g., WEBINAR, ARTICLE, CONSULTING).
+
+## Layout & Spacing
+
+The layout philosophy follows a **Structured Fluid Grid**. It is designed to handle high-density information without feeling cluttered.
+
+- **Grid System:** A 12-column grid for desktop with 24px gutters. Elements should align strictly to this grid to reinforce the "engineered" feel of the platform.
+- **Vertical Rhythm:** Spacing is strictly based on 8px increments. Use `stack-lg` for section breaks and `stack-sm` for related content within cards.
+- **Content Density:** In data-rich views (like industry portals), use the 8px unit to create tight, information-dense components. In educational/marketing views (webinar landing pages), increase padding to 1.5x the standard unit to create "breathing room."
+
+## Elevation & Depth
+
+This design system avoids traditional heavy drop shadows, opting instead for **Tonal Layering and Inner Glows** to create depth within a dark environment.
+
+1.  **Base Layer:** The deepest background (#020617).
+2.  **Surface Layer:** Cards and containers use #0F172A. These are differentiated from the base by a subtle 1px stroke (opacity 10%) using the Primary Blue.
+3.  **Active Elevation:** When an element is hovered or focused, it does not "rise" with a shadow. Instead, it gains a subtle teal inner-glow or an increased stroke opacity.
+4.  **Glassmorphism:** Use backdrop-blur (12px) for sticky navigation bars and floating action menus to maintain a sense of context and "fluidity."
+
+## Shapes
+
+The shape language is **Technical and Balanced**. Using a `roundedness` level of **2** (0.5rem base) provides enough softness to feel modern and accessible, without appearing "consumer-grade" or overly casual.
+
+- **Standard Radius:** 8px for buttons and input fields.
+- **Container Radius:** 16px (rounded-lg) for cards and modular blocks.
+- **Accent Shapes:** Use 45-degree clipped corners on decorative elements or specific "Experimental" UI callouts to mimic architectural or hydrodynamic blueprints.
+
+## Components
+
+- **Buttons:** Primary buttons use a solid #0057CD fill with white text. Secondary buttons are "Ghost" style with a teal border. Buttons should feel tactile and solid.
+- **Cards:** Industry news and course cards use the surface-layer color with a top-accent border in Teal or Blue depending on the category. Use high-contrast headings within cards.
+- **Input Fields:** Dark-themed inputs with 1px borders. On focus, the border transitions to Primary Blue with a subtle outer glow (glow color: primary color at 20% opacity).
+- **Chips/Badges:** Small, high-contrast badges for "New," "Live," or "Pro." Use #14B8A6 for educational status and #0057CD for consulting-related tags.
+- **Lists:** Use "Zebra" striping with very subtle color shifts for data-heavy portals to maintain line-tracking legibility.
+- **Progress Indicators:** For courses and webinars, use a "thin-line" progress bar in Electric Teal, contrasting sharply against the dark background.