diff --git a/.claude/skills/design-system/SKILL.md b/.claude/skills/design-system/SKILL.md index cfbcba0c8..1571701f4 100644 --- a/.claude/skills/design-system/SKILL.md +++ b/.claude/skills/design-system/SKILL.md @@ -1,27 +1,35 @@ --- -name: ckm:design-system -description: Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic slide creation. Use for design tokens, systematic design, brand-compliant presentations. +name: andritz-design-system +description: Andritz Precision industrial design system with dark/light theme variants. Three-layer token architecture (primitive→semantic→component), Material Design surface hierarchy, sharp 0px corners, tonal layering, industrial component specifications, and slide generation. argument-hint: "[component or token]" license: MIT metadata: author: claudekit - version: "1.0.0" + version: "2.0.0" --- -# Design System +# Andritz Design System -Token architecture, component specifications, systematic design, slide generation. +Industrial precision design system based on the **"Monolithic Engine"** creative north star — solid, authoritative, deeply layered. Supports dark/light theme variants via Material Design surface hierarchy. ## When to Use -- Design token creation -- Component state definitions -- CSS variable systems -- Spacing/typography scales -- Design-to-code handoff -- Tailwind theme configuration +- Andritz-branded UI development +- Industrial dashboard and command center design +- Dark/light theme implementation via surface hierarchy +- Material Design token systems with tonal layering +- Sharp-corner (0px radius) component systems +- Data-heavy layouts with zone-based organization - **Slide/presentation generation** +## Andritz Key Colors + +### Light Theme +- Surface: `#f8fafb` | Primary: `#0075be` / `#005c97` | On-surface: `#191c1d` + +### Dark Theme +- Surface: `#10141a` | Primary: `#9bcaff` / `#0075be` | On-surface: `#dfe2eb` + ## Token Architecture Load: `references/token-architecture.md` @@ -29,30 +37,30 @@ Load: `references/token-architecture.md` ### Three-Layer Structure ``` -Primitive (raw values) +Primitive (Andritz raw values) ↓ -Semantic (purpose aliases) +Semantic (surface hierarchy + purpose aliases) ↓ -Component (component-specific) +Component (industrial component tokens) ``` **Example:** ```css /* Primitive */ ---color-blue-600: #2563EB; +--andritz-blue-500: #0075be; /* Semantic */ ---color-primary: var(--color-blue-600); +--color-primary: var(--andritz-blue-500); /* Component */ ---button-bg: var(--color-primary); +--button-bg: linear-gradient(135deg, var(--color-primary-text), var(--color-primary)); ``` ## Quick Start **Generate tokens:** ```bash -node scripts/generate-tokens.cjs --config tokens.json -o tokens.css +node scripts/generate-tokens.cjs --config templates/design-tokens-starter.json -o assets/design-tokens.css ``` **Validate usage:** @@ -60,10 +68,17 @@ node scripts/generate-tokens.cjs --config tokens.json -o tokens.css node scripts/validate-tokens.cjs --dir src/ ``` +**Use in slides/HTML:** +```html + + +``` + ## References | Topic | File | |-------|------| +| Design Philosophy | `references/design-philosophy.md` | | Token Architecture | `references/token-architecture.md` | | Primitive Tokens | `references/primitive-tokens.md` | | Semantic Tokens | `references/semantic-tokens.md` | @@ -76,10 +91,11 @@ node scripts/validate-tokens.cjs --dir src/ | Property | Default | Hover | Active | Disabled | |----------|---------|-------|--------|----------| -| Background | primary | primary-dark | primary-darker | muted | -| Text | white | white | white | muted-fg | -| Border | none | none | none | muted-border | -| Shadow | sm | md | none | none | +| Background | gradient(primary) | tonal-shift | scale-98% | surface-muted | +| Text | on-primary | on-primary | on-primary | on-surface-variant | +| Border | none | none | none | ghost-border | +| Shadow | none | none | none | none | +| Radius | 0px | 0px | 0px | 0px | ## Scripts @@ -95,12 +111,12 @@ node scripts/validate-tokens.cjs --dir src/ | Template | Purpose | |----------|---------| -| `design-tokens-starter.json` | Starter JSON with three-layer structure | +| `design-tokens-starter.json` | Andritz three-layer token starter | ## Integration -**With brand:** Extract primitives from brand colors/typography -**With ui-styling:** Component tokens → Tailwind config +**With brand:** Extract primitives from Andritz brand colors/typography +**With ui-styling:** Component tokens → Tailwind config with 0px radius **Skill Dependencies:** brand, ui-styling **Primary Agents:** ui-ux-designer, frontend-developer @@ -146,34 +162,6 @@ python scripts/search-slides.py "cta" --context --position 9 --prev-emotion frus | `data/slide-copy.csv` | 25 copywriting formulas (PAS, AIDA, FAB) | | `data/slide-charts.csv` | 25 chart types with Chart.js config | -### Contextual Decision Flow - -``` -1. Parse goal/context - ↓ -2. Search slide-strategies.csv → Get strategy + emotion beats - ↓ -3. For each slide: - a. Query slide-layout-logic.csv → layout + break_pattern - b. Query slide-typography.csv → type scale - c. Query slide-color-logic.csv → color treatment - d. Query slide-backgrounds.csv → image if needed - e. Apply animation class from slide-animations.css - ↓ -4. Generate HTML with design tokens - ↓ -5. Validate with slide-token-validator.py -``` - -### Pattern Breaking (Duarte Sparkline) - -Premium decks alternate between emotions for engagement: -``` -"What Is" (frustration) ↔ "What Could Be" (hope) -``` - -System calculates pattern breaks at 1/3 and 2/3 positions. - ### Slide Requirements **ALL slides MUST:** @@ -197,8 +185,8 @@ new Chart(document.getElementById('revenueChart'), { labels: ['Sep', 'Oct', 'Nov', 'Dec'], datasets: [{ data: [5, 12, 28, 45], - borderColor: '#FF6B6B', // Use brand coral - backgroundColor: 'rgba(255, 107, 107, 0.1)', + borderColor: 'var(--color-primary)', + backgroundColor: 'rgba(0, 117, 190, 0.1)', fill: true, tension: 0.4 }] @@ -210,35 +198,24 @@ new Chart(document.getElementById('revenueChart'), { ### Token Compliance ```css -/* CORRECT - uses token */ -background: var(--slide-bg); +/* CORRECT - uses Andritz token */ +background: var(--color-surface); color: var(--color-primary); -font-family: var(--typography-font-heading); +font-family: var(--font-family-primary); +border-radius: 0px; /* WRONG - hardcoded */ -background: #0D0D0D; -color: #FF6B6B; -font-family: 'Space Grotesk'; -``` - -### Reference Implementation - -Working example with all features: -``` -assets/designs/slides/claudekit-pitch-251223.html -``` - -### Command - -```bash -/slides:create "10-slide investor pitch for ClaudeKit Marketing" +background: #f8fafb; +color: #0075be; +font-family: 'Inter'; +border-radius: 0.5rem; ``` ## Best Practices -1. Never use raw hex in components - always reference tokens -2. Semantic layer enables theme switching (light/dark) -3. Component tokens enable per-component customization -4. Use HSL format for opacity control +1. Never use border-radius — 0px is the Andritz rule, no exceptions +2. Use tonal layering (surface hierarchy) instead of borders — No-Line Rule +3. Semantic layer enables light/dark theme switching via surface hierarchy +4. Component tokens enable per-component customization 5. Document every token's purpose 6. **Slides must import design-tokens.css and use var() exclusively** diff --git a/.claude/skills/design-system/assets/css/slide-animations.css b/.claude/skills/design-system/assets/css/slide-animations.css new file mode 100644 index 000000000..6e17eb329 --- /dev/null +++ b/.claude/skills/design-system/assets/css/slide-animations.css @@ -0,0 +1,159 @@ +/* Andritz Precision — Slide Animation Library */ +/* Industrial motion: deliberate, mechanical, precise */ + +/* === ENTRANCE ANIMATIONS === */ + +@keyframes fadeIn { + from { opacity: 0; } + to { opacity: 1; } +} + +@keyframes fadeInUp { + from { opacity: 0; transform: translateY(24px); } + to { opacity: 1; transform: translateY(0); } +} + +@keyframes fadeInDown { + from { opacity: 0; transform: translateY(-24px); } + to { opacity: 1; transform: translateY(0); } +} + +@keyframes fadeInLeft { + from { opacity: 0; transform: translateX(-32px); } + to { opacity: 1; transform: translateX(0); } +} + +@keyframes fadeInRight { + from { opacity: 0; transform: translateX(32px); } + to { opacity: 1; transform: translateX(0); } +} + +@keyframes scaleIn { + from { opacity: 0; transform: scale(0.95); } + to { opacity: 1; transform: scale(1); } +} + +/* === SLIDE TRANSITIONS === */ + +@keyframes slideInRight { + from { transform: translateX(100%); opacity: 0; } + to { transform: translateX(0); opacity: 1; } +} + +@keyframes slideInLeft { + from { transform: translateX(-100%); opacity: 0; } + to { transform: translateX(0); opacity: 1; } +} + +@keyframes slideOutLeft { + from { transform: translateX(0); opacity: 1; } + to { transform: translateX(-100%); opacity: 0; } +} + +@keyframes slideOutRight { + from { transform: translateX(0); opacity: 1; } + to { transform: translateX(100%); opacity: 0; } +} + +/* === INDUSTRIAL EFFECTS === */ + +/* Precision reveal — content appears with a mechanical wipe */ +@keyframes wipeReveal { + from { clip-path: inset(0 100% 0 0); } + to { clip-path: inset(0 0 0 0); } +} + +/* Bottom-up reveal — like a gauge filling */ +@keyframes fillReveal { + from { clip-path: inset(100% 0 0 0); } + to { clip-path: inset(0 0 0 0); } +} + +/* Pulse line glow — dark theme data highlight */ +@keyframes pulseGlow { + 0%, 100% { box-shadow: 0px 0px 8px rgba(155, 202, 255, 0.4); } + 50% { box-shadow: 0px 0px 16px rgba(155, 202, 255, 0.7); } +} + +/* Number counter effect — for KPI reveals */ +@keyframes countUp { + from { opacity: 0; transform: translateY(8px); } + to { opacity: 1; transform: translateY(0); } +} + +/* Stagger delay utility for child elements */ +@keyframes staggerFadeIn { + from { opacity: 0; transform: translateY(16px); } + to { opacity: 1; transform: translateY(0); } +} + +/* === CHART ANIMATIONS === */ + +@keyframes drawLine { + from { stroke-dashoffset: 1000; } + to { stroke-dashoffset: 0; } +} + +@keyframes barGrow { + from { transform: scaleY(0); transform-origin: bottom; } + to { transform: scaleY(1); transform-origin: bottom; } +} + +@keyframes pieReveal { + from { stroke-dashoffset: 314; } + to { stroke-dashoffset: 0; } +} + +/* === UTILITY CLASSES === */ + +.animate-fade-in { animation: fadeIn 300ms ease-out both; } +.animate-fade-in-up { animation: fadeInUp 300ms ease-out both; } +.animate-fade-in-down { animation: fadeInDown 300ms ease-out both; } +.animate-fade-in-left { animation: fadeInLeft 300ms ease-out both; } +.animate-fade-in-right { animation: fadeInRight 300ms ease-out both; } +.animate-scale-in { animation: scaleIn 300ms ease-out both; } +.animate-wipe-reveal { animation: wipeReveal 500ms ease-in-out both; } +.animate-fill-reveal { animation: fillReveal 500ms ease-in-out both; } +.animate-pulse-glow { animation: pulseGlow 2s ease-in-out infinite; } + +/* Slide transition classes */ +.slide-enter { animation: slideInRight 300ms ease-out both; } +.slide-enter-reverse { animation: slideInLeft 300ms ease-out both; } +.slide-exit { animation: slideOutLeft 300ms ease-out both; } +.slide-exit-reverse { animation: slideOutRight 300ms ease-out both; } + +/* Stagger children — apply to parent, children auto-stagger */ +.stagger-children > * { + animation: staggerFadeIn 300ms ease-out both; +} +.stagger-children > *:nth-child(1) { animation-delay: 0ms; } +.stagger-children > *:nth-child(2) { animation-delay: 80ms; } +.stagger-children > *:nth-child(3) { animation-delay: 160ms; } +.stagger-children > *:nth-child(4) { animation-delay: 240ms; } +.stagger-children > *:nth-child(5) { animation-delay: 320ms; } +.stagger-children > *:nth-child(6) { animation-delay: 400ms; } +.stagger-children > *:nth-child(7) { animation-delay: 480ms; } +.stagger-children > *:nth-child(8) { animation-delay: 560ms; } + +/* Delay modifiers */ +.delay-100 { animation-delay: 100ms; } +.delay-200 { animation-delay: 200ms; } +.delay-300 { animation-delay: 300ms; } +.delay-400 { animation-delay: 400ms; } +.delay-500 { animation-delay: 500ms; } +.delay-600 { animation-delay: 600ms; } + +/* Duration modifiers */ +.duration-fast { animation-duration: 150ms; } +.duration-normal { animation-duration: 300ms; } +.duration-slow { animation-duration: 500ms; } + +/* === REDUCED MOTION === */ + +@media (prefers-reduced-motion: reduce) { + *, *::before, *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} diff --git a/.claude/skills/design-system/assets/design-tokens.css b/.claude/skills/design-system/assets/design-tokens.css new file mode 100644 index 000000000..7cd1ec4e3 --- /dev/null +++ b/.claude/skills/design-system/assets/design-tokens.css @@ -0,0 +1,180 @@ +/* Andritz Precision — Design Tokens (Auto-generated) */ +/* Do not edit directly — modify design-tokens-starter.json instead */ + +/* === PRIMITIVES === */ +:root { + --primitive-color-andritz-blue-50: #f0f7ff; + --primitive-color-andritz-blue-100: #e0efff; + --primitive-color-andritz-blue-200: #c6dfff; + --primitive-color-andritz-blue-300: #9bcaff; + --primitive-color-andritz-blue-400: #4d9fd4; + --primitive-color-andritz-blue-500: #0075be; + --primitive-color-andritz-blue-600: #005c97; + --primitive-color-andritz-blue-700: #004a77; + --primitive-color-andritz-blue-800: #003258; + --primitive-color-andritz-blue-900: #001c38; + --primitive-color-surface-light-lowest: #ffffff; + --primitive-color-surface-light-low: #f8fafb; + --primitive-color-surface-light-base: #f2f4f5; + --primitive-color-surface-light-mid: #eceeef; + --primitive-color-surface-light-high: #e6e8e9; + --primitive-color-surface-light-highest: #e1e3e4; + --primitive-color-surface-dark-lowest: #0a0e14; + --primitive-color-surface-dark-low: #10141a; + --primitive-color-surface-dark-base: #181c22; + --primitive-color-surface-dark-mid: #1c2026; + --primitive-color-surface-dark-high: #262a31; + --primitive-color-surface-dark-highest: #31353c; + --primitive-color-neutral-50: #f5f7fa; + --primitive-color-neutral-100: #eef1f6; + --primitive-color-neutral-200: #dfe2eb; + --primitive-color-neutral-300: #c0c7d2; + --primitive-color-neutral-500: #4b5a69; + --primitive-color-neutral-600: #49607f; + --primitive-color-neutral-700: #404751; + --primitive-color-neutral-900: #191c1d; + --primitive-color-neutral-950: #001c38; + --primitive-color-error-100: #ffdad6; + --primitive-color-error-300: #ffb4ab; + --primitive-color-error-400: #ff6b6b; + --primitive-color-error-600: #ba1a1a; + --primitive-color-tertiary-200: #ffe4cc; + --primitive-color-tertiary-400: #ffc9a0; + --primitive-color-tertiary-500: #ffb781; + --primitive-color-success-100: #dcfce7; + --primitive-color-success-400: #4ade80; + --primitive-color-success-600: #1a8a4a; + --primitive-spacing-0: 0; + --primitive-spacing-1: 0.25rem; + --primitive-spacing-2: 0.5rem; + --primitive-spacing-3: 0.75rem; + --primitive-spacing-4: 1rem; + --primitive-spacing-5: 1.25rem; + --primitive-spacing-6: 1.5rem; + --primitive-spacing-8: 2rem; + --primitive-spacing-10: 2.5rem; + --primitive-spacing-12: 3rem; + --primitive-spacing-16: 4rem; + --primitive-spacing-20: 5rem; + --primitive-spacing-24: 6rem; + --primitive-spacing-32: 8rem; + --primitive-typography-font-family-primary: 'Inter', system-ui, -apple-system, sans-serif; + --primitive-typography-font-family-premium: 'Gilroy', 'Inter', system-ui, sans-serif; + --primitive-typography-font-size-display-lg: 3.5rem; + --primitive-typography-font-size-display-md: 2.75rem; + --primitive-typography-font-size-display-sm: 2.25rem; + --primitive-typography-font-size-headline-lg: 2rem; + --primitive-typography-font-size-headline-md: 1.75rem; + --primitive-typography-font-size-headline-sm: 1.5rem; + --primitive-typography-font-size-title-lg: 1.375rem; + --primitive-typography-font-size-title-md: 1.125rem; + --primitive-typography-font-size-title-sm: 1rem; + --primitive-typography-font-size-body-lg: 1rem; + --primitive-typography-font-size-body-md: 0.875rem; + --primitive-typography-font-size-body-sm: 0.75rem; + --primitive-typography-font-size-label-md: 0.75rem; + --primitive-typography-font-size-label-sm: 0.6875rem; + --primitive-typography-font-weight-regular: 400; + --primitive-typography-font-weight-medium: 500; + --primitive-typography-font-weight-semibold: 600; + --primitive-typography-font-weight-bold: 700; + --primitive-typography-letter-spacing-tight: -0.02em; + --primitive-typography-letter-spacing-normal: 0; + --primitive-typography-letter-spacing-wide: 0.05em; + --primitive-typography-letter-spacing-wider: 0.1em; + --primitive-radius-none: 0px; + --primitive-radius-full: 9999px; + --primitive-shadow-ambient-light: 0px 12px 32px 0px rgba(0, 28, 56, 0.06); + --primitive-shadow-ambient-dark: 0px 12px 32px 0px rgba(0, 28, 56, 0.4); + --primitive-shadow-glow-primary: 0px 0px 8px #9bcaff; + --primitive-duration-fast: 150ms; + --primitive-duration-normal: 200ms; + --primitive-duration-slow: 300ms; +} + +/* === SEMANTIC (Light Theme) === */ +:root { + --surface-default: #f8fafb; + --surface-container: #eceeef; + --surface-container-low: #f2f4f5; + --surface-container-high: #e6e8e9; + --surface-container-highest: #e1e3e4; + --surface-container-lowest: #ffffff; + --on-surface-default: #191c1d; + --on-surface-variant: #404751; + --primary-default: #0075be; + --primary-text: #005c97; + --primary-container: #0075be; + --primary-on-primary: #ffffff; + --primary-fixed-dim: #9bcaff; + --error-default: #ba1a1a; + --error-container: #ffdad6; + --error-on-error: #ffffff; + --outline-variant: #c0c7d2; + --ghost-border-opacity: 0.15; + --border: transparent; +} + +/* === COMPONENTS === */ +:root { + --button-primary-bg-gradient: linear-gradient(135deg, #005c97, #0075be); + --button-primary-fg: #ffffff; + --button-secondary-bg: #e6e8e9; + --button-secondary-fg: #005c97; + --button-radius: 0px; + --button-padding-x: 1.5rem; + --button-padding-y: 0.5rem; + --button-active-scale: 0.98; + --button-text-transform: uppercase; + --button-letter-spacing: 0.05em; + --input-bg: #e1e3e4; + --input-fg: #191c1d; + --input-border: none; + --input-focus-border-bottom: 2px solid #0075be; + --input-error-bg: #ffdad6; + --input-radius: 0px; + --card-bg: #ffffff; + --card-fg: #191c1d; + --card-border: none; + --card-shadow: none; + --card-shadow-elevated: 0px 12px 32px 0px rgba(0, 28, 56, 0.06); + --card-radius: 0px; + --card-padding: 1.5rem; + --card-zone-gap: 2rem; + --dialog-overlay-bg: rgba(0, 28, 56, 0.5); + --dialog-bg: #ffffff; + --dialog-backdrop-blur: 20px; + --dialog-surface-opacity: 0.85; + --dialog-radius: 0px; + --dialog-shadow: 0px 12px 32px 0px rgba(0, 28, 56, 0.06); + --badge-radius: 0px; + --badge-text-transform: uppercase; + --badge-letter-spacing: 0.05em; + --table-border: none; + --table-header-transform: uppercase; + --table-header-tracking: 0.05em; + --table-row-separator: 2rem; +} + +/* === SEMANTIC (Dark Theme) === */ +.dark { + --surface-default: #10141a; + --surface-container: #1c2026; + --surface-container-low: #181c22; + --surface-container-high: #262a31; + --surface-container-highest: #31353c; + --surface-container-lowest: #0a0e14; + --on-surface-default: #dfe2eb; + --on-surface-variant: #c0c7d2; + --primary-default: #0075be; + --primary-text: #9bcaff; + --primary-container: #0075be; + --primary-on-primary: #ffffff; + --primary-fixed-dim: #9bcaff; + --tertiary: #ffb781; + --error-default: #ffb4ab; + --error-container: #93000a; + --error-on-error: #ffdad6; + --outline-variant: #404751; + --ghost-border-opacity: 0.20; +} diff --git a/.claude/skills/design-system/assets/design-tokens.json b/.claude/skills/design-system/assets/design-tokens.json new file mode 100644 index 000000000..9d39d6859 --- /dev/null +++ b/.claude/skills/design-system/assets/design-tokens.json @@ -0,0 +1,255 @@ +{ + "$schema": "https://design-tokens.github.io/community-group/format/", + "andritz-precision": { + "$description": "Andritz Precision Industrial Design System — The Monolithic Engine", + + "primitive": { + "$description": "Raw design values — foundation layer", + + "color": { + "andritz-blue": { + "900": { "$value": "#001c38", "$type": "color" }, + "800": { "$value": "#003258", "$type": "color" }, + "700": { "$value": "#004a77", "$type": "color" }, + "600": { "$value": "#005c97", "$type": "color" }, + "500": { "$value": "#0075be", "$type": "color" }, + "400": { "$value": "#4d9fd4", "$type": "color" }, + "300": { "$value": "#9bcaff", "$type": "color" }, + "200": { "$value": "#c6dfff", "$type": "color" }, + "100": { "$value": "#e0efff", "$type": "color" }, + "50": { "$value": "#f0f7ff", "$type": "color" } + }, + "surface-light": { + "lowest": { "$value": "#ffffff", "$type": "color" }, + "low": { "$value": "#f8fafb", "$type": "color" }, + "base": { "$value": "#f2f4f5", "$type": "color" }, + "mid": { "$value": "#eceeef", "$type": "color" }, + "high": { "$value": "#e6e8e9", "$type": "color" }, + "highest": { "$value": "#e1e3e4", "$type": "color" } + }, + "surface-dark": { + "lowest": { "$value": "#0a0e14", "$type": "color" }, + "low": { "$value": "#10141a", "$type": "color" }, + "base": { "$value": "#181c22", "$type": "color" }, + "mid": { "$value": "#1c2026", "$type": "color" }, + "high": { "$value": "#262a31", "$type": "color" }, + "highest": { "$value": "#31353c", "$type": "color" } + }, + "neutral": { + "950": { "$value": "#001c38", "$type": "color", "$description": "Deepest black — replaces pure #000000" }, + "900": { "$value": "#191c1d", "$type": "color" }, + "700": { "$value": "#404751", "$type": "color" }, + "600": { "$value": "#49607f", "$type": "color" }, + "500": { "$value": "#4b5a69", "$type": "color" }, + "300": { "$value": "#c0c7d2", "$type": "color" }, + "200": { "$value": "#dfe2eb", "$type": "color" }, + "100": { "$value": "#eef1f6", "$type": "color" }, + "50": { "$value": "#f5f7fa", "$type": "color" } + }, + "error": { + "600": { "$value": "#ba1a1a", "$type": "color" }, + "400": { "$value": "#ff6b6b", "$type": "color" }, + "300": { "$value": "#ffb4ab", "$type": "color" }, + "100": { "$value": "#ffdad6", "$type": "color" } + }, + "tertiary": { + "500": { "$value": "#ffb781", "$type": "color", "$description": "Warning/caution tape" }, + "400": { "$value": "#ffc9a0", "$type": "color" }, + "200": { "$value": "#ffe4cc", "$type": "color" } + }, + "success": { + "600": { "$value": "#1a8a4a", "$type": "color" }, + "400": { "$value": "#4ade80", "$type": "color" }, + "100": { "$value": "#dcfce7", "$type": "color" } + } + }, + + "spacing": { + "0": { "$value": "0", "$type": "dimension" }, + "1": { "$value": "0.25rem", "$type": "dimension" }, + "2": { "$value": "0.5rem", "$type": "dimension" }, + "3": { "$value": "0.75rem", "$type": "dimension" }, + "4": { "$value": "1rem", "$type": "dimension" }, + "5": { "$value": "1.25rem", "$type": "dimension" }, + "6": { "$value": "1.5rem", "$type": "dimension" }, + "8": { "$value": "2rem", "$type": "dimension", "$description": "Zone separation (32px)" }, + "10": { "$value": "2.5rem", "$type": "dimension" }, + "12": { "$value": "3rem", "$type": "dimension", "$description": "Section gap (48px)" }, + "16": { "$value": "4rem", "$type": "dimension" }, + "20": { "$value": "5rem", "$type": "dimension" }, + "24": { "$value": "6rem", "$type": "dimension" }, + "32": { "$value": "8rem", "$type": "dimension", "$description": "Hero spacing (128px)" } + }, + + "typography": { + "font-family": { + "primary": { "$value": "'Inter', system-ui, -apple-system, sans-serif", "$type": "fontFamily" }, + "premium": { "$value": "'Gilroy', 'Inter', system-ui, sans-serif", "$type": "fontFamily" } + }, + "font-size": { + "display-lg": { "$value": "3.5rem", "$type": "dimension" }, + "display-md": { "$value": "2.75rem", "$type": "dimension" }, + "display-sm": { "$value": "2.25rem", "$type": "dimension" }, + "headline-lg": { "$value": "2rem", "$type": "dimension" }, + "headline-md": { "$value": "1.75rem", "$type": "dimension" }, + "headline-sm": { "$value": "1.5rem", "$type": "dimension" }, + "title-lg": { "$value": "1.375rem", "$type": "dimension" }, + "title-md": { "$value": "1.125rem", "$type": "dimension" }, + "title-sm": { "$value": "1rem", "$type": "dimension" }, + "body-lg": { "$value": "1rem", "$type": "dimension" }, + "body-md": { "$value": "0.875rem", "$type": "dimension" }, + "body-sm": { "$value": "0.75rem", "$type": "dimension" }, + "label-md": { "$value": "0.75rem", "$type": "dimension" }, + "label-sm": { "$value": "0.6875rem", "$type": "dimension" } + }, + "font-weight": { + "regular": { "$value": 400, "$type": "fontWeight" }, + "medium": { "$value": 500, "$type": "fontWeight" }, + "semibold": { "$value": 600, "$type": "fontWeight" }, + "bold": { "$value": 700, "$type": "fontWeight" } + }, + "letter-spacing": { + "tight": { "$value": "-0.02em", "$type": "dimension", "$description": "Headlines — technical manual" }, + "normal": { "$value": "0", "$type": "dimension" }, + "wide": { "$value": "0.05em", "$type": "dimension", "$description": "Labels — machined look" }, + "wider": { "$value": "0.1em", "$type": "dimension", "$description": "Display pairs — engineering drawing" } + } + }, + + "radius": { + "none": { "$value": "0px", "$type": "dimension", "$description": "DEFAULT — Industrial Precision" }, + "full": { "$value": "9999px", "$type": "dimension", "$description": "Only for avatars/status indicators" } + }, + + "shadow": { + "ambient-light": { "$value": "0px 12px 32px 0px rgba(0, 28, 56, 0.06)", "$type": "shadow" }, + "ambient-dark": { "$value": "0px 12px 32px 0px rgba(0, 28, 56, 0.4)", "$type": "shadow" }, + "glow-primary": { "$value": "0px 0px 8px #9bcaff", "$type": "shadow", "$description": "Dark theme pulse line" } + }, + + "duration": { + "fast": { "$value": "150ms", "$type": "duration" }, + "normal": { "$value": "200ms", "$type": "duration" }, + "slow": { "$value": "300ms", "$type": "duration" } + } + }, + + "semantic": { + "$description": "Purpose-based aliases — light theme (default)", + + "surface": { + "default": { "$value": "{primitive.color.surface-light.low}", "$type": "color" }, + "container": { "$value": "{primitive.color.surface-light.mid}", "$type": "color" }, + "container-low": { "$value": "{primitive.color.surface-light.base}", "$type": "color" }, + "container-high": { "$value": "{primitive.color.surface-light.high}", "$type": "color" }, + "container-highest": { "$value": "{primitive.color.surface-light.highest}", "$type": "color" }, + "container-lowest": { "$value": "{primitive.color.surface-light.lowest}", "$type": "color" } + }, + "on-surface": { + "default": { "$value": "{primitive.color.neutral.900}", "$type": "color" }, + "variant": { "$value": "{primitive.color.neutral.700}", "$type": "color" } + }, + "primary": { + "default": { "$value": "{primitive.color.andritz-blue.500}", "$type": "color" }, + "text": { "$value": "{primitive.color.andritz-blue.600}", "$type": "color" }, + "container": { "$value": "{primitive.color.andritz-blue.500}", "$type": "color" }, + "on-primary": { "$value": "#ffffff", "$type": "color" }, + "fixed-dim": { "$value": "{primitive.color.andritz-blue.300}", "$type": "color" } + }, + "error": { + "default": { "$value": "{primitive.color.error.600}", "$type": "color" }, + "container": { "$value": "{primitive.color.error.100}", "$type": "color" }, + "on-error": { "$value": "#ffffff", "$type": "color" } + }, + "outline-variant": { "$value": "{primitive.color.neutral.300}", "$type": "color" }, + "ghost-border-opacity": { "$value": "0.15", "$type": "number" }, + "border": { "$value": "transparent", "$type": "color", "$description": "No-Line Rule" } + }, + + "semantic-dark": { + "$description": "Purpose-based aliases — dark theme overrides", + + "surface": { + "default": { "$value": "{primitive.color.surface-dark.low}", "$type": "color" }, + "container": { "$value": "{primitive.color.surface-dark.mid}", "$type": "color" }, + "container-low": { "$value": "{primitive.color.surface-dark.base}", "$type": "color" }, + "container-high": { "$value": "{primitive.color.surface-dark.high}", "$type": "color" }, + "container-highest": { "$value": "{primitive.color.surface-dark.highest}", "$type": "color" }, + "container-lowest": { "$value": "{primitive.color.surface-dark.lowest}", "$type": "color" } + }, + "on-surface": { + "default": { "$value": "{primitive.color.neutral.200}", "$type": "color" }, + "variant": { "$value": "{primitive.color.neutral.300}", "$type": "color" } + }, + "primary": { + "default": { "$value": "{primitive.color.andritz-blue.500}", "$type": "color" }, + "text": { "$value": "{primitive.color.andritz-blue.300}", "$type": "color" }, + "container": { "$value": "{primitive.color.andritz-blue.500}", "$type": "color" }, + "on-primary": { "$value": "#ffffff", "$type": "color" }, + "fixed-dim": { "$value": "{primitive.color.andritz-blue.300}", "$type": "color" } + }, + "tertiary": { "$value": "{primitive.color.tertiary.500}", "$type": "color", "$description": "Caution tape — high contrast on navy" }, + "error": { + "default": { "$value": "{primitive.color.error.300}", "$type": "color" }, + "container": { "$value": "#93000a", "$type": "color" }, + "on-error": { "$value": "{primitive.color.error.100}", "$type": "color" } + }, + "outline-variant": { "$value": "{primitive.color.neutral.700}", "$type": "color" }, + "ghost-border-opacity": { "$value": "0.20", "$type": "number" } + }, + + "component": { + "$description": "Component-specific tokens", + + "button": { + "primary-bg-gradient": { "$value": "linear-gradient(135deg, {semantic.primary.text}, {semantic.primary.default})", "$type": "gradient" }, + "primary-fg": { "$value": "{semantic.primary.on-primary}", "$type": "color" }, + "secondary-bg": { "$value": "{semantic.surface.container-high}", "$type": "color" }, + "secondary-fg": { "$value": "{semantic.primary.text}", "$type": "color" }, + "radius": { "$value": "{primitive.radius.none}", "$type": "dimension" }, + "padding-x": { "$value": "{primitive.spacing.6}", "$type": "dimension" }, + "padding-y": { "$value": "{primitive.spacing.2}", "$type": "dimension" }, + "active-scale": { "$value": "0.98", "$type": "number" }, + "text-transform": { "$value": "uppercase", "$type": "string" }, + "letter-spacing": { "$value": "{primitive.typography.letter-spacing.wide}", "$type": "dimension" } + }, + "input": { + "bg": { "$value": "{semantic.surface.container-highest}", "$type": "color" }, + "fg": { "$value": "{semantic.on-surface.default}", "$type": "color" }, + "border": { "$value": "none", "$type": "string", "$description": "No-Line Rule" }, + "focus-border-bottom": { "$value": "2px solid {semantic.primary.default}", "$type": "string" }, + "error-bg": { "$value": "{semantic.error.container}", "$type": "color" }, + "radius": { "$value": "{primitive.radius.none}", "$type": "dimension" } + }, + "card": { + "bg": { "$value": "{semantic.surface.container-lowest}", "$type": "color" }, + "fg": { "$value": "{semantic.on-surface.default}", "$type": "color" }, + "border": { "$value": "none", "$type": "string", "$description": "No-Line Rule" }, + "shadow": { "$value": "none", "$type": "shadow" }, + "shadow-elevated": { "$value": "{primitive.shadow.ambient-light}", "$type": "shadow" }, + "radius": { "$value": "{primitive.radius.none}", "$type": "dimension" }, + "padding": { "$value": "{primitive.spacing.6}", "$type": "dimension" }, + "zone-gap": { "$value": "{primitive.spacing.8}", "$type": "dimension" } + }, + "dialog": { + "overlay-bg": { "$value": "rgba(0, 28, 56, 0.5)", "$type": "color" }, + "bg": { "$value": "{semantic.surface.container-lowest}", "$type": "color" }, + "backdrop-blur": { "$value": "20px", "$type": "dimension" }, + "surface-opacity": { "$value": "0.85", "$type": "number" }, + "radius": { "$value": "{primitive.radius.none}", "$type": "dimension" }, + "shadow": { "$value": "{primitive.shadow.ambient-light}", "$type": "shadow" } + }, + "badge": { + "radius": { "$value": "{primitive.radius.none}", "$type": "dimension" }, + "text-transform": { "$value": "uppercase", "$type": "string" }, + "letter-spacing": { "$value": "{primitive.typography.letter-spacing.wide}", "$type": "dimension" } + }, + "table": { + "border": { "$value": "none", "$type": "string", "$description": "No divider lines — use whitespace or tonal shift" }, + "header-transform": { "$value": "uppercase", "$type": "string" }, + "header-tracking": { "$value": "{primitive.typography.letter-spacing.wide}", "$type": "dimension" }, + "row-separator": { "$value": "{primitive.spacing.8}", "$type": "dimension", "$description": "32px whitespace OR tonal shift" } + } + } + } +} diff --git a/.claude/skills/design-system/docs/brand-guidelines.md b/.claude/skills/design-system/docs/brand-guidelines.md new file mode 100644 index 000000000..7da63e738 --- /dev/null +++ b/.claude/skills/design-system/docs/brand-guidelines.md @@ -0,0 +1,188 @@ +# Andritz Brand Guidelines + +## Brand Identity + +**Andritz** is a global technology group providing plants, equipment, and services for various industries. The digital design system reflects the brand's core values: **precision engineering**, **industrial authority**, and **reliable performance**. + +### Creative North Star: "The Monolithic Engine" + +> UI as a high-performance machine — solid, authoritative, deeply layered. Every surface is a machined plate. Every interaction is a precision mechanism. + +## Brand Voice + +| Attribute | Description | +|-----------|-------------| +| **Authoritative** | Speak with confidence and technical clarity | +| **Precise** | No ambiguity, no decoration for decoration's sake | +| **Professional** | Industrial-grade communication — clear, structured, direct | +| **Trustworthy** | Consistency breeds trust — uniform language across all touchpoints | + +### Writing Style + +- Use **active voice** and direct language +- Lead with **data and results**, not adjectives +- Technical terms are preferred over marketing jargon +- Labels and badges: **ALL CAPS** with wide tracking (+0.05em) +- Units always accompany values: "450 kg/h", "2,847 UNITS PROCESSED" + +## Brand Colors + +### Primary — Andritz Blue + +The Andritz Blue is the signature brand color, used for primary actions, key indicators, and brand identification. + +| Token | Hex | Usage | +|-------|-----|-------| +| andritz-blue-900 | `#001c38` | Deepest navy (replaces pure black) | +| andritz-blue-800 | `#003258` | Dark backgrounds, overlays | +| andritz-blue-700 | `#004a77` | Hover states on primary | +| andritz-blue-600 | `#005c97` | Text on light backgrounds | +| **andritz-blue-500** | **`#0075be`** | **Primary brand color — CTAs, containers** | +| andritz-blue-400 | `#4d9fd4` | Secondary highlights | +| andritz-blue-300 | `#9bcaff` | Primary text on dark backgrounds, glow effects | +| andritz-blue-200 | `#c6dfff` | Light tints, backgrounds | +| andritz-blue-100 | `#e0efff` | Subtle highlights | +| andritz-blue-50 | `#f0f7ff` | Lightest tint | + +### Neutrals + +| Token | Hex | Usage | +|-------|-----|-------| +| neutral-950 | `#001c38` | Deepest text (navy-black, not pure black) | +| neutral-900 | `#191c1d` | Primary text (light theme) | +| neutral-700 | `#404751` | Secondary text, labels | +| neutral-600 | `#49607f` | Tertiary text | +| neutral-300 | `#c0c7d2` | Outline variants (light) | +| neutral-200 | `#dfe2eb` | Primary text (dark theme) | +| neutral-100 | `#eef1f6` | Subtle backgrounds | +| neutral-50 | `#f5f7fa` | Near-white | + +### Status Colors + +| Status | Color | Hex | Usage | +|--------|-------|-----|-------| +| Error | Red | `#ba1a1a` | Critical alerts, destructive actions | +| Error container | Light red | `#ffdad6` | Error background | +| Warning | Amber | `#ffb781` | Caution tape — high contrast on dark | +| Success | Green | `#1a8a4a` | Positive confirmation | + +### Surface Hierarchy + +#### Light Theme + +| Tier | Hex | Role | +|------|-----|------| +| lowest | `#ffffff` | Cards, popovers (highest elevation) | +| low | `#f8fafb` | Page background | +| base | `#f2f4f5` | Container-low | +| mid | `#eceeef` | Container default | +| high | `#e6e8e9` | Secondary button bg, container-high | +| highest | `#e1e3e4` | Input background, container-highest | + +#### Dark Theme + +| Tier | Hex | Role | +|------|-----|------| +| lowest | `#0a0e14` | Deepest dark background | +| low | `#10141a` | Page background | +| base | `#181c22` | Container-low | +| mid | `#1c2026` | Container default | +| high | `#262a31` | Container-high | +| highest | `#31353c` | Container-highest | + +## Typography + +### Font Stack + +| Role | Font | Fallback | +|------|------|----------| +| Primary | Inter | system-ui, -apple-system, sans-serif | +| Premium | Gilroy | Inter, system-ui, sans-serif | + +### Type Scale + +| Level | Size | Weight | Use | +|-------|------|--------|-----| +| display-lg | 3.5rem (56px) | Bold | Hero metrics, KPIs | +| display-md | 2.75rem (44px) | Bold | Section heroes | +| display-sm | 2.25rem (36px) | Bold | Card headlines | +| headline-lg | 2rem (32px) | Semibold | Page titles | +| headline-md | 1.75rem (28px) | Semibold | Section titles | +| headline-sm | 1.5rem (24px) | Semibold | Sub-sections | +| title-lg | 1.375rem (22px) | Medium | Card titles | +| title-md | 1.125rem (18px) | Medium | Sub-titles | +| title-sm | 1rem (16px) | Medium | Data values | +| body-lg | 1rem (16px) | Regular | Body text | +| body-md | 0.875rem (14px) | Regular | Default body | +| body-sm | 0.75rem (12px) | Regular | Captions | +| label-md | 0.75rem (12px) | Medium | Labels (ALL CAPS) | +| label-sm | 0.6875rem (11px) | Medium | Small labels (ALL CAPS) | + +### Letter Spacing + +| Name | Value | Usage | +|------|-------|-------| +| tight | -0.02em | Headlines — technical manual feel | +| normal | 0 | Body text | +| wide | +0.05em | Labels, buttons — machined look | +| wider | +0.1em | Display pairs — engineering drawing | + +## Visual Rules + +### 1. Industrial Precision — 0px Border Radius + +All components use `border-radius: 0px`. No rounded corners. The only exception is `border-radius: 9999px` for avatars and status dot indicators. + +### 2. The No-Line Rule + +Never use `1px solid` borders for sectioning or containment. Create visual separation through: +- **Tonal shifts** (surface hierarchy stepping) +- **Whitespace** (32px zone gaps) +- **Ghost borders** (outline-variant at 15%/20% opacity — only when required) + +### 3. Glass & Gradient Rule + +- **Primary buttons**: `linear-gradient(135deg, #005c97, #0075be)` — gradient CTAs +- **Overlays**: Surface at 85% opacity + 20px backdrop-blur — "Industrial Frost" +- **Ambient shadows**: `0px 12px 32px 0px rgba(0, 28, 56, 0.06)` — navy-tinted, never pure black + +### 4. Data Presentation + +- Primary metric: `display-lg` (56px) — "stamped metal" effect +- Unit label below: `label-sm` (ALL CAPS, +0.05em tracking) +- Example: **2,847** / TOTAL UNITS PROCESSED +- Always right-align numbers, left-align text + +### 5. Dark Theme Specifics + +- Text accent: `#9bcaff` (andritz-blue-300) — not white-on-blue +- Warning: `#ffb781` (tertiary) — "caution tape" high contrast on navy +- Pulse line glow: `0px 0px 8px #9bcaff` — for active data highlights +- Ghost border opacity increases from 15% to 20% + +## Logo Usage + +- Maintain clear space equal to the height of the "A" in ANDRITZ +- Minimum size: 24px height for digital +- On dark backgrounds: use white or andritz-blue-300 (#9bcaff) logo variant +- On light backgrounds: use andritz-blue-900 (#001c38) logo variant +- Never rotate, stretch, or add effects to the logo + +## Do's and Don'ts + +### Do +- Use tonal layering for depth +- Apply 0px radius everywhere +- Use gradients for primary CTAs only +- Use ALL CAPS with wide tracking for labels +- Present data with generous whitespace (32px+ gaps) +- Use navy-tinted shadows, never pure black + +### Don't +- Use rounded corners (not even "slightly rounded") +- Use 1px borders for sectioning +- Use pure black (#000000) — use neutral-950 (#001c38) instead +- Add decorative icons without functional purpose +- Use flat opacity for disabled states — use muted surface tiers +- Mix brand colors outside the defined palette +- Use shadows with pure-black opacity values diff --git a/.claude/skills/design-system/references/component-specs.md b/.claude/skills/design-system/references/component-specs.md index cc7821b33..a05545254 100644 --- a/.claude/skills/design-system/references/component-specs.md +++ b/.claude/skills/design-system/references/component-specs.md @@ -1,220 +1,220 @@ -# Component Specifications +# Component Specifications — Andritz Precision -Detailed specs for core components with states and variants. +Detailed specs for industrial components. All components enforce 0px radius, the No-Line Rule, and tonal layering. -## Button +## Button — "Machined Control" ### Variants | Variant | Background | Text | Border | Use Case | |---------|------------|------|--------|----------| -| default | primary | white | none | Primary actions | -| secondary | gray-100 | gray-900 | none | Secondary actions | -| outline | transparent | foreground | border | Tertiary actions | -| ghost | transparent | foreground | none | Subtle actions | -| link | transparent | primary | none | Navigation | -| destructive | red-600 | white | none | Dangerous actions | +| primary | gradient(135deg, #005c97, #0075be) | white | none | Primary CTA | +| secondary | surface-container-high (#e6e8e9) | primary-text (#005c97) | none | Secondary actions | +| tertiary | transparent | primary-text, ALL CAPS | 2px bottom underline on hover | Subtle/text actions | +| destructive | error (#ba1a1a) | white | none | Dangerous actions | +| ghost | transparent | on-surface | none | Minimal actions | ### Sizes -| Size | Height | Padding X | Padding Y | Font Size | Icon Size | -|------|--------|-----------|-----------|-----------|-----------| -| sm | 32px | 12px | 6px | 14px | 16px | -| default | 40px | 16px | 8px | 14px | 18px | -| lg | 48px | 24px | 12px | 16px | 20px | -| icon | 40px | 0 | 0 | - | 18px | +| Size | Height | Padding X | Padding Y | Font Size | Letter Spacing | +|------|--------|-----------|-----------|-----------|----------------| +| sm | 32px | 16px | 6px | 12px (label) | +0.05em | +| default | 40px | 24px | 8px | 12px (label) | +0.05em | +| lg | 48px | 32px | 12px | 14px | +0.05em | ### States -| State | Background | Text | Opacity | Cursor | -|-------|------------|------|---------|--------| -| default | token | token | 1 | pointer | -| hover | darker | token | 1 | pointer | -| active | darkest | token | 1 | pointer | -| focus | token | token | 1 | pointer | -| disabled | muted | muted-fg | 0.5 | not-allowed | -| loading | token | token | 0.7 | wait | +| State | Background | Transform | Cursor | +|-------|------------|-----------|--------| +| default | token | none | pointer | +| hover | slightly darker gradient | none | pointer | +| active | gradient | scale(0.98) | pointer | +| focus | token + ghost-border | none | pointer | +| disabled | surface-container | none | not-allowed | ### Anatomy ``` ┌─────────────────────────────────────┐ -│ [icon] Label Text [icon] │ +│ [icon] LABEL TEXT [icon] │ ← ALL CAPS, +0.05em tracking └─────────────────────────────────────┘ - ↑ ↑ - leading icon trailing icon + ↑ 0px radius ↑ + leading trailing + (functional only) (functional only) ``` --- -## Input - -### Variants - -| Variant | Description | -|---------|-------------| -| default | Standard text input | -| textarea | Multi-line text | -| select | Dropdown selection | -| checkbox | Boolean toggle | -| radio | Single selection | -| switch | Toggle switch | +## Input — "Technical Ledger" ### Sizes | Size | Height | Padding | Font Size | |------|--------|---------|-----------| | sm | 32px | 8px 12px | 14px | -| default | 40px | 8px 12px | 14px | +| default | 40px | 8px 16px | 14px | | lg | 48px | 12px 16px | 16px | ### States -| State | Border | Background | Ring | -|-------|--------|------------|------| -| default | gray-300 | white | none | -| hover | gray-400 | white | none | -| focus | primary | white | primary/20% | -| error | red-500 | white | red/20% | -| disabled | gray-200 | gray-100 | none | +| State | Background | Bottom Border | Ring | +|-------|------------|---------------|------| +| default | surface-container-highest (#e1e3e4) | none | none | +| hover | surface-container-highest | 1px on-surface-variant | none | +| focus | surface-container-highest | 2px solid primary (#005c97) | none | +| error | error-container (#ffdad6) | 2px solid error (#ba1a1a) | none | +| disabled | surface-container (#eceeef) | none | none | ### Anatomy ``` -Label (optional) +LABEL (label-sm, ALL CAPS, +0.05em) ┌─────────────────────────────────────┐ -│ [icon] Placeholder/Value [action] │ -└─────────────────────────────────────┘ -Helper text or error message +│ [icon] Placeholder/Value │ ← 0px radius +│▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄│ ← bottom-border only on focus +Helper text (body-sm, on-surface-variant) ``` --- -## Card +## Card — "Machined Plate" ### Variants -| Variant | Shadow | Border | Use Case | -|---------|--------|--------|----------| -| default | sm | 1px | Standard card | -| elevated | lg | none | Prominent content | -| outline | none | 1px | Subtle container | -| interactive | sm→md | 1px | Clickable card | +| Variant | Background | Shadow | Border | Use Case | +|---------|------------|--------|--------|----------| +| default | surface-container-lowest (#fff) | none | none | Standard content | +| elevated | surface-container-lowest | ambient (0px 12px 32px) | none | Floating content | +| zone | surface-container | none | none | Data zone grouping | +| inset | surface-container-high | none | none | Nested detail | ### Anatomy ``` ┌─────────────────────────────────────┐ -│ Card Header │ -│ Title │ -│ Description │ -├─────────────────────────────────────┤ -│ Card Content │ -│ Main content area │ +│ Title (title-sm) │ │ │ -├─────────────────────────────────────┤ -│ Card Footer │ -│ Actions │ +│ Content area │ +│ │ ← NO divider lines +│ │ ← 32px whitespace between zones +│ Footer actions │ └─────────────────────────────────────┘ + 0px radius, no border ``` ### Spacing -| Area | Padding | -|------|---------| -| header | 24px 24px 0 | -| content | 24px | -| footer | 0 24px 24px | -| gap | 16px | +| Area | Value | +|------|-------| +| padding | 24px | +| internal gap | 16px | +| zone separation | 32px (whitespace, NOT a line) | +| between cards | 16–24px | + +### Data Density Rules + +- Primary values: `title-sm` (1rem, medium weight) +- Units/labels: `label-sm` (ALL CAPS, lighter weight) +- Example: "450 **kg/h**" — value in title-sm, unit in label-sm --- -## Badge +## Badge/Chip — "Status Indicator" ### Variants -| Variant | Background | Text | -|---------|------------|------| -| default | primary | white | -| secondary | gray-100 | gray-900 | -| outline | transparent | foreground | -| destructive | red-600 | white | -| success | green-600 | white | -| warning | yellow-500 | gray-900 | +| Variant | Background | Text | Use Case | +|---------|------------|------|----------| +| default | primary (#0075be) | white | Standard | +| secondary | secondary-container | on-surface | Subtle | +| warning | tertiary (#ffb781) | neutral-950 | Caution | +| error | error (#ba1a1a) | white | Critical | +| success | success-600 | white | Positive | -### Sizes +### Rules -| Size | Padding | Font Size | Height | -|------|---------|-----------|--------| -| sm | 4px 8px | 11px | 20px | -| default | 4px 10px | 12px | 24px | -| lg | 6px 12px | 14px | 28px | +- 0px radius (sharp corners) +- ALL CAPS text with +0.05em tracking +- No decorative icons — functional only +- Minimalist: secondary-container bg with label-md typography --- -## Alert +## Alert — "System Notification" ### Variants -| Variant | Icon | Background | Border | -|---------|------|------------|--------| -| default | info | gray-50 | gray-200 | -| destructive | alert | red-50 | red-200 | -| success | check | green-50 | green-200 | -| warning | warning | yellow-50 | yellow-200 | +| Variant | Background | Icon | Use Case | +|---------|------------|------|----------| +| default | surface-container | info | Informational | +| warning | tertiary at 15% opacity | warning | Caution | +| error | error-container (#ffdad6) | alert | Critical | +| success | success at 15% opacity | check | Positive | ### Anatomy ``` ┌─────────────────────────────────────┐ -│ [icon] Title [×]│ -│ Description text │ +│ [icon] ALERT TITLE [×]│ ← label typography, ALL CAPS +│ Description text body │ └─────────────────────────────────────┘ + 0px radius, no visible border ``` --- -## Dialog +## Dialog — "Industrial Frost Overlay" ### Sizes | Size | Max Width | Use Case | |------|-----------|----------| -| sm | 384px | Simple confirmations | -| default | 512px | Standard dialogs | +| sm | 384px | Confirmations | +| default | 512px | Standard | | lg | 640px | Complex forms | -| xl | 768px | Data-heavy dialogs | -| full | 100% - 32px | Full-screen on mobile | +| xl | 768px | Data views | + +### Glassmorphic Overlay + +- Overlay: navy-tinted `rgba(0, 28, 56, 0.5)` +- Dialog surface: surface-container-lowest at 85% opacity +- Backdrop blur: 20px +- Shadow: ambient (0px 12px 32px) +- Radius: 0px ### Anatomy ``` ┌───────────────────────────────────────┐ -│ Dialog Header [×]│ -│ Title │ -│ Description │ -├───────────────────────────────────────┤ -│ Dialog Content │ -│ Scrollable if needed │ +│ DIALOG TITLE [×]│ ← label style, ALL CAPS │ │ -├───────────────────────────────────────┤ -│ Dialog Footer │ -│ [Cancel] [Confirm]│ +│ Content area (scrollable) │ +│ │ +│ [CANCEL] [CONFIRM] │ ← primary + secondary buttons └───────────────────────────────────────┘ + 0px radius, glassmorphic backdrop ``` --- -## Table +## Table — "Data Register" ### Row States -| State | Background | Use Case | -|-------|------------|----------| -| default | white | Normal row | -| hover | gray-50 | Mouse over | -| selected | primary/10% | Selected row | -| striped | gray-50/white | Alternating | +| State | Background | +|-------|------------| +| default | surface | +| hover | surface-container-low (tonal shift) | +| selected | primary at 10% opacity | +| header | surface-container | + +### Rules + +- NO divider lines between rows +- Separate rows via tonal shift to surface-container-low +- Header: ALL CAPS, label-md, on-surface-variant color +- Numbers right-aligned, text left-aligned +- Status badges: sharp 0px corners, color-coded ### Cell Alignment @@ -234,3 +234,34 @@ Helper text or error message | row height (compact) | 40px | | row height (default) | 48px | | row height (comfortable) | 56px | + +--- + +## Data Visualization — "Industrial Instruments" + +### Gauges + +- Sharp, non-rounded arcs +- Primary color for normal values +- Tertiary (#ffb781) for warnings — "caution tape" effect +- Error for critical thresholds + +### Charts + +- Fill areas under lines with vertical gradient: primary to transparent (gives data "weight") +- Dark theme: primary (#9bcaff) line with outer glow (0px 0px 8px) — "Pulse Line" +- Sharp axis lines, no rounded corners on bars + +### Status Indicators + +- Color-coded with Andritz palette +- Tertiary (#ffb781) for warnings — high contrast against navy dark theme +- Error for critical +- Primary for normal operation +- Always accompanied by text label (no icon-only indicators) + +### KPI Cards + +- Display-lg for primary metric ("stamped metal" feel) +- Label-sm underneath (ALL CAPS, +10% tracking) for unit/label +- Example: "2,847" in display-lg + "TOTAL UNITS PROCESSED" in label-sm diff --git a/.claude/skills/design-system/references/component-tokens.md b/.claude/skills/design-system/references/component-tokens.md index 912ab9da5..6f0cbc09c 100644 --- a/.claude/skills/design-system/references/component-tokens.md +++ b/.claude/skills/design-system/references/component-tokens.md @@ -1,48 +1,45 @@ -# Component Tokens +# Component Tokens — Andritz Precision -Component-specific tokens referencing semantic layer. +Component-specific tokens referencing semantic layer. All components enforce 0px radius and the No-Line Rule. ## Button Tokens ```css :root { - /* Default (Primary) */ - --button-bg: var(--color-primary); - --button-fg: var(--color-primary-foreground); - --button-hover-bg: var(--color-primary-hover); - --button-active-bg: var(--color-primary-active); - - /* Secondary */ - --button-secondary-bg: var(--color-secondary); - --button-secondary-fg: var(--color-secondary-foreground); - --button-secondary-hover-bg: var(--color-secondary-hover); - - /* Outline */ - --button-outline-border: var(--color-border); - --button-outline-fg: var(--color-foreground); - --button-outline-hover-bg: var(--color-accent); - - /* Ghost */ - --button-ghost-fg: var(--color-foreground); - --button-ghost-hover-bg: var(--color-accent); + /* Primary — Gradient fill, industrial weight */ + --button-bg: linear-gradient(135deg, var(--color-primary-text), var(--color-primary)); + --button-fg: var(--color-on-primary); + --button-hover-bg: linear-gradient(135deg, var(--andritz-blue-700), var(--andritz-blue-600)); + --button-active-scale: 0.98; + + /* Secondary — Surface tier, no border */ + --button-secondary-bg: var(--color-surface-container-high); + --button-secondary-fg: var(--color-primary-text); + --button-secondary-hover-bg: var(--color-surface-container-highest); + + /* Tertiary — Text only, capitalized, underline hover */ + --button-tertiary-bg: transparent; + --button-tertiary-fg: var(--color-primary-text); + --button-tertiary-hover-decoration: 2px solid var(--color-primary); /* Destructive */ - --button-destructive-bg: var(--color-destructive); - --button-destructive-fg: var(--color-destructive-foreground); - --button-destructive-hover-bg: var(--color-destructive-hover); - - /* Sizing */ - --button-padding-x: var(--space-4); - --button-padding-y: var(--space-2); - --button-padding-x-sm: var(--space-3); - --button-padding-y-sm: var(--space-1-5); - --button-padding-x-lg: var(--space-6); - --button-padding-y-lg: var(--space-3); - - /* Shape */ - --button-radius: var(--radius-md); - --button-font-size: var(--font-size-sm); + --button-destructive-bg: var(--color-error); + --button-destructive-fg: var(--color-on-error); + + /* Sizing — heavy horizontal padding */ + --button-padding-x: var(--space-6); /* 24px */ + --button-padding-y: var(--space-2); /* 8px */ + --button-padding-x-sm: var(--space-4); /* 16px */ + --button-padding-y-sm: var(--space-1-5); /* 6px */ + --button-padding-x-lg: var(--space-8); /* 32px */ + --button-padding-y-lg: var(--space-3); /* 12px */ + + /* Shape — Industrial Precision */ + --button-radius: 0px; + --button-font-size: var(--font-size-label-md); --button-font-weight: var(--font-weight-medium); + --button-text-transform: uppercase; + --button-letter-spacing: var(--tracking-wide); /* +0.05em */ } ``` @@ -50,31 +47,33 @@ Component-specific tokens referencing semantic layer. ```css :root { - /* Background & Border */ - --input-bg: var(--color-background); - --input-border: var(--color-input); - --input-fg: var(--color-foreground); + /* Background — inset surface tier */ + --input-bg: var(--color-surface-container-highest); + --input-border: none; /* No-Line Rule */ + --input-fg: var(--color-on-surface); /* Placeholder */ - --input-placeholder: var(--color-muted-foreground); + --input-placeholder: var(--color-on-surface-variant); - /* Focus */ - --input-focus-border: var(--color-ring); - --input-focus-ring: var(--color-ring); + /* Focus — bottom-border only (ledger/technical form style) */ + --input-focus-border: none; + --input-focus-border-bottom: 2px solid var(--color-primary); + --input-focus-ring: none; /* No ring — bottom border only */ /* Error */ - --input-error-border: var(--color-error); - --input-error-fg: var(--color-error); + --input-error-bg: var(--color-error-container); + --input-error-fg: var(--color-on-error-container); + --input-error-border-bottom: 2px solid var(--color-error); /* Disabled */ - --input-disabled-bg: var(--color-muted); - --input-disabled-fg: var(--color-muted-foreground); + --input-disabled-bg: var(--color-surface-container); + --input-disabled-fg: var(--color-on-surface-variant); /* Sizing */ - --input-padding-x: var(--space-3); + --input-padding-x: var(--space-4); --input-padding-y: var(--space-2); - --input-radius: var(--radius-md); - --input-font-size: var(--font-size-sm); + --input-radius: 0px; + --input-font-size: var(--font-size-body-md); } ``` @@ -82,50 +81,58 @@ Component-specific tokens referencing semantic layer. ```css :root { - /* Background & Border */ - --card-bg: var(--color-card); - --card-fg: var(--color-card-foreground); - --card-border: var(--color-border); + /* Background — elevated surface for "pop" */ + --card-bg: var(--color-surface-container-lowest); + --card-fg: var(--color-on-surface); + --card-border: none; /* No-Line Rule — no borders */ - /* Shadow */ - --card-shadow: var(--shadow-default); - --card-shadow-hover: var(--shadow-md); + /* Shadow — ambient only, when card must float */ + --card-shadow: none; /* default: no shadow, use tonal stacking */ + --card-shadow-elevated: var(--shadow-ambient-light); - /* Spacing */ - --card-padding: var(--space-6); - --card-padding-sm: var(--space-4); - --card-gap: var(--space-4); + /* Spacing — generous internal whitespace */ + --card-padding: var(--space-6); /* 24px */ + --card-padding-sm: var(--space-4); /* 16px */ + --card-gap: var(--space-4); /* 16px */ + --card-zone-gap: var(--space-8); /* 32px — between data zones */ /* Shape */ - --card-radius: var(--radius-lg); + --card-radius: 0px; +} + +.dark { + --card-bg: var(--color-surface-container); + --card-shadow-elevated: var(--shadow-ambient-dark); } ``` -## Badge Tokens +## Badge/Chip Tokens ```css :root { /* Default */ --badge-bg: var(--color-primary); - --badge-fg: var(--color-primary-foreground); - - /* Secondary */ - --badge-secondary-bg: var(--color-secondary); - --badge-secondary-fg: var(--color-secondary-foreground); + --badge-fg: var(--color-on-primary); - /* Outline */ - --badge-outline-border: var(--color-border); - --badge-outline-fg: var(--color-foreground); + /* Secondary — minimalist */ + --badge-secondary-bg: var(--color-secondary-container); + --badge-secondary-fg: var(--color-on-surface); - /* Destructive */ - --badge-destructive-bg: var(--color-destructive); - --badge-destructive-fg: var(--color-destructive-foreground); + /* Status */ + --badge-warning-bg: var(--color-tertiary-500); + --badge-warning-fg: var(--neutral-950); + --badge-error-bg: var(--color-error); + --badge-error-fg: var(--color-on-error); + --badge-success-bg: var(--color-success-600); + --badge-success-fg: #ffffff; /* Sizing */ - --badge-padding-x: var(--space-2-5); + --badge-padding-x: var(--space-2); --badge-padding-y: var(--space-0-5); - --badge-radius: var(--radius-full); - --badge-font-size: var(--font-size-xs); + --badge-radius: 0px; /* Sharp corners */ + --badge-font-size: var(--font-size-label-sm); + --badge-text-transform: uppercase; + --badge-letter-spacing: var(--tracking-wide); } ``` @@ -133,18 +140,18 @@ Component-specific tokens referencing semantic layer. ```css :root { - /* Default */ - --alert-bg: var(--color-background); - --alert-fg: var(--color-foreground); - --alert-border: var(--color-border); + --alert-bg: var(--color-surface-container); + --alert-fg: var(--color-on-surface); + --alert-border: none; /* No-Line Rule */ - /* Destructive */ - --alert-destructive-bg: var(--color-destructive); - --alert-destructive-fg: var(--color-destructive-foreground); + --alert-destructive-bg: var(--color-error-container); + --alert-destructive-fg: var(--color-on-error-container); + + --alert-warning-bg: rgba(255, 183, 129, 0.15); /* tertiary at 15% */ + --alert-warning-fg: var(--color-tertiary); - /* Spacing */ --alert-padding: var(--space-4); - --alert-radius: var(--radius-lg); + --alert-radius: 0px; } ``` @@ -152,20 +159,27 @@ Component-specific tokens referencing semantic layer. ```css :root { - /* Overlay */ - --dialog-overlay-bg: rgb(0 0 0 / 0.5); + /* Overlay — Industrial Frost (Glassmorphism) */ + --dialog-overlay-bg: rgba(0, 28, 56, 0.5); /* navy-tinted, not pure black */ - /* Content */ - --dialog-bg: var(--color-background); - --dialog-fg: var(--color-foreground); - --dialog-border: var(--color-border); - --dialog-shadow: var(--shadow-lg); + /* Content — Glassmorphic surface */ + --dialog-bg: var(--color-surface-container-lowest); + --dialog-fg: var(--color-on-surface); + --dialog-border: none; /* No-Line Rule */ + --dialog-shadow: var(--shadow-ambient-light); + --dialog-backdrop-blur: 20px; /* Industrial Frost */ + --dialog-surface-opacity: 0.85; /* 85% opacity for frost effect */ /* Spacing */ --dialog-padding: var(--space-6); - --dialog-radius: var(--radius-lg); + --dialog-radius: 0px; --dialog-max-width: 32rem; } + +.dark { + --dialog-overlay-bg: rgba(0, 10, 20, 0.7); + --dialog-shadow: var(--shadow-ambient-dark); +} ``` ## Table Tokens @@ -173,16 +187,20 @@ Component-specific tokens referencing semantic layer. ```css :root { /* Header */ - --table-header-bg: var(--color-muted); - --table-header-fg: var(--color-muted-foreground); + --table-header-bg: var(--color-surface-container); + --table-header-fg: var(--color-on-surface-variant); + --table-header-font: var(--font-size-label-md); + --table-header-transform: uppercase; + --table-header-tracking: var(--tracking-wide); /* Body */ - --table-row-bg: var(--color-background); - --table-row-hover-bg: var(--color-muted); - --table-row-fg: var(--color-foreground); + --table-row-bg: var(--color-surface); + --table-row-hover-bg: var(--color-surface-container-low); + --table-row-fg: var(--color-on-surface); - /* Border */ - --table-border: var(--color-border); + /* Border — NO divider lines */ + --table-border: none; + --table-row-separator: var(--space-8); /* 32px whitespace OR tonal shift */ /* Spacing */ --table-cell-padding-x: var(--space-4); @@ -190,25 +208,50 @@ Component-specific tokens referencing semantic layer. } ``` +## Navigation Tokens + +```css +:root { + /* Floating Nav — Industrial Frost */ + --nav-bg: rgba(248, 250, 251, 0.85); /* surface at 85% */ + --nav-backdrop-blur: 20px; + --nav-fg: var(--color-on-surface); + + /* Active indicator */ + --nav-active-indicator: 2px solid var(--color-primary); + --nav-active-fg: var(--color-primary-text); + + /* Sidebar */ + --nav-sidebar-bg: var(--color-surface-container-low); + --nav-sidebar-active-bg: var(--color-surface-container-high); +} + +.dark { + --nav-bg: rgba(16, 20, 26, 0.85); /* dark surface at 85% */ +} +``` + ## Usage Example ```css -.button { +.button-primary { background: var(--button-bg); color: var(--button-fg); padding: var(--button-padding-y) var(--button-padding-x); - border-radius: var(--button-radius); + border-radius: var(--button-radius); /* 0px */ + border: none; /* No-Line Rule */ font-size: var(--button-font-size); font-weight: var(--button-font-weight); - transition: background var(--duration-fast); + text-transform: var(--button-text-transform); + letter-spacing: var(--button-letter-spacing); + transition: background var(--duration-fast), transform var(--duration-fast); } -.button:hover { - background: var(--button-hover-bg); +.button-primary:active { + transform: scale(var(--button-active-scale)); /* 0.98 press */ } -.button.secondary { - background: var(--button-secondary-bg); - color: var(--button-secondary-fg); +.button-tertiary:hover { + border-bottom: var(--button-tertiary-hover-decoration); } ``` diff --git a/.claude/skills/design-system/references/design-philosophy.md b/.claude/skills/design-system/references/design-philosophy.md new file mode 100644 index 000000000..14c750b32 --- /dev/null +++ b/.claude/skills/design-system/references/design-philosophy.md @@ -0,0 +1,133 @@ +# Design Philosophy: The Monolithic Engine + +## 1. Creative North Star + +The Creative North Star for the Andritz Precision design system is **"The Monolithic Engine."** + +This is not a standard dashboard aesthetic — it is an exercise in structural weight and industrial precision. We move away from the "floating card" aesthetic of modern SaaS toward a digital architecture that feels carved from solid carbon and steel. The experience must feel like a high-end industrial command center — authoritative, dense, and technically superior. + +We utilize **intentional asymmetry**: heavy data blocks anchored to a rigid left-axis while secondary metadata "floats" with generous whitespace. The contrast between technical precision and editorial layout creates a premium technical journal feel. + +**Key Principles:** + +- **Precision over Decoration** — Every element serves a functional purpose +- **Structural Depth** — Hierarchy is defined by material stacking, not borders +- **Monolithic Presence** — Large, bold typography creates an editorial "Blueprint" feel + +--- + +## 2. The "No-Line" Rule + +**EXPLICIT INSTRUCTION:** 1px solid borders for sectioning are **PROHIBITED**. + +Boundaries must be defined solely through background color shifts (tonal transitions). To separate a sidebar from a main content area, use a shift from `surface` (#f8fafb) to `surface-container-low` (#f2f4f5) in light theme, or from `surface` (#10141a) to `surface-container-low` (#181c22) in dark theme. + +This creates a seamless, monolithic feel rather than a "boxed-in" interface. + +--- + +## 3. The "Glass & Gradient" Rule + +To inject "visual soul" into the industrial framework: + +- **CTA Depth:** Use a subtle linear gradient on primary buttons transitioning from `primary` (#005c97) to `primary-container` (#0075be) at a **135-degree angle** +- **Industrial Frost:** For floating navigation or modal overlays, use `surface-container-lowest` at **85% opacity** with a **20px backdrop-blur**. This keeps the data-heavy background visible but creates a clear functional layer + +--- + +## 4. Tonal Architecture (Surface Hierarchy) + +Treat the UI as a series of "machined plates." Depth is achieved by stacking surfaces — NOT by adding shadows. + +### Light Theme Surfaces + +| Token | Value | Usage | +|-------|-------|-------| +| surface | #f8fafb | Application floor | +| surface-container | #eceeef | Primary content regions | +| surface-container-low | #f2f4f5 | Sidebar/secondary sections | +| surface-container-high | #e6e8e9 | Interactive surfaces | +| surface-container-highest | #e1e3e4 | Prominent highlights | +| surface-container-lowest | #ffffff | Cards/modules for "pop" | + +### Dark Theme Surfaces + +| Token | Value | Usage | +|-------|-------|-------| +| surface | #10141a | Application void | +| surface-container | #1c2026 | Primary content | +| surface-container-low | #181c22 | Secondary sections | +| surface-container-high | #262a31 | Interactive surfaces | +| surface-container-highest | #31353c | Prominent highlights | +| surface-container-lowest | #0a0e14 | Deepest recesses | + +A `surface-container-lowest` card sitting on a `surface-container` background provides all the separation required. No shadows needed. + +--- + +## 5. Typography as Structure (Blueprint Scale) + +Typography conveys industrial precision. **Inter** handles high-density data; **Gilroy** (where available) provides geometric "Monolithic" weight for headers. + +- **Display (L/M/S):** 3.5rem–2.25rem — Bold only. Massive KPIs. Should feel like "stamped metal" — authoritative and immovable +- **Headline (L/M/S):** 2rem–1.5rem — SemiBold, tight letter-spacing (-0.02em). "Technical manual" aesthetic +- **Title (L/M/S):** 1.375rem–1rem — Medium weight. Navigation and card headers +- **Body (L/M/S):** 1rem–0.75rem — Regular weight. High-density data. Use `on-surface-variant` for secondary text +- **Label (M/S):** 0.75rem — ALL CAPS with +0.05em tracking. "Machined" look for buttons and tags + +**Editorial Tip:** Pair a `display-lg` metric with a `label-sm` (all caps, +10% tracking) directly underneath to mimic an engineering technical drawing. + +--- + +## 6. Elevation & Depth: Ambient Only + +Shadows are atmospheric, not structural. + +- **Ambient Shadow:** `0px 12px 32px 0px` — Light: `rgba(0, 28, 56, 0.06)` / Dark: `rgba(0, 28, 56, 0.4)`. Creates natural "ambient occlusion," not a dated drop shadow +- **Ghost Border Fallback:** If accessibility requires a container definition, use `outline-variant` at **15% opacity** (light) or **20% opacity** (dark). It should be "felt, not seen" +- **Dark Theme Glow:** Chart lines use `primary` (#9bcaff) with outer glow `0px 0px 8px` — "Pulse Line" effect + +--- + +## 7. Data Zone Philosophy + +When designing data-heavy screens: + +- **NEVER shrink the text** — instead, expand the canvas +- Use `surface-container` tiers to group related data into **"Zones"** +- A Zone is a solid block of information scannable at a glance +- Zones are separated by significant **tonal shifts**, NOT lines +- This is the hallmark of a high-end, bespoke engineering tool + +--- + +## 8. Industrial Aesthetic Rules + +- **Sharp Corners (0px border-radius)** — NO EXCEPTIONS. Reinforces industrial precision +- **No Decorative Icons** — Every icon must accompany a functional action or status +- **ALL CAPS Labels** — Professional labeling aesthetic with +0.05em tracking +- **8px Baseline Grid** — Strict alignment, but "Hero" elements may break slightly for visual interest +- **Never Pure Black** — Use `on-secondary-fixed` (#001c38) for the deepest blacks to maintain tonal richness + +--- + +## 9. Do's + +- Use extreme whitespace — industrial sites are massive, the UI should feel equally expansive +- Use ALL CAPS for labels and small UI elements +- Align text to a strict baseline grid for organized "Monolithic" feel +- Allow "Hero" elements to break the 8px grid slightly for visual interest +- Use `on-surface-variant` for metadata — contrast is the primary hierarchy tool +- Pair display-lg metrics with label-sm (all caps, +10% tracking) to mimic engineering drawings + +--- + +## 10. Don'ts + +- **NEVER** use any border-radius — a single rounded corner breaks "Industrial Precision" logic +- **NEVER** use pure black (#000000) — use `on-secondary-fixed` (#001c38) for deepest blacks +- **NEVER** use icons as purely decorative — must accompany functional action or status +- **NEVER** use 100% opaque white borders — feels cheap and "out-of-the-box" +- **NEVER** use standard dividers — if you think you need a line, use 24px+ empty space +- **NEVER** shrink text on data-heavy screens — expand canvas and use surface-container tiers +- **DON'T** use rounded corners larger than 0px — we want "Sharp & Technical," not "Soft & Consumer" diff --git a/.claude/skills/design-system/references/primitive-tokens.md b/.claude/skills/design-system/references/primitive-tokens.md index eb251a278..61b64e797 100644 --- a/.claude/skills/design-system/references/primitive-tokens.md +++ b/.claude/skills/design-system/references/primitive-tokens.md @@ -1,68 +1,95 @@ -# Primitive Tokens +# Primitive Tokens — Andritz Precision -Raw design values - foundation of the design system. +Raw design values — foundation of the Andritz industrial design system. -## Color Scales - -### Gray Scale +## Andritz Blue Scale ```css :root { - --color-gray-50: #F9FAFB; - --color-gray-100: #F3F4F6; - --color-gray-200: #E5E7EB; - --color-gray-300: #D1D5DB; - --color-gray-400: #9CA3AF; - --color-gray-500: #6B7280; - --color-gray-600: #4B5563; - --color-gray-700: #374151; - --color-gray-800: #1F2937; - --color-gray-900: #111827; - --color-gray-950: #030712; + --andritz-blue-900: #001c38; + --andritz-blue-800: #003258; + --andritz-blue-700: #004a77; + --andritz-blue-600: #005c97; + --andritz-blue-500: #0075be; + --andritz-blue-400: #4d9fd4; + --andritz-blue-300: #9bcaff; + --andritz-blue-200: #c6dfff; + --andritz-blue-100: #e0efff; + --andritz-blue-50: #f0f7ff; } ``` -### Primary Colors (Blue) +## Surface Scale (Light Theme) ```css :root { - --color-blue-50: #EFF6FF; - --color-blue-100: #DBEAFE; - --color-blue-200: #BFDBFE; - --color-blue-300: #93C5FD; - --color-blue-400: #60A5FA; - --color-blue-500: #3B82F6; - --color-blue-600: #2563EB; - --color-blue-700: #1D4ED8; - --color-blue-800: #1E40AF; - --color-blue-900: #1E3A8A; + --surface-lowest: #ffffff; /* Cards/modules for "pop" */ + --surface-low: #f8fafb; /* Application floor */ + --surface-base: #f2f4f5; /* Sidebar/secondary sections */ + --surface-mid: #eceeef; /* Primary content regions */ + --surface-high: #e6e8e9; /* Interactive surfaces */ + --surface-highest: #e1e3e4; /* Prominent highlights */ } ``` -### Status Colors +## Surface Scale (Dark Theme) ```css :root { - /* Success - Green */ - --color-green-500: #22C55E; - --color-green-600: #16A34A; + --surface-dark-lowest: #0a0e14; /* Deepest recesses */ + --surface-dark-low: #10141a; /* Application void */ + --surface-dark-base: #181c22; /* Secondary sections */ + --surface-dark-mid: #1c2026; /* Primary content */ + --surface-dark-high: #262a31; /* Interactive surfaces */ + --surface-dark-highest: #31353c; /* Prominent highlights */ +} +``` - /* Warning - Yellow */ - --color-yellow-500: #EAB308; - --color-yellow-600: #CA8A04; +## Neutral Scale + +```css +:root { + --neutral-950: #001c38; /* Deepest black — replaces pure #000000 */ + --neutral-900: #191c1d; /* Primary text (light theme) */ + --neutral-700: #404751; /* Secondary data (light theme) */ + --neutral-600: #49607f; /* Secondary accent */ + --neutral-500: #4b5a69; /* Tertiary accent */ + --neutral-300: #c0c7d2; /* Ghost border / secondary data (dark) */ + --neutral-200: #dfe2eb; /* Primary text (dark theme) */ + --neutral-100: #eef1f6; + --neutral-50: #f5f7fa; +} +``` - /* Error - Red */ - --color-red-500: #EF4444; - --color-red-600: #DC2626; +## Status Colors - /* Info - Blue */ - --color-info: var(--color-blue-500); +```css +:root { + /* Error */ + --color-error-600: #ba1a1a; + --color-error-400: #ff6b6b; + --color-error-300: #ffb4ab; + --color-error-100: #ffdad6; + --color-on-error: #ffffff; + + /* Warning / Tertiary ("Caution Tape") */ + --color-tertiary-500: #ffb781; + --color-tertiary-400: #ffc9a0; + --color-tertiary-200: #ffe4cc; + + /* Success */ + --color-success-600: #1a8a4a; + --color-success-400: #4ade80; + --color-success-100: #dcfce7; + + /* Info */ + --color-info: var(--andritz-blue-300); } ``` ## Spacing Scale -4px base unit system. +8px grid base with extreme whitespace philosophy. ```css :root { @@ -71,95 +98,96 @@ Raw design values - foundation of the design system. --space-0-5: 0.125rem; /* 2px */ --space-1: 0.25rem; /* 4px */ --space-1-5: 0.375rem; /* 6px */ - --space-2: 0.5rem; /* 8px */ - --space-2-5: 0.625rem; /* 10px */ + --space-2: 0.5rem; /* 8px — base unit */ --space-3: 0.75rem; /* 12px */ - --space-3-5: 0.875rem; /* 14px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ - --space-6: 1.5rem; /* 24px */ - --space-7: 1.75rem; /* 28px */ - --space-8: 2rem; /* 32px */ - --space-9: 2.25rem; /* 36px */ + --space-6: 1.5rem; /* 24px — component gap */ + --space-8: 2rem; /* 32px — zone separation */ --space-10: 2.5rem; /* 40px */ - --space-12: 3rem; /* 48px */ - --space-14: 3.5rem; /* 56px */ + --space-12: 3rem; /* 48px — section gap */ --space-16: 4rem; /* 64px */ - --space-20: 5rem; /* 80px */ + --space-20: 5rem; /* 80px — extreme whitespace */ --space-24: 6rem; /* 96px */ + --space-32: 8rem; /* 128px — hero spacing */ } ``` -## Typography Scale +## Typography Scale (Blueprint Scale) ```css :root { - /* Font Sizes */ - --font-size-xs: 0.75rem; /* 12px */ - --font-size-sm: 0.875rem; /* 14px */ - --font-size-base: 1rem; /* 16px */ - --font-size-lg: 1.125rem; /* 18px */ - --font-size-xl: 1.25rem; /* 20px */ - --font-size-2xl: 1.5rem; /* 24px */ - --font-size-3xl: 1.875rem; /* 30px */ - --font-size-4xl: 2.25rem; /* 36px */ - --font-size-5xl: 3rem; /* 48px */ + /* Font Families */ + --font-family-primary: 'Inter', system-ui, -apple-system, sans-serif; + --font-family-premium: 'Gilroy', 'Inter', system-ui, sans-serif; + + /* Display — "stamped metal" KPIs, bold only */ + --font-size-display-lg: 3.5rem; /* 56px */ + --font-size-display-md: 2.75rem; /* 44px */ + --font-size-display-sm: 2.25rem; /* 36px */ + + /* Headline — structural beams, tight tracking */ + --font-size-headline-lg: 2rem; /* 32px */ + --font-size-headline-md: 1.75rem; /* 28px */ + --font-size-headline-sm: 1.5rem; /* 24px */ + + /* Title — navigation/card headers */ + --font-size-title-lg: 1.375rem; /* 22px */ + --font-size-title-md: 1.125rem; /* 18px */ + --font-size-title-sm: 1rem; /* 16px */ + + /* Body — high-density data */ + --font-size-body-lg: 1rem; /* 16px */ + --font-size-body-md: 0.875rem; /* 14px */ + --font-size-body-sm: 0.75rem; /* 12px */ + + /* Label — ALL CAPS, machined look */ + --font-size-label-md: 0.75rem; /* 12px */ + --font-size-label-sm: 0.6875rem; /* 11px */ /* Line Heights */ - --leading-none: 1; - --leading-tight: 1.25; - --leading-snug: 1.375; - --leading-normal: 1.5; + --leading-none: 1; + --leading-tight: 1.2; + --leading-snug: 1.35; + --leading-normal: 1.5; --leading-relaxed: 1.625; - --leading-loose: 2; /* Font Weights */ - --font-weight-normal: 400; + --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Letter Spacing */ - --tracking-tighter: -0.05em; - --tracking-tight: -0.025em; - --tracking-normal: 0; - --tracking-wide: 0.025em; - --tracking-wider: 0.05em; + --tracking-tight: -0.02em; /* Headlines — "technical manual" */ + --tracking-normal: 0; + --tracking-wide: 0.05em; /* Labels — "machined" look */ + --tracking-wider: 0.1em; /* Display pairs — engineering drawing */ } ``` -## Border Radius +## Border Radius (Industrial Precision — 0px) ```css :root { - --radius-none: 0; - --radius-sm: 0.125rem; /* 2px */ - --radius-default: 0.25rem; /* 4px */ - --radius-md: 0.375rem; /* 6px */ - --radius-lg: 0.5rem; /* 8px */ - --radius-xl: 0.75rem; /* 12px */ - --radius-2xl: 1rem; /* 16px */ - --radius-3xl: 1.5rem; /* 24px */ - --radius-full: 9999px; + --radius-none: 0; /* DEFAULT — used everywhere */ + --radius-full: 9999px; /* Only for status indicators/avatars */ + /* NO other radius values — 0px is the rule, no exceptions */ } ``` -## Shadows +## Shadows (Ambient Only) ```css :root { --shadow-none: none; - --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); - --shadow-default: 0 1px 3px 0 rgb(0 0 0 / 0.1), - 0 1px 2px -1px rgb(0 0 0 / 0.1); - --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), - 0 2px 4px -2px rgb(0 0 0 / 0.1); - --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), - 0 4px 6px -4px rgb(0 0 0 / 0.1); - --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), - 0 8px 10px -6px rgb(0 0 0 / 0.1); - --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25); - --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05); + --shadow-ambient-light: 0px 12px 32px 0px rgba(0, 28, 56, 0.06); + --shadow-ambient-dark: 0px 12px 32px 0px rgba(0, 28, 56, 0.4); + --shadow-glow-primary: 0px 0px 8px var(--andritz-blue-300); + + /* Ghost border fallback (accessibility) */ + --ghost-border-light: 1px solid rgba(192, 199, 210, 0.15); /* outline-variant 15% */ + --ghost-border-dark: 1px solid rgba(64, 71, 81, 0.20); /* outline-variant 20% */ } ``` @@ -173,13 +201,15 @@ Raw design values - foundation of the design system. --duration-200: 200ms; --duration-300: 300ms; --duration-500: 500ms; - --duration-700: 700ms; - --duration-1000: 1000ms; /* Semantic durations */ --duration-fast: var(--duration-150); --duration-normal: var(--duration-200); --duration-slow: var(--duration-300); + + /* Easing */ + --ease-standard: ease-in-out; + --ease-decelerate: ease-out; } ``` diff --git a/.claude/skills/design-system/references/semantic-tokens.md b/.claude/skills/design-system/references/semantic-tokens.md index b441010e5..38161103c 100644 --- a/.claude/skills/design-system/references/semantic-tokens.md +++ b/.claude/skills/design-system/references/semantic-tokens.md @@ -1,91 +1,93 @@ -# Semantic Tokens +# Semantic Tokens — Andritz Precision -Purpose-based aliases referencing primitive tokens. +Purpose-based aliases referencing primitive tokens. The surface hierarchy enables instant light/dark theme switching. ## Color Semantics -### Background & Foreground +### Surface Hierarchy (Light Theme — `:root`) ```css :root { - /* Page background */ - --color-background: var(--color-gray-50); - --color-foreground: var(--color-gray-900); - - /* Card/surface background */ - --color-card: white; - --color-card-foreground: var(--color-gray-900); - - /* Popover/dropdown */ - --color-popover: white; - --color-popover-foreground: var(--color-gray-900); + /* Surface Hierarchy — "Machined Plates" */ + --color-surface: var(--surface-low); /* #f8fafb — application floor */ + --color-surface-container: var(--surface-mid); /* #eceeef — primary content */ + --color-surface-container-low: var(--surface-base); /* #f2f4f5 — sidebar/secondary */ + --color-surface-container-high: var(--surface-high); /* #e6e8e9 — interactive surfaces */ + --color-surface-container-highest: var(--surface-highest); /* #e1e3e4 — prominent highlights */ + --color-surface-container-lowest: var(--surface-lowest); /* #ffffff — cards for "pop" */ } ``` -### Primary +### Text & Content ```css :root { - --color-primary: var(--color-blue-600); - --color-primary-hover: var(--color-blue-700); - --color-primary-active: var(--color-blue-800); - --color-primary-foreground: white; + --color-on-surface: var(--neutral-900); /* #191c1d — primary text */ + --color-on-surface-variant: var(--neutral-700); /* #404751 — secondary data */ } ``` -### Secondary +### Primary (Andritz Blue) ```css :root { - --color-secondary: var(--color-gray-100); - --color-secondary-hover: var(--color-gray-200); - --color-secondary-foreground: var(--color-gray-900); + --color-primary: var(--andritz-blue-500); /* #0075be — action containers */ + --color-primary-text: var(--andritz-blue-600); /* #005c97 — text/iconography */ + --color-primary-container: var(--andritz-blue-500); /* #0075be — CTA containers */ + --color-on-primary: #ffffff; + --color-primary-fixed-dim: var(--andritz-blue-300); /* #9bcaff — light blue text/icons */ } ``` -### Muted +### Secondary & Tertiary ```css :root { - --color-muted: var(--color-gray-100); - --color-muted-foreground: var(--color-gray-500); + --color-secondary: var(--neutral-600); /* #49607f */ + --color-secondary-container: var(--surface-high); /* #e6e8e9 */ + --color-tertiary: var(--neutral-500); /* #4b5a69 */ } ``` -### Accent +### Error & Destructive ```css :root { - --color-accent: var(--color-gray-100); - --color-accent-foreground: var(--color-gray-900); + --color-error: var(--color-error-600); /* #ba1a1a */ + --color-error-container: var(--color-error-100); /* #ffdad6 */ + --color-on-error: #ffffff; + --color-on-error-container: var(--color-error-600); /* #ba1a1a */ + --color-destructive: var(--color-error-600); + --color-destructive-foreground: #ffffff; } ``` -### Destructive +### Outline (Ghost Border) ```css :root { - --color-destructive: var(--color-red-600); - --color-destructive-hover: var(--color-red-700); - --color-destructive-foreground: white; + --color-outline-variant: var(--neutral-300); /* #c0c7d2 at 15% opacity */ + --ghost-border-opacity: 0.15; } ``` -### Status Colors +### Card & Popover ```css :root { - --color-success: var(--color-green-600); - --color-success-foreground: white; - - --color-warning: var(--color-yellow-500); - --color-warning-foreground: var(--color-gray-900); + --color-card: var(--color-surface-container-lowest); + --color-card-foreground: var(--color-on-surface); + --color-popover: var(--color-surface-container-lowest); + --color-popover-foreground: var(--color-on-surface); +} +``` - --color-error: var(--color-red-600); - --color-error-foreground: white; +### Muted - --color-info: var(--color-blue-500); - --color-info-foreground: white; +```css +:root { + --color-muted: var(--surface-mid); /* #eceeef */ + --color-muted-foreground: var(--neutral-700); /* #404751 */ } ``` @@ -93,30 +95,86 @@ Purpose-based aliases referencing primitive tokens. ```css :root { - --color-border: var(--color-gray-200); - --color-input: var(--color-gray-200); - --color-ring: var(--color-blue-500); + --color-border: transparent; /* No-Line Rule: no visible borders */ + --color-input: var(--color-surface-container-highest); + --color-ring: var(--color-primary); +} +``` + +## Dark Theme Overrides + +```css +.dark { + /* Surface Hierarchy — "The Void" */ + --color-surface: #10141a; /* application void */ + --color-surface-container: #1c2026; /* primary content */ + --color-surface-container-low: #181c22; /* secondary sections */ + --color-surface-container-high: #262a31; /* interactive surfaces */ + --color-surface-container-highest: #31353c; /* prominent highlights */ + --color-surface-container-lowest: #0a0e14; /* deepest recesses */ + + /* Text & Content */ + --color-on-surface: #dfe2eb; /* primary text */ + --color-on-surface-variant: #c0c7d2; /* secondary data */ + + /* Primary (Andritz Blue — inverted for dark) */ + --color-primary: #0075be; /* action containers */ + --color-primary-text: #9bcaff; /* text/iconography */ + --color-primary-container: #0075be; + --color-on-primary: #ffffff; + --color-primary-fixed-dim: #9bcaff; + + /* Tertiary (Warning/Caution — "caution tape" high-contrast) */ + --color-tertiary: #ffb781; + + /* Error */ + --color-error: #ffb4ab; + --color-error-container: #93000a; + --color-on-error-container: #ffdad6; + + /* Outline (Ghost Border — 20% in dark) */ + --color-outline-variant: #404751; + --ghost-border-opacity: 0.20; + + /* Card / Popover */ + --color-card: var(--color-surface-container); + --color-card-foreground: var(--color-on-surface); + + /* Muted */ + --color-muted: #262a31; + --color-muted-foreground: #c0c7d2; + + /* Border & Ring */ + --color-border: transparent; + --color-input: #0a0e14; /* inset look */ + --color-ring: #9bcaff; + + /* Deepest Black (NEVER use pure #000000) */ + --color-deepest-black: #001c38; /* on-secondary-fixed */ } ``` ## Spacing Semantics +Extreme whitespace philosophy — industrial sites are massive. + ```css :root { /* Component internal spacing */ - --spacing-component-xs: var(--space-1); - --spacing-component-sm: var(--space-2); - --spacing-component: var(--space-3); - --spacing-component-lg: var(--space-4); + --spacing-component-xs: var(--space-1); /* 4px */ + --spacing-component-sm: var(--space-2); /* 8px */ + --spacing-component: var(--space-4); /* 16px */ + --spacing-component-lg: var(--space-6); /* 24px */ - /* Section spacing */ - --spacing-section-sm: var(--space-8); - --spacing-section: var(--space-12); - --spacing-section-lg: var(--space-16); + /* Zone & section spacing */ + --spacing-zone-gap: var(--space-8); /* 32px — zone separation */ + --spacing-section: var(--space-12); /* 48px — section gap */ + --spacing-section-lg: var(--space-16); /* 64px */ + --spacing-hero: var(--space-32); /* 128px — hero breathing room */ /* Page margins */ - --spacing-page-x: var(--space-4); - --spacing-page-y: var(--space-6); + --spacing-page-x: var(--space-6); /* 24px */ + --spacing-page-y: var(--space-8); /* 32px */ } ``` @@ -124,19 +182,17 @@ Purpose-based aliases referencing primitive tokens. ```css :root { - /* Headings */ - --font-heading: var(--font-size-2xl); - --font-heading-lg: var(--font-size-3xl); - --font-heading-xl: var(--font-size-4xl); - - /* Body */ - --font-body: var(--font-size-base); - --font-body-sm: var(--font-size-sm); - --font-body-lg: var(--font-size-lg); - - /* Labels & Captions */ - --font-label: var(--font-size-sm); - --font-caption: var(--font-size-xs); + /* Font family */ + --font-heading: var(--font-family-primary); /* Inter */ + --font-body: var(--font-family-primary); /* Inter */ + --font-label: var(--font-family-primary); /* Inter */ + + /* Headline — tight tracking, "technical manual" */ + --font-headline-tracking: var(--tracking-tight); /* -0.02em */ + + /* Label — ALL CAPS, wide tracking, "machined" */ + --font-label-transform: uppercase; + --font-label-tracking: var(--tracking-wide); /* +0.05em */ } ``` @@ -146,7 +202,7 @@ Purpose-based aliases referencing primitive tokens. :root { /* Focus ring */ --ring-width: 2px; - --ring-offset: 2px; + --ring-offset: 0px; /* No offset — industrial precision */ --ring-color: var(--color-ring); /* Opacity for disabled */ @@ -159,57 +215,31 @@ Purpose-based aliases referencing primitive tokens. } ``` -## Dark Mode Overrides - -```css -.dark { - --color-background: var(--color-gray-950); - --color-foreground: var(--color-gray-50); - - --color-card: var(--color-gray-900); - --color-card-foreground: var(--color-gray-50); - - --color-popover: var(--color-gray-900); - --color-popover-foreground: var(--color-gray-50); - - --color-muted: var(--color-gray-800); - --color-muted-foreground: var(--color-gray-400); - - --color-secondary: var(--color-gray-800); - --color-secondary-foreground: var(--color-gray-50); - - --color-accent: var(--color-gray-800); - --color-accent-foreground: var(--color-gray-50); - - --color-border: var(--color-gray-800); - --color-input: var(--color-gray-800); -} -``` - ## Usage Patterns ### Applying Semantic Tokens ```css -/* Good - uses semantic tokens */ +/* Good — uses Andritz semantic tokens */ .card { - background: var(--color-card); - color: var(--color-card-foreground); - border: 1px solid var(--color-border); + background: var(--color-surface-container-lowest); + color: var(--color-on-surface); + /* No border — No-Line Rule */ } -/* Bad - uses primitive tokens directly */ +/* Bad — uses primitive tokens directly */ .card { - background: var(--color-gray-50); - color: var(--color-gray-900); + background: #ffffff; + color: #191c1d; + border: 1px solid #c0c7d2; /* violates No-Line Rule */ } ``` ### Theme Switching -Semantic tokens enable instant theme switching: +Semantic tokens enable instant theme switching via surface hierarchy: ```js -// Toggle dark mode +// Toggle dark mode — surfaces shift automatically document.documentElement.classList.toggle('dark'); ``` diff --git a/.claude/skills/design-system/references/states-and-variants.md b/.claude/skills/design-system/references/states-and-variants.md index 64b808a6a..bebb8f5fb 100644 --- a/.claude/skills/design-system/references/states-and-variants.md +++ b/.claude/skills/design-system/references/states-and-variants.md @@ -1,6 +1,6 @@ -# States and Variants +# States and Variants — Andritz Precision -Component state definitions and variant patterns. +Andritz industrial design system state definitions. Tonal shifts (not opacity) for hover, scale-[0.98] active press, bottom-border-only input focus, ghost borders. ## Interactive States @@ -8,16 +8,14 @@ Component state definitions and variant patterns. | State | Trigger | Visual Change | |-------|---------|---------------| -| default | None | Base appearance | -| hover | Mouse over | Slight color shift | -| focus | Tab/click | Focus ring | -| active | Mouse down | Darkest color | -| disabled | disabled attr | Reduced opacity | -| loading | Async action | Spinner + opacity | +| default | None | Base appearance — tonal surface | +| hover | Mouse over | Tonal shift to next surface tier | +| focus | Tab/click | Ghost border OR bottom-border (inputs) | +| active | Mouse down | scale(0.98) press + tonal shift | +| disabled | disabled attr | Muted surface tier, reduced opacity | +| loading | Async action | Spinner + reduced opacity | -### State Priority - -When multiple states apply, priority (highest to lowest): +### State Priority (highest to lowest) 1. disabled 2. loading @@ -26,79 +24,139 @@ When multiple states apply, priority (highest to lowest): 5. hover 6. default -### State Transitions +### State Transitions (Industrial Precision) ```css -/* Standard transition for interactive elements */ .interactive { - transition-property: color, background-color, border-color, box-shadow; - transition-duration: var(--duration-fast); + transition-property: color, background-color, border-color, transform; + transition-duration: var(--duration-fast); /* 150ms */ transition-timing-function: ease-in-out; } ``` | Transition | Duration | Easing | |------------|----------|--------| -| Color changes | 150ms | ease-in-out | -| Background | 150ms | ease-in-out | -| Transform | 200ms | ease-out | +| Color/background | 150ms | ease-in-out | +| Transform (scale) | 150ms | ease-out | +| Border-bottom | 150ms | ease-in-out | | Opacity | 150ms | ease | | Shadow | 200ms | ease-out | ## Focus States -### Focus Ring Spec +### Input Focus (Bottom-Border Only — "Technical Ledger") + +```css +/* Andritz input focus — bottom border only, NO ring */ +.input:focus { + outline: none; + border-bottom: 2px solid var(--color-primary); /* #005c97 light / #9bcaff dark */ + box-shadow: none; +} +``` + +### General Focus (Ghost Border) ```css -/* Standard focus ring */ +/* Non-input focus — ghost border appears */ .focusable:focus-visible { outline: none; - box-shadow: 0 0 0 var(--ring-offset) var(--color-background), - 0 0 0 calc(var(--ring-offset) + var(--ring-width)) var(--ring-color); + box-shadow: 0 0 0 1px var(--color-outline-variant); /* ghost border */ } ``` -| Property | Value | -|----------|-------| -| Ring width | 2px | -| Ring offset | 2px | -| Ring color | primary (blue-500) | -| Offset color | background | +| Element | Focus Style | +|---------|-------------| +| Input/textarea | 2px primary bottom-border only | +| Button | Ghost border (outline-variant at 15%/20%) | +| Card (interactive) | Ambient shadow appears | +| Link | 2px primary bottom underline | ### Focus Within ```css -/* Container focus when child is focused */ .container:focus-within { - border-color: var(--color-ring); + border-bottom-color: var(--color-primary); +} +``` + +## Hover States + +### Tonal Shift Pattern + +Hover uses surface tier shifts, not opacity changes: + +```css +/* Button hover — tonal shift */ +.button-secondary:hover { + background: var(--color-surface-container-highest); + /* shifts from surface-container-high to surface-container-highest */ +} + +/* Row hover — tonal shift */ +.table-row:hover { + background: var(--color-surface-container-low); +} + +/* Tertiary button hover — bottom underline appears */ +.button-tertiary:hover { + text-decoration: none; + border-bottom: 2px solid var(--color-primary); } ``` +## Active States + +### Press Animation + +```css +/* Primary button active — industrial press */ +.button-primary:active { + transform: scale(0.98); + transition: transform var(--duration-fast) ease-out; +} + +/* Card active (interactive) — subtle press */ +.card-interactive:active { + transform: scale(0.995); +} +``` + +| Component | Active Effect | +|-----------|---------------| +| Button (primary) | scale(0.98) + darker gradient | +| Button (secondary) | scale(0.98) + tonal shift | +| Card (interactive) | scale(0.995) | +| Nav item | Background shifts to surface-container-high | + ## Disabled States -### Visual Treatment +### Visual Treatment (Tonal, not just opacity) ```css .disabled { - opacity: var(--opacity-disabled); /* 0.5 */ + opacity: 0.5; pointer-events: none; cursor: not-allowed; + background: var(--color-surface-container); /* muted surface tier */ + color: var(--color-on-surface-variant); } ``` | Property | Disabled Value | |----------|----------------| | Opacity | 50% | +| Background | surface-container (muted tier) | +| Color | on-surface-variant | | Pointer events | none | | Cursor | not-allowed | -| Background | muted | -| Color | muted-foreground | +| Border | none (maintains No-Line Rule) | ### Accessibility - Use `aria-disabled="true"` for semantic disabled - Use `disabled` attribute for form elements -- Maintain sufficient contrast (3:1 minimum) +- Maintain 3:1 minimum contrast ## Loading States @@ -106,10 +164,10 @@ When multiple states apply, priority (highest to lowest): | Component | Spinner Position | |-----------|------------------| -| Button | Replace icon or center | +| Button | Center, replaces label | | Input | Trailing position | -| Card | Center overlay | -| Page | Center of viewport | +| Card | Center overlay with surface backdrop | +| Page | Center of viewport on surface | ### Loading Treatment @@ -121,7 +179,11 @@ When multiple states apply, priority (highest to lowest): .loading::after { content: ''; - /* spinner styles */ + /* Spinner using primary color */ + border: 2px solid var(--color-surface-container-high); + border-top: 2px solid var(--color-primary); + border-radius: var(--radius-full); /* only exception to 0px rule */ + animation: spin 0.8s linear infinite; } .loading > * { @@ -131,78 +193,103 @@ When multiple states apply, priority (highest to lowest): ## Error States -### Visual Indicators +### Visual Treatment ```css .error { - border-color: var(--color-error); - color: var(--color-error); + background: var(--color-error-container); /* #ffdad6 */ + color: var(--color-on-error-container); /* #ba1a1a */ + border-bottom: 2px solid var(--color-error); } -.error:focus-visible { - box-shadow: 0 0 0 2px var(--color-background), - 0 0 0 4px var(--color-error); +.error:focus { + border-bottom: 2px solid var(--color-error); + box-shadow: none; } ``` | Element | Error Treatment | |---------|-----------------| -| Input border | red-500 | -| Input focus ring | red/20% | -| Helper text | red-600 | -| Icon | red-500 | +| Input bg | error-container (#ffdad6) | +| Input bottom-border | 2px solid error (#ba1a1a) | +| Helper text | error color, body-sm | +| Icon | error color (functional, not decorative) | + +## Dark Theme Specific States -### Error Messages +### Pulse Line Glow (Data Visualization) -- Position below input -- Use error color -- Include icon for accessibility -- Clear on valid input +```css +.dark .chart-line { + stroke: var(--color-primary-text); /* #9bcaff */ + filter: drop-shadow(0px 0px 8px var(--color-primary-text)); +} +``` + +### Caution/Warning State + +```css +.dark .status-warning { + color: var(--color-tertiary); /* #ffb781 — "caution tape" effect */ + /* High contrast against navy base for immediate visibility */ +} +``` + +### Ghost Border (Dark — 20% opacity) + +```css +.dark .ghost-border { + border: 1px solid rgba(64, 71, 81, 0.20); /* outline-variant at 20% */ +} +``` ## Variant Patterns ### Color Variants ```css -/* Pattern for color variants */ .component { --component-bg: var(--color-primary); - --component-fg: var(--color-primary-foreground); + --component-fg: var(--color-on-primary); background: var(--component-bg); color: var(--component-fg); } .component.secondary { - --component-bg: var(--color-secondary); - --component-fg: var(--color-secondary-foreground); + --component-bg: var(--color-surface-container-high); + --component-fg: var(--color-primary-text); } .component.destructive { - --component-bg: var(--color-destructive); - --component-fg: var(--color-destructive-foreground); + --component-bg: var(--color-error); + --component-fg: var(--color-on-error); +} + +.component.warning { + --component-bg: rgba(255, 183, 129, 0.15); + --component-fg: var(--color-tertiary); } ``` ### Size Variants ```css -/* Pattern for size variants */ .component { --component-height: 40px; - --component-padding: var(--space-4); - --component-font: var(--font-size-sm); + --component-padding: var(--space-6); /* 24px — industrial weight */ + --component-font: var(--font-size-label-md); } .component.sm { --component-height: 32px; - --component-padding: var(--space-3); - --component-font: var(--font-size-xs); + --component-padding: var(--space-4); + --component-font: var(--font-size-label-sm); } .component.lg { --component-height: 48px; - --component-padding: var(--space-6); - --component-font: var(--font-size-base); + --component-padding: var(--space-8); + --component-font: var(--font-size-body-md); } ``` @@ -212,30 +299,32 @@ When multiple states apply, priority (highest to lowest): | Element | Minimum Ratio | |---------|---------------| -| Normal text | 4.5:1 | -| Large text (18px+) | 3:1 | +| Primary text (on-surface) | 4.5:1 | +| Large text (display/headline) | 3:1 | | UI components | 3:1 | -| Focus indicator | 3:1 | +| Focus indicator (ghost border) | 3:1 | ### State Indicators -- Never rely on color alone -- Use icons, text, or patterns -- Ensure focus is visible -- Provide loading announcements +- Never rely on color alone — use icons (functional) + text +- Ghost borders must be "felt, not seen" but meet 3:1 contrast +- Focus must be visible in both light and dark themes +- Loading states: provide aria-busy announcements ### ARIA States ```html - + - - + + Error message ``` diff --git a/.claude/skills/design-system/references/tailwind-integration.md b/.claude/skills/design-system/references/tailwind-integration.md index c632788c9..fec6a996e 100644 --- a/.claude/skills/design-system/references/tailwind-integration.md +++ b/.claude/skills/design-system/references/tailwind-integration.md @@ -1,57 +1,100 @@ -# Tailwind Integration +# Tailwind Integration — Andritz Precision -Map design system tokens to Tailwind CSS configuration. +Map Andritz design system tokens to Tailwind CSS configuration with dark/light theme support. ## CSS Variables Setup ### Base Layer ```css -/* globals.css */ +/* globals.css — Andritz Precision */ @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { - /* Primitives */ - --color-blue-600: 37 99 235; /* HSL: 217 91% 60% */ - - /* Semantic */ - --background: 0 0% 100%; - --foreground: 222 47% 11%; - --primary: 217 91% 60%; - --primary-foreground: 0 0% 100%; - --secondary: 220 14% 96%; - --secondary-foreground: 222 47% 11%; - --muted: 220 14% 96%; - --muted-foreground: 220 9% 46%; - --accent: 220 14% 96%; - --accent-foreground: 222 47% 11%; - --destructive: 0 84% 60%; + /* Surface Hierarchy (Light) */ + --surface: 210 11% 98%; /* #f8fafb */ + --surface-container: 200 5% 93%; /* #eceeef */ + --surface-container-low: 200 7% 95%; /* #f2f4f5 */ + --surface-container-high: 200 5% 91%; /* #e6e8e9 */ + --surface-container-highest: 200 4% 89%; /* #e1e3e4 */ + --surface-container-lowest: 0 0% 100%; /* #ffffff */ + + /* Primary (Andritz Blue) */ + --primary: 202 100% 37%; /* #0075be */ + --primary-text: 204 100% 29%; /* #005c97 */ + --primary-foreground: 0 0% 100%; /* white */ + --primary-fixed-dim: 212 100% 81%; /* #9bcaff */ + + /* Text */ + --on-surface: 195 6% 10%; /* #191c1d */ + --on-surface-variant: 218 12% 28%; /* #404751 */ + + /* Secondary & Tertiary */ + --secondary: 215 26% 39%; /* #49607f */ + --tertiary: 210 15% 35%; /* #4b5a69 */ + + /* Error */ + --destructive: 0 76% 41%; /* #ba1a1a */ --destructive-foreground: 0 0% 100%; - --border: 220 13% 91%; - --input: 220 13% 91%; - --ring: 217 91% 60%; - --radius: 0.5rem; + --error-container: 0 100% 92%; /* #ffdad6 */ + + /* Outline */ + --outline-variant: 217 16% 80%; /* #c0c7d2 */ + + /* Semantic aliases */ + --background: var(--surface); + --foreground: var(--on-surface); + --card: var(--surface-container-lowest); + --card-foreground: var(--on-surface); + --muted: var(--surface-container); + --muted-foreground: var(--on-surface-variant); + --border: 0 0% 0% / 0; /* transparent — No-Line Rule */ + --input: var(--surface-container-highest); + --ring: var(--primary); + --radius: 0rem; /* Industrial Precision — 0px */ } .dark { - --background: 222 47% 4%; - --foreground: 210 40% 98%; - --primary: 217 91% 60%; + /* Surface Hierarchy (Dark) */ + --surface: 218 32% 8%; /* #10141a */ + --surface-container: 218 13% 13%; /* #1c2026 */ + --surface-container-low: 218 17% 11%; /* #181c22 */ + --surface-container-high: 220 11% 17%; /* #262a31 */ + --surface-container-highest: 218 9% 21%; /* #31353c */ + --surface-container-lowest: 218 32% 5%; /* #0a0e14 */ + + /* Primary (inverted for dark) */ + --primary: 202 100% 37%; /* #0075be containers */ + --primary-text: 212 100% 81%; /* #9bcaff text */ --primary-foreground: 0 0% 100%; - --secondary: 217 33% 17%; - --secondary-foreground: 210 40% 98%; - --muted: 217 33% 17%; - --muted-foreground: 215 20% 65%; - --accent: 217 33% 17%; - --accent-foreground: 210 40% 98%; - --destructive: 0 62% 30%; - --destructive-foreground: 0 0% 100%; - --border: 217 33% 17%; - --input: 217 33% 17%; - --ring: 217 91% 60%; + + /* Text */ + --on-surface: 225 19% 90%; /* #dfe2eb */ + --on-surface-variant: 217 16% 80%; /* #c0c7d2 */ + + /* Tertiary (Caution Tape) */ + --tertiary: 27 100% 75%; /* #ffb781 */ + + /* Error */ + --destructive: 10 100% 84%; /* #ffb4ab */ + --error-container: 0 100% 29%; + + /* Outline */ + --outline-variant: 218 12% 28%; /* #404751 */ + + /* Semantic aliases */ + --background: var(--surface); + --foreground: var(--on-surface); + --card: var(--surface-container); + --card-foreground: var(--on-surface); + --muted: var(--surface-container-high); + --muted-foreground: var(--on-surface-variant); + --border: 0 0% 0% / 0; + --input: var(--surface-container-lowest); + --ring: var(--primary-text); } } ``` @@ -65,44 +108,89 @@ import type { Config } from 'tailwindcss' const config: Config = { darkMode: ['class'], - content: ['./src/**/*.{ts,tsx}'], + content: ['./src/**/*.{ts,tsx,html}'], theme: { extend: { + fontFamily: { + sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'], + heading: ['Inter', 'system-ui', 'sans-serif'], + premium: ['Gilroy', 'Inter', 'system-ui', 'sans-serif'], + }, colors: { - background: 'hsl(var(--background))', - foreground: 'hsl(var(--foreground))', + surface: { + DEFAULT: 'hsl(var(--surface))', + container: 'hsl(var(--surface-container))', + 'container-low': 'hsl(var(--surface-container-low))', + 'container-high': 'hsl(var(--surface-container-high))', + 'container-highest': 'hsl(var(--surface-container-highest))', + 'container-lowest': 'hsl(var(--surface-container-lowest))', + }, primary: { DEFAULT: 'hsl(var(--primary))', + text: 'hsl(var(--primary-text))', foreground: 'hsl(var(--primary-foreground))', + 'fixed-dim': 'hsl(var(--primary-fixed-dim))', }, - secondary: { - DEFAULT: 'hsl(var(--secondary))', - foreground: 'hsl(var(--secondary-foreground))', - }, - muted: { - DEFAULT: 'hsl(var(--muted))', - foreground: 'hsl(var(--muted-foreground))', - }, - accent: { - DEFAULT: 'hsl(var(--accent))', - foreground: 'hsl(var(--accent-foreground))', + 'on-surface': { + DEFAULT: 'hsl(var(--on-surface))', + variant: 'hsl(var(--on-surface-variant))', }, + secondary: 'hsl(var(--secondary))', + tertiary: 'hsl(var(--tertiary))', destructive: { DEFAULT: 'hsl(var(--destructive))', foreground: 'hsl(var(--destructive-foreground))', }, - border: 'hsl(var(--border))', - input: 'hsl(var(--input))', - ring: 'hsl(var(--ring))', + 'error-container': 'hsl(var(--error-container))', + 'outline-variant': 'hsl(var(--outline-variant))', + background: 'hsl(var(--background))', + foreground: 'hsl(var(--foreground))', card: { DEFAULT: 'hsl(var(--card))', foreground: 'hsl(var(--card-foreground))', }, + muted: { + DEFAULT: 'hsl(var(--muted))', + foreground: 'hsl(var(--muted-foreground))', + }, + border: 'hsl(var(--border))', + input: 'hsl(var(--input))', + ring: 'hsl(var(--ring))', }, borderRadius: { - lg: 'var(--radius)', - md: 'calc(var(--radius) - 2px)', - sm: 'calc(var(--radius) - 4px)', + DEFAULT: '0px', + none: '0px', + sm: '0px', + md: '0px', + lg: '0px', + xl: '0px', + '2xl': '0px', + '3xl': '0px', + full: '9999px', /* Only for avatars/status indicators */ + }, + spacing: { + 'zone': '2rem', /* 32px zone separation */ + 'section': '3rem', /* 48px section gap */ + 'hero': '8rem', /* 128px hero breathing */ + }, + boxShadow: { + 'ambient-light': '0px 12px 32px 0px rgba(0, 28, 56, 0.06)', + 'ambient-dark': '0px 12px 32px 0px rgba(0, 28, 56, 0.4)', + 'glow-primary': '0px 0px 8px hsl(var(--primary-text))', + 'none': 'none', + }, + backdropBlur: { + 'industrial': '20px', + }, + letterSpacing: { + 'technical': '-0.02em', /* headlines */ + 'machined': '0.05em', /* labels */ + 'blueprint': '0.1em', /* display pairs */ + }, + transitionDuration: { + 'fast': '150ms', + 'normal': '200ms', + 'slow': '300ms', }, }, }, @@ -118,99 +206,132 @@ Using HSL without function allows opacity modifiers: ```tsx // With HSL format (space-separated) -
// 50% opacity -
// 80% opacity +
// 50% opacity +
// Industrial Frost // CSS output -background-color: hsl(217 91% 60% / 0.5); +background-color: hsl(202 100% 37% / 0.5); ``` ## Component Classes -### Button Example +### Andritz Button Styles ```css @layer components { .btn { @apply inline-flex items-center justify-center - rounded-md font-medium - transition-colors - focus-visible:outline-none focus-visible:ring-2 - focus-visible:ring-ring focus-visible:ring-offset-2 + rounded-none font-medium uppercase + tracking-machined + transition-all duration-fast + focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50; } - .btn-default { - @apply bg-primary text-primary-foreground - hover:bg-primary/90; + .btn-primary { + background: linear-gradient(135deg, hsl(var(--primary-text)), hsl(var(--primary))); + @apply text-primary-foreground px-6 py-2; + } + + .btn-primary:active { + @apply scale-[0.98]; } .btn-secondary { - @apply bg-secondary text-secondary-foreground - hover:bg-secondary/80; + @apply bg-surface-container-high text-primary-text px-6 py-2; } - .btn-outline { - @apply border border-input bg-background - hover:bg-accent hover:text-accent-foreground; + .btn-secondary:hover { + @apply bg-surface-container-highest; } - .btn-ghost { - @apply hover:bg-accent hover:text-accent-foreground; + .btn-tertiary { + @apply bg-transparent text-primary-text uppercase px-2 py-2 + border-b-2 border-transparent; + } + + .btn-tertiary:hover { + @apply border-b-primary; } .btn-destructive { - @apply bg-destructive text-destructive-foreground - hover:bg-destructive/90; + @apply bg-destructive text-destructive-foreground px-6 py-2; } /* Sizes */ - .btn-sm { @apply h-8 px-3 text-xs; } - .btn-md { @apply h-10 px-4 text-sm; } - .btn-lg { @apply h-12 px-6 text-base; } + .btn-sm { @apply h-8 px-4 text-xs; } + .btn-md { @apply h-10 px-6 text-xs; } + .btn-lg { @apply h-12 px-8 text-sm; } } ``` -## Spacing Integration +### Andritz Input Styles -```typescript -// tailwind.config.ts -theme: { - extend: { - spacing: { - // Map to CSS variables if needed - 'section': 'var(--spacing-section)', - 'component': 'var(--spacing-component)', - } +```css +@layer components { + .input-andritz { + @apply bg-surface-container-highest text-on-surface + rounded-none border-0 border-b-2 border-b-transparent + px-4 py-2 text-sm + focus:outline-none focus:border-b-primary + transition-colors duration-fast; + } + + .input-andritz.error { + @apply bg-error-container border-b-destructive; + } +} +``` + +### Andritz Card Styles + +```css +@layer components { + .card-andritz { + @apply bg-surface-container-lowest rounded-none p-6; + /* No border — No-Line Rule */ + } + + .card-andritz-elevated { + @apply bg-surface-container-lowest rounded-none p-6 shadow-ambient-light; + } + + .dark .card-andritz-elevated { + @apply shadow-ambient-dark; + } + + .card-zone { + @apply bg-surface-container rounded-none p-6; + } +} +``` + +### Ghost Border Utility + +```css +@layer utilities { + .ghost-border { + border: 1px solid hsl(var(--outline-variant) / 0.15); + } + + .dark .ghost-border { + border: 1px solid hsl(var(--outline-variant) / 0.20); } } ``` -## Animation Tokens +## Spacing Integration ```typescript -// tailwind.config.ts +// tailwind.config.ts — additional spacing tokens theme: { extend: { - transitionDuration: { - fast: '150ms', - normal: '200ms', - slow: '300ms', - }, - keyframes: { - 'accordion-down': { - from: { height: '0' }, - to: { height: 'var(--radix-accordion-content-height)' }, - }, - 'accordion-up': { - from: { height: 'var(--radix-accordion-content-height)' }, - to: { height: '0' }, - }, - }, - animation: { - 'accordion-down': 'accordion-down 0.2s ease-out', - 'accordion-up': 'accordion-up 0.2s ease-out', - }, + spacing: { + 'zone': '2rem', // 32px — data zone separation + 'section': '3rem', // 48px — section gap + 'section-lg': '4rem', // 64px + 'hero': '8rem', // 128px — hero breathing room + } } } ``` @@ -223,7 +344,7 @@ function toggleDarkMode() { document.documentElement.classList.toggle('dark') } -// System preference +// System preference detection if (window.matchMedia('(prefers-color-scheme: dark)').matches) { document.documentElement.classList.add('dark') } @@ -231,11 +352,12 @@ if (window.matchMedia('(prefers-color-scheme: dark)').matches) { ## shadcn/ui Alignment -This configuration aligns with shadcn/ui conventions: +This configuration aligns with shadcn/ui conventions with Andritz overrides: -- Same CSS variable naming -- Same HSL format -- Same color scale structure +- Same CSS variable pattern (HSL format) +- All border-radius overridden to 0px +- Surface hierarchy replaces simple background/card +- No-Line Rule enforced (border: transparent) - Compatible with `npx shadcn@latest add` commands ### Using with shadcn/ui @@ -244,8 +366,8 @@ This configuration aligns with shadcn/ui conventions: # Initialize (uses same token structure) npx shadcn@latest init -# Add components (styled with these tokens) -npx shadcn@latest add button card input +# Add components (styled with Andritz tokens) +npx shadcn@latest add button card input dialog table ``` -Components will automatically use your design system tokens. +Components will automatically use Andritz tokens. The Tailwind config enforces 0px radius everywhere. diff --git a/.claude/skills/design-system/references/token-architecture.md b/.claude/skills/design-system/references/token-architecture.md index e13ed2bba..82f92448f 100644 --- a/.claude/skills/design-system/references/token-architecture.md +++ b/.claude/skills/design-system/references/token-architecture.md @@ -1,19 +1,19 @@ -# Token Architecture +# Token Architecture — Andritz Precision -Three-layer token system for scalable, themeable design systems. +Three-layer token system for the Andritz industrial design system with dark/light theme support. ## Layer Overview ``` ┌─────────────────────────────────────────┐ -│ Component Tokens │ Per-component overrides -│ --button-bg, --card-padding │ +│ Component Tokens │ Andritz component overrides +│ --button-bg, --card-bg, --input-bg │ ├─────────────────────────────────────────┤ -│ Semantic Tokens │ Purpose-based aliases -│ --color-primary, --spacing-section │ +│ Semantic Tokens │ Surface hierarchy + purpose aliases +│ --color-surface, --color-primary │ ├─────────────────────────────────────────┤ -│ Primitive Tokens │ Raw design values -│ --color-blue-600, --space-4 │ +│ Primitive Tokens │ Andritz raw values +│ --andritz-blue-500, --surface-low │ └─────────────────────────────────────────┘ ``` @@ -21,73 +21,93 @@ Three-layer token system for scalable, themeable design systems. | Layer | Purpose | When to Change | |-------|---------|----------------| -| Primitive | Base values (colors, sizes) | Rarely - foundational | -| Semantic | Meaning assignment | Theme switching | -| Component | Component customization | Per-component needs | +| Primitive | Andritz brand values (blues, surfaces, neutrals) | Rarely — foundational | +| Semantic | Surface hierarchy + purpose aliases | Theme switching (light/dark) | +| Component | Industrial component customization | Per-component needs | ## Layer 1: Primitive Tokens -Raw design values without semantic meaning. +Raw Andritz design values without semantic meaning. ```css :root { - /* Colors */ - --color-gray-50: #F9FAFB; - --color-gray-900: #111827; - --color-blue-500: #3B82F6; - --color-blue-600: #2563EB; - - /* Spacing (4px base) */ - --space-1: 0.25rem; /* 4px */ - --space-2: 0.5rem; /* 8px */ - --space-4: 1rem; /* 16px */ - --space-6: 1.5rem; /* 24px */ + /* Andritz Blue Scale */ + --andritz-blue-900: #001c38; + --andritz-blue-700: #004a77; + --andritz-blue-600: #005c97; + --andritz-blue-500: #0075be; + --andritz-blue-300: #9bcaff; + --andritz-blue-200: #c6dfff; + + /* Surface Scale (Light) */ + --surface-lowest: #ffffff; + --surface-low: #f8fafb; + --surface-base: #f2f4f5; + --surface-mid: #eceeef; + --surface-high: #e6e8e9; + --surface-highest: #e1e3e4; + + /* Neutral Scale */ + --neutral-950: #001c38; /* deepest black — never use pure #000000 */ + --neutral-900: #191c1d; + --neutral-700: #404751; + --neutral-300: #c0c7d2; + --neutral-200: #dfe2eb; + + /* Spacing (8px grid, extreme whitespace) */ + --space-2: 0.5rem; /* 8px */ + --space-4: 1rem; /* 16px */ + --space-6: 1.5rem; /* 24px */ + --space-8: 2rem; /* 32px — zone separation */ /* Typography */ - --font-size-sm: 0.875rem; - --font-size-base: 1rem; - --font-size-lg: 1.125rem; - - /* Radius */ - --radius-sm: 0.25rem; - --radius-default: 0.5rem; - --radius-lg: 0.75rem; - - /* Shadows */ - --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.05); - --shadow-default: 0 1px 3px rgb(0 0 0 / 0.1); + --font-family-primary: 'Inter', system-ui, sans-serif; + --font-size-display-lg: 3.5rem; + --font-size-label-md: 0.75rem; + + /* Radius — Industrial Precision: 0px */ + --radius-none: 0; + --radius-full: 9999px; + + /* Shadow — Ambient only */ + --shadow-ambient-light: 0px 12px 32px 0px rgba(0, 28, 56, 0.06); + --shadow-ambient-dark: 0px 12px 32px 0px rgba(0, 28, 56, 0.4); } ``` ## Layer 2: Semantic Tokens -Purpose-based aliases that reference primitives. +Purpose-based aliases that reference primitives. The surface hierarchy creates depth through tonal stacking. ```css :root { - /* Background */ - --color-background: var(--color-gray-50); - --color-foreground: var(--color-gray-900); + /* Surface Hierarchy — "Machined Plates" */ + --color-surface: var(--surface-low); /* #f8fafb */ + --color-surface-container: var(--surface-mid); /* #eceeef */ + --color-surface-container-low: var(--surface-base); /* #f2f4f5 */ + --color-surface-container-high: var(--surface-high); /* #e6e8e9 */ + --color-surface-container-highest: var(--surface-highest); /* #e1e3e4 */ + --color-surface-container-lowest: var(--surface-lowest); /* #ffffff */ - /* Primary */ - --color-primary: var(--color-blue-600); - --color-primary-hover: var(--color-blue-700); + /* Primary (Andritz Blue) */ + --color-primary: var(--andritz-blue-500); /* #0075be — action containers */ + --color-primary-text: var(--andritz-blue-600); /* #005c97 — text/iconography */ + --color-on-primary: #ffffff; - /* Secondary */ - --color-secondary: var(--color-gray-100); - --color-secondary-foreground: var(--color-gray-900); + /* Text */ + --color-on-surface: var(--neutral-900); /* #191c1d */ + --color-on-surface-variant: var(--neutral-700); /* #404751 */ - /* Muted */ - --color-muted: var(--color-gray-100); - --color-muted-foreground: var(--color-gray-500); + /* Outline (Ghost Border) */ + --color-outline-variant: var(--neutral-300); /* at 15% opacity */ - /* Destructive */ - --color-destructive: var(--color-red-600); - --color-destructive-foreground: white; + /* Border */ + --color-border: transparent; /* No-Line Rule */ /* Spacing */ - --spacing-component: var(--space-4); - --spacing-section: var(--space-6); + --spacing-component: var(--space-4); /* 16px */ + --spacing-zone: var(--space-8); /* 32px zone separation */ + --spacing-section: var(--space-12); /* 48px */ } ``` @@ -97,83 +117,97 @@ Component-specific tokens referencing semantic layer. ```css :root { - /* Button */ - --button-bg: var(--color-primary); - --button-fg: white; - --button-hover-bg: var(--color-primary-hover); - --button-padding-x: var(--space-4); - --button-padding-y: var(--space-2); - --button-radius: var(--radius-default); - - /* Input */ - --input-bg: var(--color-background); - --input-border: var(--color-gray-300); - --input-focus-ring: var(--color-primary); - --input-padding: var(--space-2) var(--space-3); - - /* Card */ - --card-bg: var(--color-background); - --card-border: var(--color-gray-200); - --card-padding: var(--space-4); - --card-radius: var(--radius-lg); - --card-shadow: var(--shadow-default); + /* Button — Gradient CTA, 0px radius */ + --button-bg: linear-gradient(135deg, var(--color-primary-text), var(--color-primary)); + --button-fg: var(--color-on-primary); + --button-radius: 0px; + --button-padding-x: var(--space-6); /* 24px — heavy horizontal */ + --button-active-scale: 0.98; + + /* Input — Bottom-border focus, ledger style */ + --input-bg: var(--color-surface-container-highest); + --input-focus-border: 2px solid var(--color-primary); /* bottom only */ + --input-radius: 0px; + + /* Card — Elevated surface, no borders */ + --card-bg: var(--color-surface-container-lowest); + --card-border: none; /* No-Line Rule */ + --card-radius: 0px; + --card-shadow: none; /* tonal stacking, not shadows */ } ``` ## Dark Mode -Override semantic tokens for dark theme: +Override semantic tokens for Andritz dark theme: ```css .dark { - --color-background: var(--color-gray-900); - --color-foreground: var(--color-gray-50); - --color-muted: var(--color-gray-800); - --color-muted-foreground: var(--color-gray-400); - --color-secondary: var(--color-gray-800); + /* Surface Hierarchy — "The Void" */ + --color-surface: #10141a; + --color-surface-container: #1c2026; + --color-surface-container-low: #181c22; + --color-surface-container-high: #262a31; + --color-surface-container-highest: #31353c; + --color-surface-container-lowest: #0a0e14; + + /* Primary (inverted for dark) */ + --color-primary: #0075be; /* action containers */ + --color-primary-text: #9bcaff; /* text/iconography */ + + /* Text */ + --color-on-surface: #dfe2eb; + --color-on-surface-variant: #c0c7d2; + + /* Tertiary (Warning — "caution tape") */ + --color-tertiary: #ffb781; + + /* Ghost Border — 20% in dark */ + --color-outline-variant: #404751; } ``` ## Naming Convention ``` ---{category}-{item}-{variant}-{state} +--{scope}-{token}-{variant}-{state} Examples: ---color-primary # category-item ---color-primary-hover # category-item-state ---button-bg-hover # component-property-state ---space-section-sm # category-semantic-variant +--andritz-blue-600 # primitive color +--color-surface-container # semantic surface +--button-bg # component property +--input-focus-border # component-state ``` ## Categories | Category | Examples | |----------|----------| -| color | primary, secondary, muted, destructive | -| space | 1, 2, 4, 8, section, component | -| font-size | xs, sm, base, lg, xl | -| radius | sm, default, lg, full | -| shadow | sm, default, lg | -| duration | fast, normal, slow | +| andritz-blue | 900, 700, 600, 500, 300, 200 | +| surface | lowest, low, base, mid, high, highest | +| neutral | 950, 900, 700, 300, 200 | +| space | 2, 4, 6, 8, 12, 16, 20, 32 (8px grid) | +| radius | none (0px), full (9999px) — no others | +| shadow | ambient-light, ambient-dark, glow-primary | +| duration | fast (150ms), normal (200ms), slow (300ms) | ## File Organization ``` tokens/ -├── primitives.css # Raw values -├── semantic.css # Purpose aliases -├── components.css # Component tokens -└── index.css # Imports all +├── primitives.css # Andritz blue, surface, neutral scales +├── semantic.css # Surface hierarchy, purpose aliases +├── components.css # Industrial component tokens +└── index.css # Imports all layers ``` Or single file with layer comments: ```css -/* === PRIMITIVES === */ +/* === ANDRITZ PRIMITIVES === */ :root { ... } -/* === SEMANTIC === */ +/* === SEMANTIC (Light) === */ :root { ... } /* === COMPONENTS === */ @@ -183,29 +217,6 @@ Or single file with layer comments: .dark { ... } ``` -## Migration from Flat Tokens - -Before (flat): -```css ---button-primary-bg: #2563EB; ---button-secondary-bg: #F3F4F6; -``` - -After (three-layer): -```css -/* Primitive */ ---color-blue-600: #2563EB; ---color-gray-100: #F3F4F6; - -/* Semantic */ ---color-primary: var(--color-blue-600); ---color-secondary: var(--color-gray-100); - -/* Component */ ---button-bg: var(--color-primary); ---button-secondary-bg: var(--color-secondary); -``` - ## W3C DTCG Alignment Token JSON format (W3C Design Tokens Community Group): @@ -213,9 +224,9 @@ Token JSON format (W3C Design Tokens Community Group): ```json { "color": { - "blue": { - "600": { - "$value": "#2563EB", + "andritz-blue": { + "500": { + "$value": "#0075be", "$type": "color" } } diff --git a/.claude/skills/design-system/scripts/fetch-background.py b/.claude/skills/design-system/scripts/fetch-background.py index bcbd357e3..6d1439ee0 100644 --- a/.claude/skills/design-system/scripts/fetch-background.py +++ b/.claude/skills/design-system/scripts/fetch-background.py @@ -98,18 +98,18 @@ def load_brand_colors(): background = colors.get('dark', {}).get('800', {}).get('$value', '#0D0D0D') return { - 'primary': primary_color or '#3B82F6', - 'secondary': secondary_color or '#F59E0B', - 'accent': accent_color or '#10B981', + 'primary': primary_color or '#0075be', + 'secondary': secondary_color or '#005c97', + 'accent': accent_color or '#9bcaff', 'background': background, } except (FileNotFoundError, KeyError, TypeError): # Fallback defaults return { - 'primary': '#3B82F6', - 'secondary': '#F59E0B', - 'accent': '#10B981', - 'background': '#0D0D0D', + 'primary': '#0075be', + 'secondary': '#005c97', + 'accent': '#9bcaff', + 'background': '#0a0e14', } diff --git a/.claude/skills/design-system/scripts/generate-tokens.cjs b/.claude/skills/design-system/scripts/generate-tokens.cjs index 73cc7d7ae..8c626c916 100644 --- a/.claude/skills/design-system/scripts/generate-tokens.cjs +++ b/.claude/skills/design-system/scripts/generate-tokens.cjs @@ -46,25 +46,34 @@ Options: } /** - * Resolve token references like {primitive.color.blue.600} + * Look up a single dotted path in the token tree */ -function resolveReference(value, tokens) { - if (typeof value !== 'string' || !value.startsWith('{')) { - return value; +function lookupPath(dotPath, tokens) { + const parts = dotPath.split('.'); + let node = tokens; + for (const key of parts) { + node = node?.[key]; } - - const path = value.slice(1, -1).split('.'); - let result = tokens; - - for (const key of path) { - result = result?.[key]; + if (node?.$value !== undefined) { + return resolveReference(node.$value, tokens); } + return node; +} - if (result?.$value) { - return resolveReference(result.$value, tokens); - } +/** + * Resolve token references like {primitive.color.blue.600} + * Handles both standalone references and inline references within strings + */ +function resolveReference(value, tokens) { + if (typeof value !== 'string') return value; + + // Replace all {path.to.token} references within the string + const resolved = value.replace(/\{([^}]+)\}/g, (match, refPath) => { + const result = lookupPath(refPath, tokens); + return result !== undefined ? result : match; + }); - return result || value; + return resolved; } /** @@ -97,24 +106,43 @@ function flattenTokens(obj, tokens, prefix = [], result = {}) { return result; } +/** + * Unwrap root container if tokens are nested under a named key + * (e.g. "andritz-precision" in the Andritz DTCG format) + */ +function unwrapRoot(tokens) { + const keys = Object.keys(tokens).filter(k => !k.startsWith('$')); + if (keys.length === 1 && typeof tokens[keys[0]] === 'object' && tokens[keys[0]].primitive) { + return tokens[keys[0]]; + } + return tokens; +} + /** * Generate CSS output */ -function generateCSS(tokens) { +function generateCSS(rawTokens) { + const tokens = unwrapRoot(rawTokens); + const primitive = flattenTokens(tokens.primitive || {}, tokens, ['primitive']); const semantic = flattenTokens(tokens.semantic || {}, tokens, []); const component = flattenTokens(tokens.component || {}, tokens, []); - const darkSemantic = flattenTokens(tokens.dark?.semantic || {}, tokens, []); + // Support both "dark.semantic" and "semantic-dark" layouts + const darkSemantic = flattenTokens( + tokens.dark?.semantic || tokens['semantic-dark'] || {}, + tokens, + [] + ); - let css = `/* Design Tokens - Auto-generated */ -/* Do not edit directly - modify tokens.json instead */ + let css = `/* Andritz Precision — Design Tokens (Auto-generated) */ +/* Do not edit directly — modify design-tokens-starter.json instead */ /* === PRIMITIVES === */ :root { ${Object.entries(primitive).map(([k, v]) => ` ${k}: ${v};`).join('\n')} } -/* === SEMANTIC === */ +/* === SEMANTIC (Light Theme) === */ :root { ${Object.entries(semantic).map(([k, v]) => ` ${k}: ${v};`).join('\n')} } @@ -127,7 +155,7 @@ ${Object.entries(component).map(([k, v]) => ` ${k}: ${v};`).join('\n')} if (Object.keys(darkSemantic).length > 0) { css += ` -/* === DARK MODE === */ +/* === SEMANTIC (Dark Theme) === */ .dark { ${Object.entries(darkSemantic).map(([k, v]) => ` ${k}: ${v};`).join('\n')} } @@ -140,7 +168,8 @@ ${Object.entries(darkSemantic).map(([k, v]) => ` ${k}: ${v};`).join('\n')} /** * Generate Tailwind config output */ -function generateTailwind(tokens) { +function generateTailwind(rawTokens) { + const tokens = unwrapRoot(rawTokens); const semantic = flattenTokens(tokens.semantic || {}, tokens, []); // Extract colors for Tailwind diff --git a/.claude/skills/design-system/scripts/html-token-validator.py b/.claude/skills/design-system/scripts/html-token-validator.py index a72249806..c3b145363 100644 --- a/.claude/skills/design-system/scripts/html-token-validator.py +++ b/.claude/skills/design-system/scripts/html-token-validator.py @@ -42,14 +42,15 @@ # Allowed rgba patterns (brand colors with transparency - CSS limitation) # These are derived from brand tokens but need rgba for transparency ALLOWED_RGBA_PATTERNS = [ - r'rgba\(\s*59\s*,\s*130\s*,\s*246', # --color-primary (#3B82F6) - r'rgba\(\s*245\s*,\s*158\s*,\s*11', # --color-secondary (#F59E0B) - r'rgba\(\s*16\s*,\s*185\s*,\s*129', # --color-accent (#10B981) - r'rgba\(\s*20\s*,\s*184\s*,\s*166', # --color-accent alt (#14B8A6) + r'rgba\(\s*0\s*,\s*117\s*,\s*190', # --color-primary (#0075be) + r'rgba\(\s*0\s*,\s*92\s*,\s*151', # --color-primary-text (#005c97) + r'rgba\(\s*155\s*,\s*202\s*,\s*255', # --primary-fixed-dim (#9bcaff) + r'rgba\(\s*0\s*,\s*28\s*,\s*56', # --dialog-overlay navy tint + r'rgba\(\s*255\s*,\s*183\s*,\s*129', # --color-tertiary (#ffb781) r'rgba\(\s*0\s*,\s*0\s*,\s*0', # black transparency (common) r'rgba\(\s*255\s*,\s*255\s*,\s*255', # white transparency (common) - r'rgba\(\s*15\s*,\s*23\s*,\s*42', # --color-surface (#0F172A) - r'rgba\(\s*7\s*,\s*11\s*,\s*20', # --color-background (#070B14) + r'rgba\(\s*16\s*,\s*20\s*,\s*26', # --color-surface dark (#10141a) + r'rgba\(\s*248\s*,\s*250\s*,\s*251', # --color-surface light (#f8fafb) ] # Allowed exceptions (external images, etc.) diff --git a/.claude/skills/design-system/templates/design-tokens-starter.json b/.claude/skills/design-system/templates/design-tokens-starter.json index 0c775e87e..9d39d6859 100644 --- a/.claude/skills/design-system/templates/design-tokens-starter.json +++ b/.claude/skills/design-system/templates/design-tokens-starter.json @@ -1,142 +1,254 @@ { - "$schema": "https://design-tokens.org/schema.json", - "primitive": { - "color": { - "gray": { - "50": { "$value": "#F9FAFB", "$type": "color" }, - "100": { "$value": "#F3F4F6", "$type": "color" }, - "200": { "$value": "#E5E7EB", "$type": "color" }, - "300": { "$value": "#D1D5DB", "$type": "color" }, - "400": { "$value": "#9CA3AF", "$type": "color" }, - "500": { "$value": "#6B7280", "$type": "color" }, - "600": { "$value": "#4B5563", "$type": "color" }, - "700": { "$value": "#374151", "$type": "color" }, - "800": { "$value": "#1F2937", "$type": "color" }, - "900": { "$value": "#111827", "$type": "color" }, - "950": { "$value": "#030712", "$type": "color" } - }, - "blue": { - "50": { "$value": "#EFF6FF", "$type": "color" }, - "500": { "$value": "#3B82F6", "$type": "color" }, - "600": { "$value": "#2563EB", "$type": "color" }, - "700": { "$value": "#1D4ED8", "$type": "color" }, - "800": { "$value": "#1E40AF", "$type": "color" } - }, - "red": { - "500": { "$value": "#EF4444", "$type": "color" }, - "600": { "$value": "#DC2626", "$type": "color" }, - "700": { "$value": "#B91C1C", "$type": "color" } - }, - "green": { - "500": { "$value": "#22C55E", "$type": "color" }, - "600": { "$value": "#16A34A", "$type": "color" } - }, - "yellow": { - "500": { "$value": "#EAB308", "$type": "color" } - }, - "white": { "$value": "#FFFFFF", "$type": "color" } - }, - "spacing": { - "0": { "$value": "0", "$type": "dimension" }, - "1": { "$value": "0.25rem", "$type": "dimension" }, - "2": { "$value": "0.5rem", "$type": "dimension" }, - "3": { "$value": "0.75rem", "$type": "dimension" }, - "4": { "$value": "1rem", "$type": "dimension" }, - "5": { "$value": "1.25rem", "$type": "dimension" }, - "6": { "$value": "1.5rem", "$type": "dimension" }, - "8": { "$value": "2rem", "$type": "dimension" }, - "10": { "$value": "2.5rem", "$type": "dimension" }, - "12": { "$value": "3rem", "$type": "dimension" }, - "16": { "$value": "4rem", "$type": "dimension" } - }, - "fontSize": { - "xs": { "$value": "0.75rem", "$type": "dimension" }, - "sm": { "$value": "0.875rem", "$type": "dimension" }, - "base": { "$value": "1rem", "$type": "dimension" }, - "lg": { "$value": "1.125rem", "$type": "dimension" }, - "xl": { "$value": "1.25rem", "$type": "dimension" }, - "2xl": { "$value": "1.5rem", "$type": "dimension" }, - "3xl": { "$value": "1.875rem", "$type": "dimension" }, - "4xl": { "$value": "2.25rem", "$type": "dimension" } - }, - "radius": { - "none": { "$value": "0", "$type": "dimension" }, - "sm": { "$value": "0.125rem", "$type": "dimension" }, - "default": { "$value": "0.25rem", "$type": "dimension" }, - "md": { "$value": "0.375rem", "$type": "dimension" }, - "lg": { "$value": "0.5rem", "$type": "dimension" }, - "xl": { "$value": "0.75rem", "$type": "dimension" }, - "full": { "$value": "9999px", "$type": "dimension" } - }, - "shadow": { - "none": { "$value": "none", "$type": "shadow" }, - "sm": { "$value": "0 1px 2px 0 rgb(0 0 0 / 0.05)", "$type": "shadow" }, - "default": { "$value": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)", "$type": "shadow" }, - "md": { "$value": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)", "$type": "shadow" }, - "lg": { "$value": "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)", "$type": "shadow" } - }, - "duration": { - "fast": { "$value": "150ms", "$type": "duration" }, - "normal": { "$value": "200ms", "$type": "duration" }, - "slow": { "$value": "300ms", "$type": "duration" } - } - }, - "semantic": { - "color": { - "background": { "$value": "{primitive.color.gray.50}", "$type": "color" }, - "foreground": { "$value": "{primitive.color.gray.900}", "$type": "color" }, - "primary": { "$value": "{primitive.color.blue.600}", "$type": "color" }, - "primary-hover": { "$value": "{primitive.color.blue.700}", "$type": "color" }, - "primary-foreground": { "$value": "{primitive.color.white}", "$type": "color" }, - "secondary": { "$value": "{primitive.color.gray.100}", "$type": "color" }, - "secondary-foreground": { "$value": "{primitive.color.gray.900}", "$type": "color" }, - "muted": { "$value": "{primitive.color.gray.100}", "$type": "color" }, - "muted-foreground": { "$value": "{primitive.color.gray.500}", "$type": "color" }, - "destructive": { "$value": "{primitive.color.red.600}", "$type": "color" }, - "destructive-foreground": { "$value": "{primitive.color.white}", "$type": "color" }, - "border": { "$value": "{primitive.color.gray.200}", "$type": "color" }, - "ring": { "$value": "{primitive.color.blue.500}", "$type": "color" } + "$schema": "https://design-tokens.github.io/community-group/format/", + "andritz-precision": { + "$description": "Andritz Precision Industrial Design System — The Monolithic Engine", + + "primitive": { + "$description": "Raw design values — foundation layer", + + "color": { + "andritz-blue": { + "900": { "$value": "#001c38", "$type": "color" }, + "800": { "$value": "#003258", "$type": "color" }, + "700": { "$value": "#004a77", "$type": "color" }, + "600": { "$value": "#005c97", "$type": "color" }, + "500": { "$value": "#0075be", "$type": "color" }, + "400": { "$value": "#4d9fd4", "$type": "color" }, + "300": { "$value": "#9bcaff", "$type": "color" }, + "200": { "$value": "#c6dfff", "$type": "color" }, + "100": { "$value": "#e0efff", "$type": "color" }, + "50": { "$value": "#f0f7ff", "$type": "color" } + }, + "surface-light": { + "lowest": { "$value": "#ffffff", "$type": "color" }, + "low": { "$value": "#f8fafb", "$type": "color" }, + "base": { "$value": "#f2f4f5", "$type": "color" }, + "mid": { "$value": "#eceeef", "$type": "color" }, + "high": { "$value": "#e6e8e9", "$type": "color" }, + "highest": { "$value": "#e1e3e4", "$type": "color" } + }, + "surface-dark": { + "lowest": { "$value": "#0a0e14", "$type": "color" }, + "low": { "$value": "#10141a", "$type": "color" }, + "base": { "$value": "#181c22", "$type": "color" }, + "mid": { "$value": "#1c2026", "$type": "color" }, + "high": { "$value": "#262a31", "$type": "color" }, + "highest": { "$value": "#31353c", "$type": "color" } + }, + "neutral": { + "950": { "$value": "#001c38", "$type": "color", "$description": "Deepest black — replaces pure #000000" }, + "900": { "$value": "#191c1d", "$type": "color" }, + "700": { "$value": "#404751", "$type": "color" }, + "600": { "$value": "#49607f", "$type": "color" }, + "500": { "$value": "#4b5a69", "$type": "color" }, + "300": { "$value": "#c0c7d2", "$type": "color" }, + "200": { "$value": "#dfe2eb", "$type": "color" }, + "100": { "$value": "#eef1f6", "$type": "color" }, + "50": { "$value": "#f5f7fa", "$type": "color" } + }, + "error": { + "600": { "$value": "#ba1a1a", "$type": "color" }, + "400": { "$value": "#ff6b6b", "$type": "color" }, + "300": { "$value": "#ffb4ab", "$type": "color" }, + "100": { "$value": "#ffdad6", "$type": "color" } + }, + "tertiary": { + "500": { "$value": "#ffb781", "$type": "color", "$description": "Warning/caution tape" }, + "400": { "$value": "#ffc9a0", "$type": "color" }, + "200": { "$value": "#ffe4cc", "$type": "color" } + }, + "success": { + "600": { "$value": "#1a8a4a", "$type": "color" }, + "400": { "$value": "#4ade80", "$type": "color" }, + "100": { "$value": "#dcfce7", "$type": "color" } + } + }, + + "spacing": { + "0": { "$value": "0", "$type": "dimension" }, + "1": { "$value": "0.25rem", "$type": "dimension" }, + "2": { "$value": "0.5rem", "$type": "dimension" }, + "3": { "$value": "0.75rem", "$type": "dimension" }, + "4": { "$value": "1rem", "$type": "dimension" }, + "5": { "$value": "1.25rem", "$type": "dimension" }, + "6": { "$value": "1.5rem", "$type": "dimension" }, + "8": { "$value": "2rem", "$type": "dimension", "$description": "Zone separation (32px)" }, + "10": { "$value": "2.5rem", "$type": "dimension" }, + "12": { "$value": "3rem", "$type": "dimension", "$description": "Section gap (48px)" }, + "16": { "$value": "4rem", "$type": "dimension" }, + "20": { "$value": "5rem", "$type": "dimension" }, + "24": { "$value": "6rem", "$type": "dimension" }, + "32": { "$value": "8rem", "$type": "dimension", "$description": "Hero spacing (128px)" } + }, + + "typography": { + "font-family": { + "primary": { "$value": "'Inter', system-ui, -apple-system, sans-serif", "$type": "fontFamily" }, + "premium": { "$value": "'Gilroy', 'Inter', system-ui, sans-serif", "$type": "fontFamily" } + }, + "font-size": { + "display-lg": { "$value": "3.5rem", "$type": "dimension" }, + "display-md": { "$value": "2.75rem", "$type": "dimension" }, + "display-sm": { "$value": "2.25rem", "$type": "dimension" }, + "headline-lg": { "$value": "2rem", "$type": "dimension" }, + "headline-md": { "$value": "1.75rem", "$type": "dimension" }, + "headline-sm": { "$value": "1.5rem", "$type": "dimension" }, + "title-lg": { "$value": "1.375rem", "$type": "dimension" }, + "title-md": { "$value": "1.125rem", "$type": "dimension" }, + "title-sm": { "$value": "1rem", "$type": "dimension" }, + "body-lg": { "$value": "1rem", "$type": "dimension" }, + "body-md": { "$value": "0.875rem", "$type": "dimension" }, + "body-sm": { "$value": "0.75rem", "$type": "dimension" }, + "label-md": { "$value": "0.75rem", "$type": "dimension" }, + "label-sm": { "$value": "0.6875rem", "$type": "dimension" } + }, + "font-weight": { + "regular": { "$value": 400, "$type": "fontWeight" }, + "medium": { "$value": 500, "$type": "fontWeight" }, + "semibold": { "$value": 600, "$type": "fontWeight" }, + "bold": { "$value": 700, "$type": "fontWeight" } + }, + "letter-spacing": { + "tight": { "$value": "-0.02em", "$type": "dimension", "$description": "Headlines — technical manual" }, + "normal": { "$value": "0", "$type": "dimension" }, + "wide": { "$value": "0.05em", "$type": "dimension", "$description": "Labels — machined look" }, + "wider": { "$value": "0.1em", "$type": "dimension", "$description": "Display pairs — engineering drawing" } + } + }, + + "radius": { + "none": { "$value": "0px", "$type": "dimension", "$description": "DEFAULT — Industrial Precision" }, + "full": { "$value": "9999px", "$type": "dimension", "$description": "Only for avatars/status indicators" } + }, + + "shadow": { + "ambient-light": { "$value": "0px 12px 32px 0px rgba(0, 28, 56, 0.06)", "$type": "shadow" }, + "ambient-dark": { "$value": "0px 12px 32px 0px rgba(0, 28, 56, 0.4)", "$type": "shadow" }, + "glow-primary": { "$value": "0px 0px 8px #9bcaff", "$type": "shadow", "$description": "Dark theme pulse line" } + }, + + "duration": { + "fast": { "$value": "150ms", "$type": "duration" }, + "normal": { "$value": "200ms", "$type": "duration" }, + "slow": { "$value": "300ms", "$type": "duration" } + } }, - "spacing": { - "component": { "$value": "{primitive.spacing.4}", "$type": "dimension" }, - "section": { "$value": "{primitive.spacing.12}", "$type": "dimension" } - } - }, - "component": { - "button": { - "bg": { "$value": "{semantic.color.primary}", "$type": "color" }, - "fg": { "$value": "{semantic.color.primary-foreground}", "$type": "color" }, - "hover-bg": { "$value": "{semantic.color.primary-hover}", "$type": "color" }, - "padding-x": { "$value": "{primitive.spacing.4}", "$type": "dimension" }, - "padding-y": { "$value": "{primitive.spacing.2}", "$type": "dimension" }, - "radius": { "$value": "{primitive.radius.md}", "$type": "dimension" }, - "font-size": { "$value": "{primitive.fontSize.sm}", "$type": "dimension" } + + "semantic": { + "$description": "Purpose-based aliases — light theme (default)", + + "surface": { + "default": { "$value": "{primitive.color.surface-light.low}", "$type": "color" }, + "container": { "$value": "{primitive.color.surface-light.mid}", "$type": "color" }, + "container-low": { "$value": "{primitive.color.surface-light.base}", "$type": "color" }, + "container-high": { "$value": "{primitive.color.surface-light.high}", "$type": "color" }, + "container-highest": { "$value": "{primitive.color.surface-light.highest}", "$type": "color" }, + "container-lowest": { "$value": "{primitive.color.surface-light.lowest}", "$type": "color" } + }, + "on-surface": { + "default": { "$value": "{primitive.color.neutral.900}", "$type": "color" }, + "variant": { "$value": "{primitive.color.neutral.700}", "$type": "color" } + }, + "primary": { + "default": { "$value": "{primitive.color.andritz-blue.500}", "$type": "color" }, + "text": { "$value": "{primitive.color.andritz-blue.600}", "$type": "color" }, + "container": { "$value": "{primitive.color.andritz-blue.500}", "$type": "color" }, + "on-primary": { "$value": "#ffffff", "$type": "color" }, + "fixed-dim": { "$value": "{primitive.color.andritz-blue.300}", "$type": "color" } + }, + "error": { + "default": { "$value": "{primitive.color.error.600}", "$type": "color" }, + "container": { "$value": "{primitive.color.error.100}", "$type": "color" }, + "on-error": { "$value": "#ffffff", "$type": "color" } + }, + "outline-variant": { "$value": "{primitive.color.neutral.300}", "$type": "color" }, + "ghost-border-opacity": { "$value": "0.15", "$type": "number" }, + "border": { "$value": "transparent", "$type": "color", "$description": "No-Line Rule" } }, - "input": { - "bg": { "$value": "{semantic.color.background}", "$type": "color" }, - "border": { "$value": "{semantic.color.border}", "$type": "color" }, - "focus-ring": { "$value": "{semantic.color.ring}", "$type": "color" }, - "padding-x": { "$value": "{primitive.spacing.3}", "$type": "dimension" }, - "padding-y": { "$value": "{primitive.spacing.2}", "$type": "dimension" }, - "radius": { "$value": "{primitive.radius.md}", "$type": "dimension" } + + "semantic-dark": { + "$description": "Purpose-based aliases — dark theme overrides", + + "surface": { + "default": { "$value": "{primitive.color.surface-dark.low}", "$type": "color" }, + "container": { "$value": "{primitive.color.surface-dark.mid}", "$type": "color" }, + "container-low": { "$value": "{primitive.color.surface-dark.base}", "$type": "color" }, + "container-high": { "$value": "{primitive.color.surface-dark.high}", "$type": "color" }, + "container-highest": { "$value": "{primitive.color.surface-dark.highest}", "$type": "color" }, + "container-lowest": { "$value": "{primitive.color.surface-dark.lowest}", "$type": "color" } + }, + "on-surface": { + "default": { "$value": "{primitive.color.neutral.200}", "$type": "color" }, + "variant": { "$value": "{primitive.color.neutral.300}", "$type": "color" } + }, + "primary": { + "default": { "$value": "{primitive.color.andritz-blue.500}", "$type": "color" }, + "text": { "$value": "{primitive.color.andritz-blue.300}", "$type": "color" }, + "container": { "$value": "{primitive.color.andritz-blue.500}", "$type": "color" }, + "on-primary": { "$value": "#ffffff", "$type": "color" }, + "fixed-dim": { "$value": "{primitive.color.andritz-blue.300}", "$type": "color" } + }, + "tertiary": { "$value": "{primitive.color.tertiary.500}", "$type": "color", "$description": "Caution tape — high contrast on navy" }, + "error": { + "default": { "$value": "{primitive.color.error.300}", "$type": "color" }, + "container": { "$value": "#93000a", "$type": "color" }, + "on-error": { "$value": "{primitive.color.error.100}", "$type": "color" } + }, + "outline-variant": { "$value": "{primitive.color.neutral.700}", "$type": "color" }, + "ghost-border-opacity": { "$value": "0.20", "$type": "number" } }, - "card": { - "bg": { "$value": "{primitive.color.white}", "$type": "color" }, - "border": { "$value": "{semantic.color.border}", "$type": "color" }, - "shadow": { "$value": "{primitive.shadow.default}", "$type": "shadow" }, - "padding": { "$value": "{primitive.spacing.6}", "$type": "dimension" }, - "radius": { "$value": "{primitive.radius.lg}", "$type": "dimension" } - } - }, - "dark": { - "semantic": { - "color": { - "background": { "$value": "{primitive.color.gray.950}", "$type": "color" }, - "foreground": { "$value": "{primitive.color.gray.50}", "$type": "color" }, - "secondary": { "$value": "{primitive.color.gray.800}", "$type": "color" }, - "muted": { "$value": "{primitive.color.gray.800}", "$type": "color" }, - "muted-foreground": { "$value": "{primitive.color.gray.400}", "$type": "color" }, - "border": { "$value": "{primitive.color.gray.800}", "$type": "color" } + + "component": { + "$description": "Component-specific tokens", + + "button": { + "primary-bg-gradient": { "$value": "linear-gradient(135deg, {semantic.primary.text}, {semantic.primary.default})", "$type": "gradient" }, + "primary-fg": { "$value": "{semantic.primary.on-primary}", "$type": "color" }, + "secondary-bg": { "$value": "{semantic.surface.container-high}", "$type": "color" }, + "secondary-fg": { "$value": "{semantic.primary.text}", "$type": "color" }, + "radius": { "$value": "{primitive.radius.none}", "$type": "dimension" }, + "padding-x": { "$value": "{primitive.spacing.6}", "$type": "dimension" }, + "padding-y": { "$value": "{primitive.spacing.2}", "$type": "dimension" }, + "active-scale": { "$value": "0.98", "$type": "number" }, + "text-transform": { "$value": "uppercase", "$type": "string" }, + "letter-spacing": { "$value": "{primitive.typography.letter-spacing.wide}", "$type": "dimension" } + }, + "input": { + "bg": { "$value": "{semantic.surface.container-highest}", "$type": "color" }, + "fg": { "$value": "{semantic.on-surface.default}", "$type": "color" }, + "border": { "$value": "none", "$type": "string", "$description": "No-Line Rule" }, + "focus-border-bottom": { "$value": "2px solid {semantic.primary.default}", "$type": "string" }, + "error-bg": { "$value": "{semantic.error.container}", "$type": "color" }, + "radius": { "$value": "{primitive.radius.none}", "$type": "dimension" } + }, + "card": { + "bg": { "$value": "{semantic.surface.container-lowest}", "$type": "color" }, + "fg": { "$value": "{semantic.on-surface.default}", "$type": "color" }, + "border": { "$value": "none", "$type": "string", "$description": "No-Line Rule" }, + "shadow": { "$value": "none", "$type": "shadow" }, + "shadow-elevated": { "$value": "{primitive.shadow.ambient-light}", "$type": "shadow" }, + "radius": { "$value": "{primitive.radius.none}", "$type": "dimension" }, + "padding": { "$value": "{primitive.spacing.6}", "$type": "dimension" }, + "zone-gap": { "$value": "{primitive.spacing.8}", "$type": "dimension" } + }, + "dialog": { + "overlay-bg": { "$value": "rgba(0, 28, 56, 0.5)", "$type": "color" }, + "bg": { "$value": "{semantic.surface.container-lowest}", "$type": "color" }, + "backdrop-blur": { "$value": "20px", "$type": "dimension" }, + "surface-opacity": { "$value": "0.85", "$type": "number" }, + "radius": { "$value": "{primitive.radius.none}", "$type": "dimension" }, + "shadow": { "$value": "{primitive.shadow.ambient-light}", "$type": "shadow" } + }, + "badge": { + "radius": { "$value": "{primitive.radius.none}", "$type": "dimension" }, + "text-transform": { "$value": "uppercase", "$type": "string" }, + "letter-spacing": { "$value": "{primitive.typography.letter-spacing.wide}", "$type": "dimension" } + }, + "table": { + "border": { "$value": "none", "$type": "string", "$description": "No divider lines — use whitespace or tonal shift" }, + "header-transform": { "$value": "uppercase", "$type": "string" }, + "header-tracking": { "$value": "{primitive.typography.letter-spacing.wide}", "$type": "dimension" }, + "row-separator": { "$value": "{primitive.spacing.8}", "$type": "dimension", "$description": "32px whitespace OR tonal shift" } } } } diff --git a/.claude/worktrees/agent-a4e356d1 b/.claude/worktrees/agent-a4e356d1 new file mode 160000 index 000000000..993ffbb31 --- /dev/null +++ b/.claude/worktrees/agent-a4e356d1 @@ -0,0 +1 @@ +Subproject commit 993ffbb314bd8fded3e78d25e3157d35349e01d0 diff --git a/.claude/worktrees/agent-a516d8c5 b/.claude/worktrees/agent-a516d8c5 new file mode 160000 index 000000000..fb20f834f --- /dev/null +++ b/.claude/worktrees/agent-a516d8c5 @@ -0,0 +1 @@ +Subproject commit fb20f834fd26a6e3899166fab4223d65174a54aa diff --git a/.claude/worktrees/agent-a55f7657 b/.claude/worktrees/agent-a55f7657 new file mode 160000 index 000000000..703a8caaf --- /dev/null +++ b/.claude/worktrees/agent-a55f7657 @@ -0,0 +1 @@ +Subproject commit 703a8caafd1c9db14fa180911928f7904a4ab038 diff --git a/.claude/worktrees/agent-a6c54e2f b/.claude/worktrees/agent-a6c54e2f new file mode 160000 index 000000000..d9311e8c0 --- /dev/null +++ b/.claude/worktrees/agent-a6c54e2f @@ -0,0 +1 @@ +Subproject commit d9311e8c00913fb64e270d0ab32a99f965d5d522 diff --git a/.claude/worktrees/agent-ab269d1f b/.claude/worktrees/agent-ab269d1f new file mode 160000 index 000000000..93508d8c9 --- /dev/null +++ b/.claude/worktrees/agent-ab269d1f @@ -0,0 +1 @@ +Subproject commit 93508d8c9ad2684652af110726446b6738e30c56 diff --git a/.claude/worktrees/agent-ad0e8912 b/.claude/worktrees/agent-ad0e8912 new file mode 160000 index 000000000..dbd32815d --- /dev/null +++ b/.claude/worktrees/agent-ad0e8912 @@ -0,0 +1 @@ +Subproject commit dbd32815dde99ada4b19628a6faebba01f8b4008 diff --git a/.claude/worktrees/agent-af31203c/.claude/worktrees/agent-a0577115 b/.claude/worktrees/agent-af31203c/.claude/worktrees/agent-a0577115 new file mode 160000 index 000000000..35c73c172 --- /dev/null +++ b/.claude/worktrees/agent-af31203c/.claude/worktrees/agent-a0577115 @@ -0,0 +1 @@ +Subproject commit 35c73c17220e14b82f4d2d76237c873c652d24fa diff --git a/.claude/worktrees/agent-af31203c/.claude/worktrees/agent-a7b64dd6 b/.claude/worktrees/agent-af31203c/.claude/worktrees/agent-a7b64dd6 new file mode 160000 index 000000000..193c74e02 --- /dev/null +++ b/.claude/worktrees/agent-af31203c/.claude/worktrees/agent-a7b64dd6 @@ -0,0 +1 @@ +Subproject commit 193c74e02510db0df9c41f128eecac5a3daf4d33 diff --git a/docs/andritz-design-system-plan.md b/docs/andritz-design-system-plan.md new file mode 100644 index 000000000..3a359772d --- /dev/null +++ b/docs/andritz-design-system-plan.md @@ -0,0 +1,108 @@ +# Andritz Design System - Implementation Plan + +> Created: 2026-04-15 +> Status: In Progress +> Scope: Replace generic design-system skill content with Andritz-specific tokens and specs + +## Context + +The `docs/refs/` directory contains comprehensive reference files for the "Andritz Precision" industrial design system — a complete Material Design token-based system with dark/light theme variants. The creative north star is "The Monolithic Engine": industrial precision, structural depth, monolithic presence. + +The existing `.claude/skills/design-system/` skill contains generic design system references (standard blue/gray Tailwind tokens). This plan replaces ALL generic content with Andritz-specific tokens and specs, so the skill becomes exclusively the Andritz Design System. + +## Key Andritz Design Principles + +- **0px border-radius** — no rounded corners ("Industrial Precision") +- **No-Line Rule** — no 1px borders for sectioning; use tonal shifts only +- **Glass & Gradient Rule** — gradient CTAs (primary→primary-container at 135°), glassmorphic overlays (85% opacity + 20px backdrop-blur) +- **Tonal Layering** — depth via surface stacking, not shadows +- **Typography** — Inter (primary), Gilroy (premium), "Blueprint Scale" with tight tracking +- **Ambient Shadows** — `0px 12px 32px 0px` at 6% (light) / 40% (dark) opacity, tinted navy + +## Color Palettes + +### Light Theme +| Token | Value | Usage | +|-------|-------|-------| +| surface | #f8fafb | Application floor | +| surface-container | #eceeef | Primary content regions | +| surface-container-low | #f2f4f5 | Sidebar/secondary sections | +| surface-container-high | #e6e8e9 | Interactive surfaces | +| surface-container-highest | #e1e3e4 | Prominent highlights | +| surface-container-lowest | #ffffff | Cards/modules for "pop" | +| primary (action) | #0075be | CTA containers | +| primary (text) | #005c97 | Text/iconography | +| primary-fixed-dim | #9bcaff | Light blue text/icons | +| on-surface | #191c1d | Primary text | +| on-surface-variant | #404751 | Secondary data | +| secondary | #49607f | Secondary accent | +| tertiary | #4b5a69 | Tertiary accent | +| error | #ba1a1a | Error states | +| error-container | #ffdad6 | Error backgrounds | +| outline-variant | #c0c7d2 | Ghost border (15% opacity) | + +### Dark Theme +| Token | Value | Usage | +|-------|-------|-------| +| surface | #10141a | Application void | +| surface-container | #1c2026 | Primary content | +| surface-container-low | #181c22 | Secondary sections | +| surface-container-high | #262a31 | Interactive surfaces | +| surface-container-highest | #31353c | Prominent highlights | +| surface-container-lowest | #0a0e14 | Deepest recesses | +| primary (text) | #9bcaff | Text/iconography | +| primary-container | #0075be | Action containers | +| on-surface | #dfe2eb | Primary text | +| on-surface-variant | #c0c7d2 | Secondary data | +| tertiary | #ffb781 | Warning/caution | +| error | #ffb4ab | Error states | +| outline-variant | #404751 | Ghost border (20% opacity) | +| on-secondary-fixed | #001c38 | Deepest black (replaces #000000) | + +## Typography Scale (Blueprint Scale) +| Level | Size | Weight | Tracking | Usage | +|-------|------|--------|----------|-------| +| Display L | 3.5rem | Bold | normal | Massive KPIs | +| Display M | 2.75rem | Bold | normal | Section headers | +| Display S | 2.25rem | Bold | normal | Sub-headers | +| Headline L | 2rem | SemiBold | -0.02em | Structural beams | +| Headline M | 1.75rem | SemiBold | -0.02em | Card headers | +| Headline S | 1.5rem | SemiBold | -0.02em | Sub-sections | +| Title L | 1.375rem | Medium | normal | Navigation | +| Title M | 1.125rem | Medium | normal | Card headers | +| Title S | 1rem | Medium | normal | List items | +| Body L | 1rem | Regular | normal | Content | +| Body M | 0.875rem | Regular | normal | Data | +| Body S | 0.75rem | Regular | normal | Dense data | +| Label M/S | 0.75rem | Medium | +0.05em | ALL CAPS buttons/tags | + +## Work Units (10 parallel tasks) + +1. **SKILL.md** — Rebrand to Andritz Design System +2. **references/design-philosophy.md** — NEW: Creative North Star ("The Monolithic Engine") +3. **references/token-architecture.md** — Andritz Three-Layer Architecture +4. **references/primitive-tokens.md** — Andritz Raw Values +5. **references/semantic-tokens.md** — Andritz Purpose Aliases (light + dark) +6. **references/component-tokens.md** — Andritz Component Tokens +7. **references/component-specs.md** — Andritz Component Specifications +8. **references/states-and-variants.md** — Andritz States & Interactions +9. **references/tailwind-integration.md** — Andritz Tailwind Config +10. **templates/design-tokens-starter.json** — Andritz Token Starter JSON + +## Do's and Don'ts + +### Do +- Use extreme whitespace — industrial sites are massive +- Use ALL CAPS for labels and small UI elements +- Align text to strict baseline grid +- Allow "Hero" elements to break 8px grid slightly +- Use on-surface-variant for metadata + +### Don't +- NEVER use border-radius (0px only) +- NEVER use pure black (#000000) — use on-secondary-fixed (#001c38) +- NEVER use decorative icons — must accompany functional action +- NEVER use 1px solid borders for sectioning +- NEVER use divider lines — use 24px+ empty space +- NEVER use 100% opaque white borders +- NEVER shrink text on data-heavy screens — expand the canvas diff --git a/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/a_professional_high_quality_industrial_or_technical_style_image_of_a_horse_suitable_for_an_engineering_knowledge_base_matching_the_andritz_precision_aesthetic._dark_clean_and_high_contrast_/screen.png b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/a_professional_high_quality_industrial_or_technical_style_image_of_a_horse_suitable_for_an_engineering_knowledge_base_matching_the_andritz_precision_aesthetic._dark_clean_and_high_contrast_/screen.png new file mode 100644 index 000000000..ca40611dc --- /dev/null +++ b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/a_professional_high_quality_industrial_or_technical_style_image_of_a_horse_suitable_for_an_engineering_knowledge_base_matching_the_andritz_precision_aesthetic._dark_clean_and_high_contrast_/screen.png @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/agent_deep_dive_dark/code.html b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/agent_deep_dive_dark/code.html new file mode 100644 index 000000000..a7a25fc54 --- /dev/null +++ b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/agent_deep_dive_dark/code.html @@ -0,0 +1,349 @@ + + + + + + + + + + + + + + + + +
+
+MONOLITH_v1.0 + +
+
+
+search + SEARCH SYSTEM ARCHIVE... +
+
+notifications +lan +account_tree +Operator Avatar +
+
+
+ +
+ +
+
+
+Live Instance +UUID: A-7782-X-DELTA +
+

AGENT_AURORA_01

+

Neural deployment specialized in autonomous logistics optimization. Currently processing multi-node transit sequences in the Northern Hemisphere cluster.

+
+
+ + +
+
+ +
+ +
+
+
+
+
+
+
+

Live Workspace Focus

+

Active Matrix Simulation

+
+
+FPS: 144 +Nodes: 14,022 +
+
+
+ +
+blur_on +
+
+
+
+X: 142.002 +Y: -89.441 +Z: 12.009 +
+
+
+
+
+
+
+
+
+
+ +
+ +
+

Neural Health

+
+
99.8%
+
+trending_up + OPTIMAL +
+
+
+
+
+
+ +
+
+
+

Response Latency

+

0.14 ms

+
+bolt +
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+

Memory Heap

+8.4 / 12 GB +
+
+ +
+
+70% +
+
+
+
+Static Cache +1.2 GB +
+
+Active Objects +6.8 GB +
+
+Buffer Overflow +0.4 GB +
+
+
+ +
+
+

Current Thread Execution

+ +
+
+
+
+check_circle +
+

DATA_INGESTION_SEQUENCE_09

+

Success: 1,492 points correlated

+
+
+2.1s ago +
+
+
+warning +
+

PATH_OPTIMIZATION_RETRY

+

Notice: Calculating alternative node routing

+
+
+Just now +
+
+
+cached +
+

MODEL_WEIGHT_ADJUSTMENT

+

In Progress: Gradient descent refinement...

+
+
+Running +
+
+
+
+ +
+
+
+ + Primary Cluster: EU-WEST-1 +
+
+ + API Uptime: 99.9992% +
+
+ + Last Backup: 12m ago +
+
+
+ MONOLITHIC_ENGINE v1.0.42_STABLE // BUILD_HASH: 0x9f228b1 +
+
+
+ \ No newline at end of file diff --git a/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/agent_deep_dive_dark/screen.png b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/agent_deep_dive_dark/screen.png new file mode 100644 index 000000000..4e46be5be Binary files /dev/null and b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/agent_deep_dive_dark/screen.png differ diff --git a/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/agent_training_hub_dark/code.html b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/agent_training_hub_dark/code.html new file mode 100644 index 000000000..7aebf14df --- /dev/null +++ b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/agent_training_hub_dark/code.html @@ -0,0 +1,351 @@ + + + + + +MONOLITH_v1.0 | Neural Engine Tuning + + + + + + + + + + + +
+
+MONOLITH_v1.0 + +
+
+ +
+notifications +lan +account_tree +
+Operator Avatar +
+
+ +
+ +
+
+
+Core System +

Neural Engine Tuning

+
+
+
+Active Gradients +0.000427_η +
+
+Global Loss +0.0128_δ +
+
+
+
+ +
+ +
+
+neurology +
+

Weight Distribution Heatmap

+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Sparsity Index +14.2% +
+
+Convergence Rate +Stable +
+
+ +
+
+ +
+
+

Hyperparameter Tuning

+
+
+
+Learning Rate +0.001 +
+ +
+
+
+Dropout Ratio +0.25 +
+ +
+
+
+Batch Normalization +ENABLED +
+
+
+
+
+
+
+
+

Activation Status

+
+Softmax_v4 + +
+
+ReLU_Inplace + +
+
+
+ +
+ +
+Input_Layer_01 +
+ +
+
+1,024 Neurons +check_circle +
+
+
+Hidden_Dense_02 +
+ +
+
+4,096 Neurons +check_circle +
+
+
+Recurrent_Cell_03 +
+ +
+
+512 Memory Nodes +warning +
+
+
+Output_Head_04 +
+ +
+
+Pending Compute +pending +
+
+
+ +
+
+ + + Live Optimization Stream + +
+
+
+
+
+
+
+

[SYS_CORE] Initializing training epoch 1,284...

+

[GRAD_SYNC] Synchronizing across 8 GPU nodes...

+

[WARN] Exploding gradient detected in Layer_03 (Recurrent_Cell). Applying clip_norm=1.0.

+

[SYS_CORE] Backpropagation complete. Delta loss: -0.000014.

+

[DATA] Input vector stream: 12.8 GB/s sustained.

+

_root@monolith:~# optimization_daemon --aggressive --focus=weights

+

[SYS_CORE] Adjusting momentum parameters to 0.992...

+

[SYS_CORE] Thermal stability verified at 42°C.

+
+
+
+
+The Monolithic Engine © 2024 +
+
+ \ No newline at end of file diff --git a/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/agent_training_hub_dark/screen.png b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/agent_training_hub_dark/screen.png new file mode 100644 index 000000000..0625a7811 Binary files /dev/null and b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/agent_training_hub_dark/screen.png differ diff --git a/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/andritz_precision/DESIGN.md b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/andritz_precision/DESIGN.md new file mode 100644 index 000000000..fc89033f7 --- /dev/null +++ b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/andritz_precision/DESIGN.md @@ -0,0 +1,100 @@ +# Design System Specification: Industrial Precision & Digital Depth + +## 1. Overview & Creative North Star: "The Monolithic Engine" +This design system moves beyond the standard industrial "dashboard" aesthetic to embrace a Creative North Star we call **The Monolithic Engine**. + +In industrial engineering, beauty is found in precision, massive scale, and the interplay of heavy materials. This system avoids the "cheapness" of thin lines and flat boxes. Instead, it treats the UI as a high-performance machine: solid, authoritative, and deeply layered. We break the traditional grid by utilizing "Structural Asymmetry"—using heavy-weighted typography and massive tonal blocks to anchor the eye, while allowing data-heavy elements to float in a sophisticated, layered environment. + +**Key Principles:** +* **Precision over Decoration:** Every element serves a functional purpose. +* **Structural Depth:** Hierarchy is defined by material stacking, not borders. +* **Monolithic Presence:** Large, bold type pairings create an editorial "Blueprint" feel. + +--- + +## 2. Colors: Tonal Architecture +The palette is rooted in deep oceanic navies and surgical greys. We are moving away from "flat UI" by using these tones to build a physical sense of depth. + +### The "No-Line" Rule +**Explicit Instruction:** 1px solid borders for sectioning are prohibited. Boundaries must be defined solely through background color shifts or tonal transitions. To separate a sidebar from a main content area, use a shift from `surface` (#f8fafb) to `surface-container-low` (#f2f4f5). + +### Surface Hierarchy & Nesting +Treat the UI as a series of machined plates. +* **Base:** `surface` (#f8fafb) – The floor of the application. +* **Secondary Plates:** `surface-container` (#eceeef) – Used for primary content regions. +* **Elevated Modules:** `surface-container-lowest` (#ffffff) – Used for data cards or interactive modules to provide "pop" against the grey background. + +### The "Glass & Gradient" Rule +To inject "soul" into the industrial aesthetic: +* **CTA Depth:** Use a subtle linear gradient on primary buttons transitioning from `primary` (#005c97) to `primary_container` (#0075be) at a 135-degree angle. +* **Industrial Frost:** For floating navigation or modal overlays, use `surface_container_lowest` at 85% opacity with a `20px` backdrop-blur. This keeps the data-heavy background visible but creates a clear functional layer. + +--- + +## 3. Typography: The Blueprint Scale +We utilize **Gilroy** (or a premium sans-serif alternative) to bridge the gap between engineering documentation and modern editorial design. + +* **Display (L/M/S):** Used for massive KPIs and section headers. These should feel like "stamped" metal—authoritative and immovable. +* **Headlines & Titles:** Set in **Gilroy-SemiBold**. These act as the structural beams of the layout. +* **Body & Labels:** Set in **Inter** or **Gilroy-Regular**. High-density data must remain legible; use `on_surface_variant` (#404751) for secondary data to maintain a clear hierarchy against primary values. + +**Editorial Tip:** Pair a `display-lg` metric with a `label-sm` (all caps, tracked out +10%) directly underneath to mimic an engineering technical drawing. + +--- + +## 4. Elevation & Depth: Tonal Layering +In this system, shadows are atmospheric, not structural. + +### The Layering Principle +Depth is achieved by "stacking." A `surface-container-lowest` card sitting on a `surface-container` background provides all the separation required. + +### Ambient Shadows +If a component must "float" (e.g., a critical alert or a primary dropdown): +* **Shadow:** 0px 12px 32px 0px. +* **Color:** Use `on_surface` at 6% opacity. This creates a natural "ambient occlusion" effect rather than a dated drop shadow. + +### The "Ghost Border" Fallback +If accessibility requires a container definition (e.g., in high-glare environments), use a **Ghost Border**: +* **Token:** `outline-variant` (#c0c7d2) at **15% opacity**. It should be felt, not seen. + +--- + +## 5. Components: Machined Components +All components feature **Sharp Corners (0px)**. No exceptions. This reinforces the industrial, high-precision nature of the brand. + +### Buttons +* **Primary:** Gradient fill (Primary to Primary-Container), white text, 0px radius. Heavy horizontal padding (24px) for a "solid" feel. +* **Secondary:** `surface-container-high` background with `on_primary_fixed_variant` text. No border. +* **Tertiary:** Text-only, capitalized, with a 2px bottom-heavy underline (using `surface_tint`) on hover. + +### Input Fields +* **State:** Use `surface-container-highest` for the background fill. +* **Focus:** A 2px solid `primary` (#005c97) **bottom-border only**. This mimics a ledger or a technical form. +* **Error:** Background shifts to `error_container`, text to `on_error_container`. + +### Cards & Lists +* **Rule:** Forbid divider lines. Use 32px of vertical white space or a subtle shift to `surface-container-low` to distinguish between list items. +* **Data Density:** In lists, use `title-sm` for primary values and `label-sm` for units (e.g., "450 **kg/h**"), keeping the units in a lighter weight. + +### Data Visualization (Industrial Custom) +* **Gauges:** Use sharp, non-rounded arcs. +* **Charts:** Fill areas under lines with a vertical gradient of `primary` to transparent to give data "weight." + +--- + +## 6. Do's and Don'ts + +### Do: +* **Do** use extreme whitespace. Industrial sites are massive; the UI should feel equally expansive. +* **Do** use "All Caps" for labels and small UI elements to evoke a sense of professional labeling. +* **Do** align text to a strict baseline grid to ensure the "Monolithic" feel remains organized. + +### Don't: +* **Don't** use any border-radius. A single rounded corner breaks the "Industrial Precision" logic. +* **Don't** use pure black (#000000). Use `on_secondary_fixed` (#001c38) for the deepest blacks to maintain tonal richness. +* **Don't** use icons as purely decorative elements. If an icon is used, it must accompany a functional action or a status. + +--- + +## 7. Designer's Note on Data Heavy Layouts +When designing "Data-Heavy" screens, do not shrink the text. Instead, expand the canvas. Use the `surface-container` tiers to group related data points into "Zones." A "Zone" should feel like a solid block of information that can be scanned at a glance, separated from other zones by significant tonal shifts rather than lines. This is the hallmark of a high-end, bespoke engineering tool. \ No newline at end of file diff --git a/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/asset_inventory/code.html b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/asset_inventory/code.html new file mode 100644 index 000000000..905382c65 --- /dev/null +++ b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/asset_inventory/code.html @@ -0,0 +1,415 @@ + + + + + + + + + + + + + + + + +
+ +
+
+

ANDRITZ INDUSTRIAL PORTAL

+
+ +
+
+
+notifications +
+
+settings +
+User profile +
+
+
+
+ +
+
+
+

Fleet Management

+

Digital Employees

+
+ +
+ +
+
+search + +
+
+
+Department +expand_more +
+
+Status +expand_more +
+
+
+
+ +
+ +
+
+
+
+
+
+smart_toy +
+
+

Kalyx-014

+

Logistics Optimizer

+
+
+
+ +ONLINE +
+
+
+
+Department +SUPPLY CHAIN +
+
+Uptime (24h) +99.98% +
+
+
+Token Consumption +12.4K / 15K +
+
+
+
+
+
+
+ +
+ +
+
+
+ +
+
+
+
+
+
+monitoring +
+
+

Nexus-9

+

Predictive Maintenance

+
+
+
+ +OFFLINE +
+
+
+
+Department +MAINTENANCE +
+
+Uptime (24h) +0.00% +
+
+
+Token Consumption +0 / 25K +
+
+
+
+
+
+
+ +
+ +
+
+
+ +
+
+
+
+
+
+psychology +
+
+

Eidos-Alpha

+

Strategic Planning

+
+
+
+ +ONLINE +
+
+
+
+Department +OPERATIONS +
+
+Uptime (24h) +100.0% +
+
+
+Token Consumption +4.2K / 50K +
+
+
+
+
+
+
+ +
+ +
+
+
+ +
+
+
+
+
+
+fact_check +
+
+

Vector-QA

+

Quality Assurance

+
+
+
+ +ONLINE +
+
+
+
+Department +PRODUCTION +
+
+Uptime (24h) +98.42% +
+
+
+Token Consumption +21.8K / 30K +
+
+
+
+
+
+
+ +
+ +
+
+
+ +
+person_add +Provision New Slot +
+
+
+
+ \ No newline at end of file diff --git a/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/asset_inventory/screen.png b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/asset_inventory/screen.png new file mode 100644 index 000000000..5c7506aa6 Binary files /dev/null and b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/asset_inventory/screen.png differ diff --git a/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/deployment_planner_dark/code.html b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/deployment_planner_dark/code.html new file mode 100644 index 000000000..d619fdc7c --- /dev/null +++ b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/deployment_planner_dark/code.html @@ -0,0 +1,399 @@ + + + + + +MONOLITH_v1.0 | Agent Fleet Deployment Planner + + + + + + + + + + + +
+
+
MONOLITH_v1.0
+ +
+
+
+ +
+
+ + + +
+Operator Avatar +
+
+
+
+ +
+ +
+ +
+Industrial Plant 3D + +
+
+ +
+
AGENT_042 (LOADER)
+
+
+
X: 24.5 | Y: 112.9
+
+
+
+
AGENT_018 (SORT)
+
+
+
STATUS: CALIBRATING
+
+
+
+ +
+
+
SIM_CONTROL
+
+ + + +
+
00:42:15:09
+
+
+
VIEW_MODES
+
+
+THERMAL_VIEW +
+
+
+
+
+COLLISION_GRID +
+
+
+
+
+
+
+
+ +
+
+
+

DEPLOYMENT_PLAN_v08

+
+Fleet_Active +Optimization_Pending +
+
+
+ + +
+
+ +
+ +
+
Resource_ID
+
+
+
+smart_toy +
+
+
AGENT_X1
+
Mobile Manipulator
+
+
+
+
+smart_toy +
+
+
AGENT_X2
+
Inventory Runner
+
+
+
+
+precision_manufacturing +
+
+
ARM_UNIT_04
+
Static Sorting
+
+
+
+
+smart_toy +
+
+
DRONE_V1
+
Aerial Survey
+
+
+
+
+ +
+ +
+
08:00
+
09:00
+
10:00
+
11:00
+
12:00
+
13:00
+
+ +
+ +
+
+Sub-Assembly_Transfer_04 +
+
+Recharge_Cycle +
+
+ +
+
+Pallet_Stock_Rotation +
+
+ +
+
+Precision_Sorting_H1 +
+
+Maintenance_Window +
+
+ +
+
+Pre-Flight_Scan +
+
+Facility_Integrity_Sweep +
+
+
+ +
+
09:45
+
+
+
+
+ +
+
+
+
+
Fleet Efficiency
+
94.2%
+
+
+bolt +
+
+
+
+Active Agents +12/14 +
+
+
+
+
+
+
+
Anomalies Detected
+
+
+
+
+
TEMP_ALARM: ARM_04
+
Motor thermal threshold 82%
+
+
+
+
+
+
PATH_BLOCK: AGENT_X2
+
Obstruction in Sector 7-C
+
+
+
+
+
+
+ \ No newline at end of file diff --git a/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/deployment_planner_dark/screen.png b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/deployment_planner_dark/screen.png new file mode 100644 index 000000000..3c1a6a61f Binary files /dev/null and b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/deployment_planner_dark/screen.png differ diff --git a/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/digital_employee_live_status_dark/code.html b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/digital_employee_live_status_dark/code.html new file mode 100644 index 000000000..becef76cc --- /dev/null +++ b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/digital_employee_live_status_dark/code.html @@ -0,0 +1,398 @@ + + + + + + + + + + + + + + + +
+ +
+
+MONOLITH_v1.0 + +
+
+
+search + +
+
+notifications +lan +account_tree +Operator Avatar +
+
+
+ +
+ +
+
+ +
+98.4% ++2.1% ↑ +
+
+
+
+
+
+
+
+memory +CPU LOAD +
+
14.2 THz
+
+
+
+
+
+
+
+
+
+
+bolt +ENERGY CAP +
+
4.21 MW
+
+
+
+
+
+
+
+
+
+ +
+
+Active Units +1,402 +
+
+
+
+smart_toy +
+
+

AGENT_X_99

+

Parsing Financial Audit

+
+
+
+
+
+support_agent +
+
+

CORP_ASSIST_04

+

L2 Technical Routing

+
+
+
+
+
+precision_manufacturing +
+
+

LOGS_OPTIMIZER

+

Idle / Synchronizing

+
+
+
+
+
+
+ +
+
+ +
+ +
+ +
+ +
+GLOBAL_OPERATIONS_MAP +NODE CLUSTER: ALPHA-7 +
+
+
+

Lat/Long

+

40.7128° N, 74.0060° W

+
+
+

Network

+

AES-512 SECURE

+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+

Compute Hub A

+

402 AGENTS

+

Status: Optimized

+
+
+

Data Pipeline B

+

118 AGENTS

+

Status: Queuing...

+
+
+

Global Mesh C

+

882 AGENTS

+

Status: Stable

+
+
+
+ +
+ +
+
+ + + Live Log Stream + +filter_list +
+
+
+[14:02:11] +CORE_INIT: +AGENT_092 Handshake successful. +
+
+[14:02:15] +WARN: +Latency peak detected in Region West-3. +
+
+[14:02:22] +TASK_DONE: +Financial_Rec_449 processed in 12ms. +
+
+[14:02:30] +DEBUG: +Memory garbage collection: 402MB freed. +
+
+[14:02:35] +CORE_INIT: +Deploying 12 instances to Batch-Node-9. +
+
+[14:02:40] +API_CALL: +Internal LLM routing via Monolith v1.0. +
+
+[14:02:45] +SYNC: +Database state propagated to 4 regions. +
+
+
+ +
+ +
+ + +
+ +
+ +
+
+hub +
+ +

NOMINAL

+

All 14 autonomous clusters are operating within baseline parameters.

+
+
+
+
+ +
+
+
+agent profile +agent profile +agent profile +
+
+
+

CLUSTER ALPHA

+

READY TO DEPLOY

+
+
+
+ \ No newline at end of file diff --git a/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/digital_employee_live_status_dark/screen.png b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/digital_employee_live_status_dark/screen.png new file mode 100644 index 000000000..1d0e69ab4 Binary files /dev/null and b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/digital_employee_live_status_dark/screen.png differ diff --git a/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/efficiency_heatmap_dark/code.html b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/efficiency_heatmap_dark/code.html new file mode 100644 index 000000000..9ae2f766c --- /dev/null +++ b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/efficiency_heatmap_dark/code.html @@ -0,0 +1,359 @@ + + + + + + + + + + + + + + + + +
+
+MONOLITH_v1.0 + +
+
+ +
+notifications +lan +account_tree +
+Operator Avatar +
+
+
+
+ +
+ +
+
+

OPERATIONAL HEATMAP

+

Real-time swarm intelligence visualization of facility agent clusters. Active operational nodes responding to dynamic resource requirements.

+
+
+
+SWARM EFFICIENCY +98.4% +
+
+ACTIVE CONFLICTS +02 +
+
+
+ +
+ +
+
+
+hub +FACILITY SECTOR 07G-ALPHA +
+
+ + +
+
+ +
+ +
+ +
+
+MAX +
+ +
+
+
+warning +HEAT SPIKE +
+
+
+ +
+
+
+ + + + + +
+
+
+
+
+
+ +
+
+
+Optimal Flow +
+
+
+Density Stress +
+
+
+Idle Node +
+
+
+ +
+ +
+
+

SWARM INTELLIGENCE

+REFRESH: 0.2s +
+
+
+
+NODE CLUSTER_049 +SYNCED +
+
+
+
+
+THROUGHPUT: 1.2 GB/S +LOAD: 85% +
+
+
+
+CRITICAL JUNCTION_X +RE-ROUTING +
+
+
+
+
+LATENCY: 420 MS +HEAT: 94°C +
+
+
+
+STORAGE ARRAY_B +STABLE +
+
+
+
+
+CAPACITY: 3.4 PB +LOAD: 34% +
+
+
+
+ +
+
+FACILITY FOOTPRINT +fullscreen +
+
+ +Industrial Facility Layout +
+ +
+
+
+
+
+
+
+
+
+ +
+
+Total Node Count +
+12,408 ++124 ACTIVE +
+
+
+Compute Power +
+842 TF +OPTIONAL +
+
+
+System Temp +
+62°C +CAUTION +
+
+
+Network Load +
+42.8% +UNDER CAP +
+
+
+
+
+ +
+ +
+ \ No newline at end of file diff --git a/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/efficiency_heatmap_dark/screen.png b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/efficiency_heatmap_dark/screen.png new file mode 100644 index 000000000..68250229e Binary files /dev/null and b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/efficiency_heatmap_dark/screen.png differ diff --git a/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/global_fleet_management_dark/code.html b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/global_fleet_management_dark/code.html new file mode 100644 index 000000000..da19584cf --- /dev/null +++ b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/global_fleet_management_dark/code.html @@ -0,0 +1,372 @@ + + + + + +ANDRITZ PRECISION | Fleet Management + + + + + + + + + +
+
+ANDRITZ PRECISION + +
+
+ +
+ + +
+Operational Supervisor Profile +
+
+
+
+ + + +
+
+ +
+
+

SYSTEM_CORE_OVERVIEW

+

Global Asset Matrix

+
+
+
+

Global Status

+

+ 98.2% +

+
+
+

Active Alerts

+

04

+
+
+
+ +
+ +
+
+ +
+Global Fleet Map + +
+ + + + +
+

UNIT_OMEGA_09

+

Lat: 48.2082 | Lon: 16.3738

+
+
+
+ + + + +
+
+ +
+
+REAL-TIME TELEMETRY +
+
+
+ + + +
+
+ +
+ +
+
+bolt +
+

Energy Throughput

+

412.8 MWh

+
+trending_up ++12.4% vs last period +
+
+ +
+
+

ASSET_HEALTH_MONITOR

+more_horiz +
+
+
+
+
+
+

TURBINE_S1_04

+

Operational - Stable

+
+
+0.02ms +
+
+
+
+
+

PUMP_STAT_02

+

Thermal Warning

+
+
+104.2°C +
+
+
+
+
+

GENERATOR_A12

+

Operational - Stable

+
+
+0.05ms +
+
+ +
+
+ +
+

Fleet Distribution

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+EU_NORTH +ASIA_PAC +AMER_WEST +
+
+
+ +
+

Total Units

+

2,840

+
+
+

Active Duty

+

2,712

+
+
+

Service Pending

+

128

+
+
+

Network Latency

+

12ms

+
+
+
+
+
+ +
+ +
+ \ No newline at end of file diff --git a/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/global_fleet_management_dark/screen.png b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/global_fleet_management_dark/screen.png new file mode 100644 index 000000000..d609c56bc Binary files /dev/null and b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/global_fleet_management_dark/screen.png differ diff --git a/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/knowledge_base/code.html b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/knowledge_base/code.html new file mode 100644 index 000000000..bb759bf45 --- /dev/null +++ b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/knowledge_base/code.html @@ -0,0 +1,311 @@ + + + + + + + + + + + + + + + +
+
+menu +

ANDRITZ PORTAL

+
+
+ +
+User Profile Avatar +
+
+
+ + + +
+
+ +
+
+
+Knowledge Repository +

Technical Insights

+
+
+search + +
+
+ +
+ + + + + + +
+
+ +
+ +
+
+
+Article Preview +
+
+
+
+Maintenance +12 MIN READ +
+

Optimizing Turbine Efficiency through AI-Driven Diagnostics

+

An in-depth look at how machine learning models are revolutionizing preventive maintenance for heavy industrial turbines in hydropower plants.

+
+
+
+Author +
+
+
Dr. Sarah Vance
+
Senior Systems Architect
+
+
+
+
+
+ +
+
+Article Preview +
+
+
+
+Automation +8 MIN READ +
+

The Future of SCADA Systems

+

Transitioning from legacy control systems to cloud-integrated industrial IoT frameworks.

+
+
+ + VIEW DOCUMENT arrow_forward + +
+
+
+ +
+
+Article Preview +
+
+
+
+Safety +15 MIN READ +
+

High-Voltage Safety Protocols

+

Essential risk mitigation strategies for field operators working in substations and generation units.

+
+
+ + VIEW DOCUMENT arrow_forward + +
+
+
+ +
+
+Article Preview +
+
+
+
+Mechanics +5 MIN READ +
+

Lubrication Science

+

Understanding synthetic lubricant behavior under extreme pressure and temperature conditions.

+
+
+ + VIEW DOCUMENT arrow_forward + +
+
+
+ +
+
+Article Preview +
+
+
+
+System Design +20 MIN READ +
+

Unit 4 Retrofit Overview

+

Documentation of the complete overhaul of the hydraulic control systems in Unit 4.

+
+
+ + VIEW DOCUMENT arrow_forward + +
+
+
+
+
+
+ + + \ No newline at end of file diff --git a/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/knowledge_base/screen.png b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/knowledge_base/screen.png new file mode 100644 index 000000000..dc504fc66 Binary files /dev/null and b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/knowledge_base/screen.png differ diff --git a/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/knowledge_base_dark/code.html b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/knowledge_base_dark/code.html new file mode 100644 index 000000000..c565b4570 --- /dev/null +++ b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/knowledge_base_dark/code.html @@ -0,0 +1,256 @@ + + + + + +Knowledge Base - Andritz Industrial Portal + + + + + + + + + + + +
+
+settings_input_component +

ENGINE_COMMAND

+
+
+ +sensors +
+
+
+ +
+
+
+Central Intelligence +

TECHNICAL INSIGHTS

+

+ Access the monolithic repository of industrial protocols, maintenance logs, and automation benchmarks. Precision-engineered for operational excellence. +

+
+
+
+search + +
+
+
+ +
+ + + + + + +
+
+ +
+
+ +
+
+
+CRITICAL_UPDATE +REV_04.22 +
+

PREDICTIVE MAINTENANCE:
THE NEURAL ENGINE PROTOCOL

+

Implementing machine learning clusters across heavy machinery to anticipate structural fatigue before system failure. An in-depth analysis of the Andritz predictive layer.

+ +
+
+ +
+
+
+insights +

TELEMETRY_DATA_MAP

+

Visualizing high-density sensor output streams across global asset clusters.

+
+QUERY_MAP open_in_new +
+
+
+terminal +

LOGISTICS_SCRIPT_V2

+

Automated supply chain triggers for spare part requisition protocols.

+
+READ_LOGS chevron_right +
+
+
+ +
+ +
+
+
+build +
+TS-4091 +
+
HYDRAULIC_CALIBRATION
+

Step-by-step technical guide for pressure relief valve synchronization on Unit-72 series.

+
+
+ + +
+24 REVIEWS +
+
+ +
+
+
+local_shipping +
+LG-8822 +
+
ROUTING_OPTIMIZATION
+

Heuristic algorithms for minimizing fuel consumption in heavy load logistics networks.

+
+UPDATED: 2H AGO +
+
+ +
+
+
+precision_manufacturing +
+AM-1104 +
+
ARM_PRECISION_SET
+

Micron-level calibration protocols for robotic welding stations in extreme heat environments.

+
+VERIFIED +
+
+
+
+ + + + + \ No newline at end of file diff --git a/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/knowledge_base_dark/screen.png b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/knowledge_base_dark/screen.png new file mode 100644 index 000000000..47ce24864 Binary files /dev/null and b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/knowledge_base_dark/screen.png differ diff --git a/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/maintenance_protocol_detail_dark/code.html b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/maintenance_protocol_detail_dark/code.html new file mode 100644 index 000000000..0ebe1c9b2 --- /dev/null +++ b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/maintenance_protocol_detail_dark/code.html @@ -0,0 +1,358 @@ + + + + + +Maintenance Protocol Detail | ANDRITZ PRECISION + + + + + + + + + +
+
+
+ANDRITZ PRECISION + +
+
+
+search + +
+
+ + +Operational Supervisor Profile +
+
+
+
+ + + +
+
+ +
+
+
+PROTOCOL ID: M-772-DELTA + +warning HIGH PRIORITY + +
+

VORTEX TURBINE CORE
LUBRICATION SEQUENCE

+

+ Precision maintenance procedure for high-velocity centrifugal units. Requires strict adherence to thermal cooling intervals and pressure equalization. +

+
+
+ + +
+
+ +
+ +
+
+
SCHEMATIC ALPHA-01
+
LIVESTREAM DATA: ACTIVE
+
+
+ +
+
+Technical turbine schematic + +
+
+
+

INJECTION NODE 04

+

45.2PSI

+
+
+
+
+ +
+
+

ENVIRONMENTAL_DIAGNOSTICS

+
+
+
+CORE TEMPERATURE +82°C / 110°C +
+
+
+
+
+
+
+LUBRICANT VISCOSITY +OPTIMAL +
+
+
+
+
+
+
+FLOW RATE +4.8 L/MIN +
+
+
+
+
+
+
+
+
+history +
+

LAST_SERVICE_ENTRY

+
+
+

OCT 12, 2023 - 14:22

+

Bearing Replacement (Unit B)

+
+
+

AUG 05, 2023 - 09:15

+

Annual Safety Calibration

+
+
+ +
+
+ +
+
+

Step-By-Step Protocol

+
+
+ +COMPLETED +
+
+ +PENDING +
+
+
+
+ +
+
01
+

SYSTEM DEPRESSURIZATION

+

+ Enguage safety relief valves at Module 4A. Monitor PSI drop until reach threshold of 5.0 PSI. +

+
+check_circle +Verified by System +
+
+ +
+
02
+

THERMAL EQUALIZATION

+

+ Apply active cooling vent Protocol C. Wait for core temperature to stabilize at 45°C before injection. +

+ +
+ +
+
03
+

PRECISION INJECTION

+

+ Inject Synthetic Grade-8 Lubricant via primary nozzle. Maintain flow rate of 2.2 L/min for 300 seconds exactly. +

+
+lock +Awaiting Step 02 +
+
+
+
+
+ +
+
+
+

SPECIFICATION_SHEET

+
    +
  • SERIAL: AND-PREC-88902-X
  • +
  • REVISION: v4.2.0-STABLE
  • +
  • OWNER: LOGISTICS_OPS
  • +
+
+ +
+
+

ENCRYPTED_DATA_STREAM

+

+ 66 72 65 65 20 74 68 65 20 6d 61 63 68 69 6e 65 20 73 70 69 72 69 74 2e 20 61 6c 70 68 61 20 6f 6d 65 67 61 20 30 31 30 31 31 +

+
+
+
+
+ + \ No newline at end of file diff --git a/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/maintenance_protocol_detail_dark/screen.png b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/maintenance_protocol_detail_dark/screen.png new file mode 100644 index 000000000..c6999f4da Binary files /dev/null and b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/maintenance_protocol_detail_dark/screen.png differ diff --git a/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/operational_logs/code.html b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/operational_logs/code.html new file mode 100644 index 000000000..0f4a0cdf8 --- /dev/null +++ b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/operational_logs/code.html @@ -0,0 +1,285 @@ + + + + + +ANDRITZ PORTAL - Operational Log + + + + + + + + + + + +
+
+menu +

ANDRITZ PORTAL

+
+ +
+ + + +
+
+ +
+
+
+System Monitoring +

Operational Logs

+
+
+
+Total Events +1,284 +
+
+Up-Time +99.8% +
+
+
+
+ +
+
+
+search + +
+
+Filter By: + + +
+
+
+ +
+ + + + +
+ +
+ +
+
+
+error +
+
+Unit ID +HYDR-PUMP-012 +
+
+Timestamp +2023-10-24 14:22:01 +
+
+Description +Critical pressure drop detected in Main Valve A +
+
+chevron_right +
+
+ +
+
+
+warning +
+
+Unit ID +CTRL-UNIT-B9 +
+
+Timestamp +2023-10-24 14:18:45 +
+
+Description +Temperature deviation exceeds ±2.5% threshold +
+
+chevron_right +
+
+ +
+
+
+build +
+
+Unit ID +TURBINE-G4 +
+
+Timestamp +2023-10-24 13:55:12 +
+
+Description +Routine filtration cycle initiated - 2500hr mark +
+
+chevron_right +
+
+ +
+
+
+check_circle +
+
+Unit ID +POWER-GRID-N1 +
+
+Timestamp +2023-10-24 13:40:00 +
+
+Description +Periodic system handshake completed successfully +
+
+chevron_right +
+
+ +
+
+
+handyman +
+
+Unit ID +COOL-SYS-X3 +
+
+Timestamp +2023-10-24 13:32:19 +
+
+Description +Coolant level replenished - Unit functional +
+
+chevron_right +
+
+
+ + +
+
+ + + + \ No newline at end of file diff --git a/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/operational_logs/screen.png b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/operational_logs/screen.png new file mode 100644 index 000000000..e6f0bf695 Binary files /dev/null and b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/operational_logs/screen.png differ diff --git a/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/operational_logs_dark/code.html b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/operational_logs_dark/code.html new file mode 100644 index 000000000..9fbd439da --- /dev/null +++ b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/operational_logs_dark/code.html @@ -0,0 +1,319 @@ + + + + + +Andritz Industrial Portal - Operational Logs + + + + + + + + + + + + +
+ +
+
+settings_input_component +

ENGINE_COMMAND

+
+
+ + +
+
+ +
+ +
+
+
+analytics +
+ +
+1.2K +REQ/S +
+
+
+ +
+04 +LAST 1H +
+
+
+
+ +LOAD: 42% +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+ + + + +
+
+search + +
+
+
+ +
+ +
+
TIMESTAMP
+
STATUS
+
RESOURCE
+
MESSAGE_PACKET
+
METRICS
+
+ +
+
14:22:01:004
+
+CRITICAL +
+
CORE_ENG_01
+
Thermal runaway detected in secondary turbine housing. Automatic venting initiated.
+
TEMP_FAIL: 104C
+
+ +
+
14:21:58:882
+
+SUCCESS +
+
PWR_MGMT_SYS
+
Redundancy switch completed successfully. Primary rail restored.
+
PWR_STBL: 1.0
+
+ +
+
14:21:45:110
+
+WARNING +
+
LOG_NODE_C
+
High latency detected in telemetry stream. Packet loss at 2.4%.
+
LAT_MS: 450
+
+ +
+
14:21:30:221
+
+INFO +
+
USER_OP_04
+
Diagnostic handshake initiated for Maintenance Subsystem B.
+
AUTH: LEVEL_2
+
+ +
+
14:21:12:009
+
+SUCCESS +
+
SYS_H_72
+
Scheduled database optimization completed. Freed 1.2GB buffer.
+
BUF_RLS: 1.2GB
+
+
+
14:20:55:414
+
+CRITICAL +
+
VALVE_CTRL
+
Electronic actuator failure on Valve V-091. Manual override required.
+
ACT_POS: FAIL
+
+
+
14:20:42:110
+
+WARNING +
+
COOL_PMP_A
+
Vibration levels exceeding nominal threshold (Delta > 15%).
+
VIB_RMS: 1.2G
+
+
+
+ + +
+ \ No newline at end of file diff --git a/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/operational_logs_dark/screen.png b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/operational_logs_dark/screen.png new file mode 100644 index 000000000..61f0dbb7f Binary files /dev/null and b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/operational_logs_dark/screen.png differ diff --git a/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/operational_performance_matrix_dark/code.html b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/operational_performance_matrix_dark/code.html new file mode 100644 index 000000000..e894d2dcd --- /dev/null +++ b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/operational_performance_matrix_dark/code.html @@ -0,0 +1,404 @@ + + + + + +ANDRITZ PRECISION | Operational Performance Matrix + + + + + + + + + +
+
+
+ANDRITZ PRECISION + +
+
+notifications +settings +
+ +
+
+
+
+ + + +
+ +
+
+
+

Operational Performance Matrix

+

Real-time throughput comparison and thermal efficiency diagnostic for NODE_A1 Cluster.

+
+
+
+Cluster Health +98.4% +
+
+Critical Alerts +02 +
+
+
+
+ +
+ +
+
+
+

Thermal Load Distribution

+

Comparative unit analysis across 24-hour cycle

+
+
+ + +
+
+ +
+ +
+
+
+
+
+
+
+
+
+
+ +Normal +
+
+ +Thermal Peak +
+
+ +
+
+ +
+

Unit Diagnostics

+
+
+Throughput Efficiency +92.4% +
+
+
+
+
+Peak Pressure Index +0.82 PSI+ +
+
+
+
+
+Vibration Harmonic +Low +
+
+
+
+
+
+
+warning +
+

Critical Maintenance

+

Turbine B-12 nearing failure cycle. Schedule overhaul.

+
+
+
+
+ +
+
+speed ++12.4% +
+

Current Output

+

4,821 kg/h

+
+
+
+
+
+
+
+
+ +
+
+bolt +-2.1% +
+

Energy Consumption

+

1.28 MW/h

+
+
+
+
+
+
+
+
+ +
+ +
+
+
+

Main Turbine Core

+

UNIT_ID: TRB_882_BETA

+
+
+
+Rotation Sync +4,200 RPM +
+
+refresh +
+
+
+
+ +
+
+

Sub-Unit Comparative Performance

+
+
+search + +
+ +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
IdentifierCurrent OutputLoad FactorEfficiency DeltaStatus
TRB-882-011,240 kg/h +
+
+
+
+2.4% +Operational +
TRB-882-021,120 kg/h +
+
+
+
0.0% +Operational +
TRB-882-03980 kg/h +
+
+
+
-4.8% +Stress Peak +
TRB-882-041,481 kg/h +
+
+
+
+8.1% +Optimal +
+
+
+
+
+ + + \ No newline at end of file diff --git a/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/operational_performance_matrix_dark/screen.png b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/operational_performance_matrix_dark/screen.png new file mode 100644 index 000000000..fdaa1ca24 Binary files /dev/null and b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/operational_performance_matrix_dark/screen.png differ diff --git a/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/real_time_sensor_matrix_dark/code.html b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/real_time_sensor_matrix_dark/code.html new file mode 100644 index 000000000..8d71026c4 --- /dev/null +++ b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/real_time_sensor_matrix_dark/code.html @@ -0,0 +1,486 @@ + + + + + + + + + + + + + + + + + + +
+
+ +
+
+System Status: Nominal +

REAL-TIME SENSOR MATRIX

+
+
+
+
+SYNC_CLOCK: 14:02:29:04 +
+
+filter_list +FILTER +
+
+
+ +
+ +
+
+
+
+
+

System Aggregate Throughput

+
+942.8 +Tb/s +
+
+
+STABLE +

+12.4% FROM BASELINE

+
+
+ +
+ + + + + + + + + + + + + + + +
+
+00:00 +06:00 +12:00 +18:00 +CURRENT +
+
+
+ +
+
+
+

Active Nodes

+hub +
+
+

1,204

+

98.2% ONLINE CAPACITY

+
+
+
+
+
+
+
+

Thermal Variance

+thermostat +
+
+

42.5°C

+

WARNING: NODE_B4 THRESHOLD

+
+
+
+
+
+
+ +
+

DISTRIBUTED SENSOR ARRAY

+
+Total: 48 Sensors +Active: 46 +
+
+ +
+ +
+
+
+

SNSR_X401_VIB

+

VIBRATION_AXIS_Z

+
+
+
+
+0.04mm/s +
+ + + +
+
+
+ +
+
+
+

SNSR_X402_PRS

+

HYDRAULIC_PRESSURE

+
+
+
+
+184.2bar +
+ + + +
+
+
+ +
+
+
+

SNSR_X403_TMP

+

GEARBOX_TEMP

+
+
+
+
+88.5°C +
+ + + +
+
+
+ +
+
+
+

SNSR_X404_RPM

+

MAIN_SHAFT_SPEED

+
+
+
+
+1,450rpm +
+ + + +
+
+
+ +
+
+
+

SNSR_X405_FLW

+

LUBRICANT_FLOW

+
+
+
+
+0.2l/min +
+ + + +
+
+
+ +
+
+
+

SNSR_X406_PWR

+

PHASE_VOLTAGE_A

+
+
+
+
+400.1V +
+ + + +
+
+
+ +
+
+
+

SNSR_X407_HUM

+

AMBIENT_HUMIDITY

+
+
+
+
+42% +
+ + + +
+
+
+ +
+
+
+

SNSR_X408_SON

+

ACOUSTIC_EMISSION

+
+
+
+
+12dB +
+ + + +
+
+
+
+ +
+
+

REAL-TIME LOG_STREAM

+
+
+
+
+
+
+
+

[14:02:44.02] INFO: NODE_A1_ACK_RECEIVED

+

[14:02:44.18] TRACE: SENSOR_X401_VIB HEARTBEAT_OK

+

[14:02:45.02] WARN: GEARBOX_TEMP EXCEEDING UPPER_L1

+

[14:02:45.33] TRACE: BUFFER_FLUSHING... 100%

+

[14:02:45.91] INFO: ANALYTICS_ENGINE_RECOMPUTING_MODEL

+

[14:02:46.10] ERROR: LUBRICANT_FLOW_RATE_CRITICAL

+

[14:02:46.45] TRACE: SENSOR_X402_PRS STABLE_STATE

+

[14:02:46.88] TRACE: SENSOR_X404_RPM SYNCED

+

[14:02:47.12] INFO: AUTO_MAINTENANCE_TICKET_GEN_ID_8821

+

[14:02:47.45] TRACE: SYSTEM_READY_FOR_INTERRUPT

+
+
+ +
+
+build_circle +
+
+

Predictive Maintenance Roadmap

+
+
+
MAR 14
+
+
+

UNIT_04 Lubricant Filter Replacement

+

PREDICTED FAILURE IN 48 HOURS

+
+ +
+
+
+
MAR 18
+
+
+

Main Shaft Calibration

+

ROUTINE QUARTERLY CHECK

+
+lock +
+
+
+
MAR 22
+
+
+

Thermal Sensor Array Retrofit

+

SYSTEM ENHANCEMENT

+
+lock +
+
+
+
+
+
+
+ + + \ No newline at end of file diff --git a/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/real_time_sensor_matrix_dark/screen.png b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/real_time_sensor_matrix_dark/screen.png new file mode 100644 index 000000000..343038a29 Binary files /dev/null and b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/real_time_sensor_matrix_dark/screen.png differ diff --git a/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/secure_operator_login/code.html b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/secure_operator_login/code.html new file mode 100644 index 000000000..f11bc2794 --- /dev/null +++ b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/secure_operator_login/code.html @@ -0,0 +1,193 @@ + + + + + +ANDRITZ PORTAL | Authentication + + + + + + + + + + +
+
+

ANDRITZ

+

Industrial Intelligence Portal v4.2

+
+ +
+
+

ACCESS

+
+
+
+ +
+ +
+ +
+badge +
+
+
+ +
+ +
+ +
+key +
+
+
+ +
+ +
+
+Secure Protocols +
+
+ +
+
+ +
+info +
+

+ This terminal is for authorized personnel only. All access attempts are logged and monitored by Unit 4 Security Systems. +

+
+
+
+ + + +
+
+
+ +
+
+ +
+high-tech industrial machinery with cold blue lighting and massive steel structures in a dark factory setting +
+ \ No newline at end of file diff --git a/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/secure_operator_login/screen.png b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/secure_operator_login/screen.png new file mode 100644 index 000000000..c107fba78 Binary files /dev/null and b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/secure_operator_login/screen.png differ diff --git a/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/secure_operator_login_dark/code.html b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/secure_operator_login_dark/code.html new file mode 100644 index 000000000..c38305f3f --- /dev/null +++ b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/secure_operator_login_dark/code.html @@ -0,0 +1,206 @@ + + + + + +ANDRITZ Industrial Portal - Secure Login + + + + + + + + + + + +
+
+
+
+
+
+ +
+
+ +
+
+settings_input_component +
+

+ ANDRITZ ACCESS +

+

+ Industrial Portal • Sec-Ops Layer 7 +

+
+ +
+
+ +
+ +
+
+badge +
+ +
+
+ +
+ +
+
+key +
+ +
+
+
+ +
+ +
+
+OR +
+
+ +
+ +
+ +
+
+

Node Status

+

ENCRYPTED

+
+
+

Gateway

+

192.168.0.01

+
+
+

Active Sync

+

STABLE

+
+
+
+
+ +
+
+
+System Status: OPERATIONAL - ALL NODES ONLINE +
+
+Terminal: #TX-091-ALPHA +Uptime: 432:12:08 +sensors +
+
+ \ No newline at end of file diff --git a/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/secure_operator_login_dark/screen.png b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/secure_operator_login_dark/screen.png new file mode 100644 index 000000000..f2c26b202 Binary files /dev/null and b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/secure_operator_login_dark/screen.png differ diff --git a/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/system_health_audit_log_dark/code.html b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/system_health_audit_log_dark/code.html new file mode 100644 index 000000000..27af2e324 --- /dev/null +++ b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/system_health_audit_log_dark/code.html @@ -0,0 +1,404 @@ + + + + + + + + + + + + + +
+
+ANDRITZ PRECISION +
+
+search + +
+
+
+ + +
+ +
+
+
+ +
+
+
+
+

SYSTEM AUDIT STREAM

+
+ SYSTEM_ONLINE +| +NODE_ID: AX-990-ALPHA +| +v4.2.1-STABLE +
+
+
+ + +
+
+
+
+
Events / 24h
+
1,402,891
+
+
+
+
+
+
+
+
+
+
+
Critical Faults
+
03
+
99.8% reduction from avg.
+
+
+
Mean Resp. Time
+
14ms
+
+trending_up + OPTIMIZED +
+
+
+
Storage Load
+
42%
+
+
+
+
+
+
+
+
+ + +
+
+
+ +ERROR +
+
+ +WARN +
+
+ +INFO +
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TIMESTAMPLEVELSOURCE_IDEVENT_CODEPAYLOAD_SUMMARY
2024-05-20T14:22:01.049ZINFOSRV-MAIN-01SYS_BEAT_001"System heartbeat pulse detected from primary core..."
2024-05-20T14:21:58.882ZWARNTHERM-A-12TEMP_THR_HI"Threshold exceeded on sensor group Alpha-12. Current: 78C"
2024-05-20T14:21:55.109ZINFOAUTH-GATE-04LOGIN_SUCCESS"User: Admin_44 verified via biometric token protocol."
2024-05-20T14:21:42.002ZERRORSQL-DATA-XDB_CONN_TIMEOUT"Connection dropped after 5000ms. Retrying connection..."
2024-05-20T14:21:39.918ZINFOSRV-MAIN-01CRON_JOB_CMPL"Nightly database optimization task completed successfully."
2024-05-20T14:21:35.452ZINFONET-EDGE-02TRAFFIC_ROUTED"Packet redistribution to failover region complete."
+
+
+Showing 100 of 1.4M events +
+ + +
PAGE 01
+ + +
+
+
+
+
+
+

Visual Volume Distribution

+
+
+ +NODE_A +
+
+ +NODE_B +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+00:00 +04:00 +08:00 +12:00 +16:00 +20:00 +
+
+
+

FAULT TOPOLOGY

+
+
+
+CRITICAL_EXCEPTION +14:21:42 +
+
SQL_CONN_FAILURE on DB_CLUSTER_MAIN. Active failover initiated.
+
+
+
+LATENCY_WARNING +14:18:05 +
+
Response time spike > 500ms on US-EAST region gateway.
+
+
+
+AUTH_THROTTLED +14:15:33 +
+
Brute force protection active for IP 192.168.1.104.
+
+
+ +
+
+
+
+
+
+ © 2024 ANDRITZ PRECISION SYSTEMS - ENCRYPTED SESSION +
+
+ SECURE +L:14.22.01 // AX-990-ALPHA +
+
+ \ No newline at end of file diff --git a/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/system_health_audit_log_dark/screen.png b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/system_health_audit_log_dark/screen.png new file mode 100644 index 000000000..256800b23 Binary files /dev/null and b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/system_health_audit_log_dark/screen.png differ diff --git a/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/the_monolithic_engine/DESIGN.md b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/the_monolithic_engine/DESIGN.md new file mode 100644 index 000000000..e7c9cb6bf --- /dev/null +++ b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/the_monolithic_engine/DESIGN.md @@ -0,0 +1,78 @@ +# Design System: The Monolithic Engine + +## 1. Overview & Creative North Star +The Creative North Star for this design system is **"The Monolithic Engine."** + +This is not a standard "dark mode" update; it is an exercise in structural weight and industrial precision. We are moving away from the "floating card" aesthetic of modern SaaS and toward a digital architecture that feels carved from solid carbon and steel. The experience must feel like a high-end industrial command center—authoritative, dense, and technically superior. + +To break the "template" look, we utilize **intentional asymmetry**. Align heavy data blocks to a rigid left-axis while allowing secondary metadata to "float" with generous whitespace. We use the contrast between the technical precision of **Inter** and the geometric authority of **Gilroy** to create an editorial layout that feels like a premium technical journal. + +--- + +## 2. Colors: Tonal Power +Our palette is rooted in the deep shadows of heavy machinery. We do not use "black"; we use varying densities of charcoal and midnight navy to create a sense of infinite depth. + +### The Palette (Material Design Tokens) +* **Surface / Background:** `#10141a` (The base "void") +* **Primary (Andritz Blue):** `#9bcaff` (Text/Iconography) / `#0075be` (Action Containers) +* **Surface Tiers:** + * `surface_container_lowest`: `#0a0e14` (Deepest recesses, used for background negative space) + * `surface_container_low`: `#181c22` (Secondary sections) + * `surface_container_high`: `#262a31` (Interactive surfaces) + * `surface_container_highest`: `#31353c` (Prominent highlights) + +### The "No-Line" Rule +**Explicit Instruction:** Prohibit the use of 1px solid borders for sectioning. Boundaries must be defined solely through background color shifts. A `surface_container_low` section sitting on a `surface` background is the only "border" you need. This creates a seamless, monolithic feel rather than a "boxed-in" interface. + +### The "Glass & Gradient" Rule +To inject "visual soul" into the industrial framework, main CTAs and Hero sections must utilize a linear gradient: `primary_container` (#0075be) transitioning to a slightly darker shift. For floating overlays, use **Glassmorphism**: semi-transparent surface colors with a `20px` backdrop-blur to maintain the "The Monolithic Engine" depth. + +--- + +## 3. Typography: Technical Authority +We use typography to convey industrial precision. **Gilroy** (where available for headers) provides the geometric "Monolithic" weight, while **Inter** handles the high-density data. + +* **Display (L/M/S):** Inter | 3.5rem to 2.25rem. Use for high-impact KPIs and section headers. Bold weights only. +* **Headline (L/M/S):** Inter | 2rem to 1.5rem. Tight letter-spacing (-0.02em) to evoke a "technical manual" aesthetic. +* **Title (L/M/S):** Inter | 1.375rem to 1rem. Medium weight. This is your primary navigation and card header tier. +* **Body (L/M/S):** Inter | 1rem to 0.75rem. Regular weight. Ensure `on_surface_variant` (#c0c7d2) is used for secondary body text to maintain hierarchy. +* **Label (M/S):** Inter | 0.75rem. All-caps with +0.05em tracking for a "machined" look on buttons and tags. + +--- + +## 4. Elevation & Depth: Tonal Layering +In this system, depth is not "up"; it is "in." We move away from traditional shadows toward **Tonal Layering**. + +* **The Layering Principle:** Stack surfaces to create focus. Place a `surface_container_highest` card on a `surface_container_low` background. This creates a natural "lift" through luminance rather than artificial shadow. +* **Ambient Shadows:** If an element must float (e.g., a Modal), use a tinted shadow: `rgba(0, 28, 56, 0.4)` with a 32px blur. It should feel like a soft glow emitted from the engine, not a grey drop shadow. +* **The "Ghost Border" Fallback:** If accessibility requires a stroke, use `outline_variant` (#404751) at **20% opacity**. It should be felt, not seen. + +--- + +## 5. Components +Each component should feel like a precision-milled part of a larger machine. + +* **Buttons:** + * **Primary:** Solid `primary_container` (#0075be) with `on_primary_container` text. No border. Radius: `md` (0.375rem). + * **Secondary:** `surface_container_highest` background with a `Ghost Border`. +* **Cards:** Forbid divider lines. Use vertical whitespace (1.5rem+) or a shift to `surface_container_low` to separate content. +* **Input Fields:** Use `surface_container_lowest` for the field background to create an "inset" look. Focus state is a 2px `primary` bottom-border only—no full box focus. +* **Chips:** Minimalist. Use `secondary_container` with `label-md` typography. No icons unless strictly functional. +* **Data Visualization (Industrial Specific):** + * **The Pulse Line:** Graphs should use `primary` (#9bcaff) with a subtle outer glow (0px 0px 8px). + * **Status Indicators:** Use `tertiary` (#ffb781) for warnings—it provides a "caution tape" high-contrast feel against the navy base. + +--- + +## 6. Do's and Don'ts + +### Do: +* **Do** use extreme vertical spacing. Let the "Monolith" breathe. +* **Do** use `on_surface_variant` for metadata. Contrast is our primary tool for hierarchy. +* **Do** align all technical data to a strict 8px grid, but allow "Hero" elements to break the grid slightly for visual interest. + +### Don't: +* **Don't** use pure black (#000000). It kills the depth of the "Engine." +* **Don't** use 100% opaque white borders. They feel cheap and "out-of-the-box." +* **Don't** use rounded corners larger than `xl` (0.75rem). We want "Sharp & Technical," not "Soft & Consumer." +* **Don't** use standard dividers. If you think you need a line, use 24px of empty space instead. \ No newline at end of file diff --git a/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/user_management_permissions_dark/code.html b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/user_management_permissions_dark/code.html new file mode 100644 index 000000000..1fbac7247 --- /dev/null +++ b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/user_management_permissions_dark/code.html @@ -0,0 +1,495 @@ + + + + + +ANDRITZ PRECISION | User Management + + + + + + + + + +
+
+
+ANDRITZ PRECISION + +
+
+ + + +
+Operational Supervisor Profile +
+
+
+
+ + + +
+
+ +
+
+

Security Infrastructure

+

USER_PERMISSIONS

+
+
+ + +
+
+ +
+
+

Active Sessions

+
+128 +NODE_04 +
+
+
+

Global Permissions

+
+1,242 +V3_RULES +
+
+
+

System Health

+
+99.9% +NOMINAL +
+
+
+

Security Level

+
+EAL5+ +ENFORCED +
+
+
+ +
+ +
+
+

+shield + PERMISSION_EDITOR +

+
+
+ +
+m.chen@andritz.sys +unfold_more +
+
+
+ +
+ + +
+
+
+ + +
+
+ +
+
+
+
+
+

SYSTEM_ALERTS

+
+
+
+
+
+

Unauthorized access attempt

+

NODE_A1 : PORT_8080 : 12m ago

+
+
+
+
+
+

Routine log rotation successful

+

SYS_DAEMON : 45m ago

+
+
+
+
+
+ +
+
+

Authorized_Personnel_Index

+
+ + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Operator_IdentityClearanceNode_AccessStatusActions
+
+
MC
+
+
Marcus Chen
+
m.chen@precision.sys
+
+
+
+LvL_09 + +
+GLOBAL, +CORE_01 +
+
+
+
+Active +
+
+ +
+
+Elena Rodriguez +
+
Elena Rodriguez
+
e.rodriguez@precision.sys
+
+
+
+LvL_04 + +
+UNIT_04, +UNIT_07 +
+
+
+
+Standby +
+
+ +
+
+
AK
+
+
Arjun Kapoor
+
a.kapoor@precision.sys
+
+
+
+ROOT_ADMIN + +
+UNRESTRICTED +
+
+
+
+Active +
+
+ +
+
+
SL
+
+
Sarah Lund
+
s.lund@precision.sys
+
+
+
+LvL_02 + +
+LOG_VIEWER +
+
+
+
+Suspended +
+
+ +
+
+ +
+Page 01 OF 24 +
+ + +
+
+
+
+ +
+
+

REALTIME_AUDIT_TRAIL

+LIVE_CONNECTION_ESTABLISHED +
+
+
+
+troubleshoot +
+
+
+2024-05-24 14:22:01.004 +AUTH_SUCCESS +Subject: Marcus Chen | Action: ElevatePrivileges (LvL_09) +
+
+2024-05-24 14:22:05.821 +WRITE_ACCESS +Subject: Elena Rodriguez | Resource: NODE_04_PUMP_VALVE_ST01 +
+
+2024-05-24 14:22:12.449 +ACCESS_DENY +Subject: Guest_9921 | Reason: Expired_Token_Exception +
+
+2024-05-24 14:22:18.001 +SYSTEM_INFO +Maintenance script triggered automatically: LOG_PURGE_v2 +
+
+
+
+
+

Traffic Heatmap

+
+
+
+
+
+
+
+
+
+
+
+
+
+

VIEW EXTENDED LOGS

+

Access full archival storage

+
+arrow_forward +
+
+
+
+
+
+ + + \ No newline at end of file diff --git a/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/user_management_permissions_dark/screen.png b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/user_management_permissions_dark/screen.png new file mode 100644 index 000000000..9bc1f9e1c Binary files /dev/null and b/docs/refs/stitch_andritz_style_app_dark/stitch_andritz_style_app/user_management_permissions_dark/screen.png differ diff --git a/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/agent_deep_dive_light/code.html b/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/agent_deep_dive_light/code.html new file mode 100644 index 000000000..0695bd40b --- /dev/null +++ b/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/agent_deep_dive_light/code.html @@ -0,0 +1,366 @@ + + + + + +Individual Agent Performance Detail | MONOLITH_v1.0 + + + + + + + + + +
+
+MONOLITH_v1.0 + +
+
+
+ +
+
+notifications +lan +account_tree +
+
+Operator Avatar +
+
+
+
+
+
+
+
+Active +ID: AX-2094-OMEGA +
+

Agent_Atlas

+

High-Frequency Supply Chain Optimizer. Specialized in neural routing and predictive inventory balancing across Tier-1 logistics hubs.

+
+
+
+Status +
+
+Optimal +
+
+
+Up-time +99.98% +
+
+
+
+
+
+
+

Resource Utilization History

+
+
+
+Neural Load +
+
+
+Memory Usage +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+00:00 HRS +06:00 HRS +12:00 HRS +18:00 HRS +CURRENT +
+
+
+

Recent Task Execution

+
+
+
+01 +
+Logistics Optimization +

Route Re-calculation for Zone Delta

+
+
+
+Impact ++12.4% EFF +
+
+
+
+02 +
+Anomaly Detection +

Sensor Fusion Drift Correction

+
+
+
+Impact +STABLE +
+
+
+
+03 +
+Market Analysis +

Predictive Fuel Hedging Strategy

+
+
+
+Impact +SAVINGS_800K +
+
+
+
+
+
+
+
+
+ +

Thought Stream (Live)

+
+L-STREAM: V4.2 +
+
+
+[08:42:11] SCAN_INPUTS: Receiving latency spike from Zone B routers. +
+
+[08:42:12] ANALYZE_PROBABILITY: 0.94% chance of packet loss at hub. +
+
+[08:42:13] DECISION_NODE: Re-routing traffic through satellite redundant mesh. +
+
+[08:42:15] EXECUTE: Mesh protocols engaged. Latency normalized. +
+
+[08:42:18] IDLE: Awaiting next task cycle. +
+
+[08:42:20] SCANNING_SENSORS... +
+
+
+
+Core Confidence +98.2% +
+
+
+
+
+
+
+

Performance vs Benchmarks

+
+
+
+Cognitive Speed ++14% Over Baseline +
+
+
+
+
+Avg. Agent +Current +
+
+
+
+Error Resilience +Top 1% Global +
+
+
+
+
+
+
+Energy Efficiency +-0.4% Below Opt +
+
+
+
+
+
+
+
+Hardware Microchip +
+
+Hardware Node +

CLUSTER_ZETA_04

+
+
+
+
+
+
+ © 2024 MONOLITH_INDUSTRIAL_CORE. ALL SYSTEMS OPERATIONAL. +
+
+ + + +
+
+
+
+ \ No newline at end of file diff --git a/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/agent_deep_dive_light/screen.png b/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/agent_deep_dive_light/screen.png new file mode 100644 index 000000000..6280a41c6 Binary files /dev/null and b/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/agent_deep_dive_light/screen.png differ diff --git a/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/agent_training_hub_light/code.html b/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/agent_training_hub_light/code.html new file mode 100644 index 000000000..ff182ac75 --- /dev/null +++ b/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/agent_training_hub_light/code.html @@ -0,0 +1,369 @@ + + + + + +MONOLITH_v1.0 | Digital Employee Training + + + + + + + + + + + +
+ +
+
+
MONOLITH_v1.0
+ +
+
+
+ +
+
+notifications +lan +account_tree +
+
+Operator Avatar +
+
+
+ +
+ +
+
+

Training_Module_09

+

Specialized Neural Optimization Environment // Subsystem: Logic_Sets

+
+
+
+
98.4%
+
Global Accuracy
+
+
+
+
0.02%
+
Critical Errors
+
+
+
+ +
+ +
+
+
+Live_Data +

Convergence Analytics

+
+
+ + +
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+

Error Rate Analysis

+
+
+
+Semantic Drift +12% INC. +
+
+
+
+
+
+
+Logic Hallucination +2% DEC. +
+
+
+
+
+
+
+Response Latency +STABLE +
+
+
+
+
+
+
+
+
Last Audit
+
04:22:15 UTC
+
+verified_user +
+
+ +
+
+
+
+
+
+
+SANDBOX_ENVIRONMENT_v4 +
+ +
+
+

01 import monolith_core

+

02

+

03 // Initialize synthetic logic set for validation

+

04 const logicSet = monolith_core.load("agent_schema_v2.json");

+

05

+

06 function validateAgent(params) {

+

07     return logicSet.eval(params).then(res => {

+

08         console.log(`AGENT_RES: ${res.accuracy}`);

+

09     });

+

10 }

+

11 _

+
+
+
+
+

Training Controls

+
+
+ + +
+
+ + +
+
+
+
+ + +
+
+
+ +
+
+
+ +
+
+
Architecture
+
Quantum_Nodes_v2
+
+
+
+
+ +
+
+
Deployment
+
Edge_Computing_Pool
+
+
+
+
+ +
+
+
Connectivity
+
Low_Latency_Sync
+
+
+
+
+ +
+
+
Compute
+
Titan_Cluster_Omega
+
+
+
+
+
+
+ +
+
+
+
+
+
+
System Optimal
+
NODE_LATENCY: 4ms
+
+
+ \ No newline at end of file diff --git a/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/agent_training_hub_light/screen.png b/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/agent_training_hub_light/screen.png new file mode 100644 index 000000000..8e22cd858 Binary files /dev/null and b/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/agent_training_hub_light/screen.png differ diff --git a/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/analytics_reports/code.html b/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/analytics_reports/code.html new file mode 100644 index 000000000..6968f6366 --- /dev/null +++ b/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/analytics_reports/code.html @@ -0,0 +1,364 @@ + + + + + + + + + + + + + + + +
+
+
+
+Operational Overview +

Analytics & Reports

+
+
+
+calendar_today +Oct 01, 2023 - Oct 31, 2023 +expand_more +
+ +
+
+
+
+
+
+
+

Performance Over Time

+Metric: Overall Equipment Effectiveness (OEE) +
+
+
+Current Value +94.2% +
+
+30d Variance ++1.4% +
+
+
+
+
+ + + + + + + + + + + + + +
+OCT 01 +OCT 05 +OCT 10 +OCT 15 +OCT 20 +OCT 25 +OCT 31 +
+
+
+
+
+
+

Asset Distribution

+By Deployment Status +
+
+
+ + + + + + +
+842 +Total Assets +
+
+
+
+
+
+Active +
+547 +
+
+
+
+Maintenance +
+168 +
+
+
+
+Standby +
+127 +
+
+
+
+
+
+

Efficiency by Department

+Target: 95% Yield +
+
+
+
+Hydraulic Systems +98.2% +
+
+
+
+
+
+
+Pulp & Paper +91.5% +
+
+
+
+
+
+
+Metals Processing +87.8% +
+
+
+
+
+
+
+Hydro Power +94.0% +
+
+
+
+
+
+
+
+
+
+Active Faults +
+04 +warning +
+
+
+Energy Usage +
+1.2 +MWh +
+
+
+Throughput +
+14.8 +t/h +
+
+
+Uptime +
+99.98 +% +
+
+
+
+
+ + \ No newline at end of file diff --git a/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/analytics_reports/screen.png b/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/analytics_reports/screen.png new file mode 100644 index 000000000..3e3bad866 Binary files /dev/null and b/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/analytics_reports/screen.png differ diff --git a/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/andritz_precision/DESIGN.md b/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/andritz_precision/DESIGN.md new file mode 100644 index 000000000..fc89033f7 --- /dev/null +++ b/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/andritz_precision/DESIGN.md @@ -0,0 +1,100 @@ +# Design System Specification: Industrial Precision & Digital Depth + +## 1. Overview & Creative North Star: "The Monolithic Engine" +This design system moves beyond the standard industrial "dashboard" aesthetic to embrace a Creative North Star we call **The Monolithic Engine**. + +In industrial engineering, beauty is found in precision, massive scale, and the interplay of heavy materials. This system avoids the "cheapness" of thin lines and flat boxes. Instead, it treats the UI as a high-performance machine: solid, authoritative, and deeply layered. We break the traditional grid by utilizing "Structural Asymmetry"—using heavy-weighted typography and massive tonal blocks to anchor the eye, while allowing data-heavy elements to float in a sophisticated, layered environment. + +**Key Principles:** +* **Precision over Decoration:** Every element serves a functional purpose. +* **Structural Depth:** Hierarchy is defined by material stacking, not borders. +* **Monolithic Presence:** Large, bold type pairings create an editorial "Blueprint" feel. + +--- + +## 2. Colors: Tonal Architecture +The palette is rooted in deep oceanic navies and surgical greys. We are moving away from "flat UI" by using these tones to build a physical sense of depth. + +### The "No-Line" Rule +**Explicit Instruction:** 1px solid borders for sectioning are prohibited. Boundaries must be defined solely through background color shifts or tonal transitions. To separate a sidebar from a main content area, use a shift from `surface` (#f8fafb) to `surface-container-low` (#f2f4f5). + +### Surface Hierarchy & Nesting +Treat the UI as a series of machined plates. +* **Base:** `surface` (#f8fafb) – The floor of the application. +* **Secondary Plates:** `surface-container` (#eceeef) – Used for primary content regions. +* **Elevated Modules:** `surface-container-lowest` (#ffffff) – Used for data cards or interactive modules to provide "pop" against the grey background. + +### The "Glass & Gradient" Rule +To inject "soul" into the industrial aesthetic: +* **CTA Depth:** Use a subtle linear gradient on primary buttons transitioning from `primary` (#005c97) to `primary_container` (#0075be) at a 135-degree angle. +* **Industrial Frost:** For floating navigation or modal overlays, use `surface_container_lowest` at 85% opacity with a `20px` backdrop-blur. This keeps the data-heavy background visible but creates a clear functional layer. + +--- + +## 3. Typography: The Blueprint Scale +We utilize **Gilroy** (or a premium sans-serif alternative) to bridge the gap between engineering documentation and modern editorial design. + +* **Display (L/M/S):** Used for massive KPIs and section headers. These should feel like "stamped" metal—authoritative and immovable. +* **Headlines & Titles:** Set in **Gilroy-SemiBold**. These act as the structural beams of the layout. +* **Body & Labels:** Set in **Inter** or **Gilroy-Regular**. High-density data must remain legible; use `on_surface_variant` (#404751) for secondary data to maintain a clear hierarchy against primary values. + +**Editorial Tip:** Pair a `display-lg` metric with a `label-sm` (all caps, tracked out +10%) directly underneath to mimic an engineering technical drawing. + +--- + +## 4. Elevation & Depth: Tonal Layering +In this system, shadows are atmospheric, not structural. + +### The Layering Principle +Depth is achieved by "stacking." A `surface-container-lowest` card sitting on a `surface-container` background provides all the separation required. + +### Ambient Shadows +If a component must "float" (e.g., a critical alert or a primary dropdown): +* **Shadow:** 0px 12px 32px 0px. +* **Color:** Use `on_surface` at 6% opacity. This creates a natural "ambient occlusion" effect rather than a dated drop shadow. + +### The "Ghost Border" Fallback +If accessibility requires a container definition (e.g., in high-glare environments), use a **Ghost Border**: +* **Token:** `outline-variant` (#c0c7d2) at **15% opacity**. It should be felt, not seen. + +--- + +## 5. Components: Machined Components +All components feature **Sharp Corners (0px)**. No exceptions. This reinforces the industrial, high-precision nature of the brand. + +### Buttons +* **Primary:** Gradient fill (Primary to Primary-Container), white text, 0px radius. Heavy horizontal padding (24px) for a "solid" feel. +* **Secondary:** `surface-container-high` background with `on_primary_fixed_variant` text. No border. +* **Tertiary:** Text-only, capitalized, with a 2px bottom-heavy underline (using `surface_tint`) on hover. + +### Input Fields +* **State:** Use `surface-container-highest` for the background fill. +* **Focus:** A 2px solid `primary` (#005c97) **bottom-border only**. This mimics a ledger or a technical form. +* **Error:** Background shifts to `error_container`, text to `on_error_container`. + +### Cards & Lists +* **Rule:** Forbid divider lines. Use 32px of vertical white space or a subtle shift to `surface-container-low` to distinguish between list items. +* **Data Density:** In lists, use `title-sm` for primary values and `label-sm` for units (e.g., "450 **kg/h**"), keeping the units in a lighter weight. + +### Data Visualization (Industrial Custom) +* **Gauges:** Use sharp, non-rounded arcs. +* **Charts:** Fill areas under lines with a vertical gradient of `primary` to transparent to give data "weight." + +--- + +## 6. Do's and Don'ts + +### Do: +* **Do** use extreme whitespace. Industrial sites are massive; the UI should feel equally expansive. +* **Do** use "All Caps" for labels and small UI elements to evoke a sense of professional labeling. +* **Do** align text to a strict baseline grid to ensure the "Monolithic" feel remains organized. + +### Don't: +* **Don't** use any border-radius. A single rounded corner breaks the "Industrial Precision" logic. +* **Don't** use pure black (#000000). Use `on_secondary_fixed` (#001c38) for the deepest blacks to maintain tonal richness. +* **Don't** use icons as purely decorative elements. If an icon is used, it must accompany a functional action or a status. + +--- + +## 7. Designer's Note on Data Heavy Layouts +When designing "Data-Heavy" screens, do not shrink the text. Instead, expand the canvas. Use the `surface-container` tiers to group related data points into "Zones." A "Zone" should feel like a solid block of information that can be scanned at a glance, separated from other zones by significant tonal shifts rather than lines. This is the hallmark of a high-end, bespoke engineering tool. \ No newline at end of file diff --git a/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/deployment_planner_light/code.html b/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/deployment_planner_light/code.html new file mode 100644 index 000000000..aae6f9986 --- /dev/null +++ b/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/deployment_planner_light/code.html @@ -0,0 +1,417 @@ + + + + + +MONOLITH_v1.0 | Agent Fleet Deployment Planner + + + + + + + + + + + +
+
+MONOLITH_v1.0 + +
+
+
+search + +
+
+notifications +lan +account_tree + +
+
+
+ +
+
+ +
+
+

FLEET_DEPLOYMENT_PLANNER

+
+STRATEGIC_VIEW +SYSTEM_STATUS: NOMINAL +
+
+
+ + +
+
+ +
+ +
+
+
+

AVAILABLE_RESOURCES (14)

+filter_list +
+ +
+ +
+
+
+
AETHER-042
+
MAINTENANCE_BOT
+
+drag_indicator +
+
+EFFICIENCY +94.2% +
+
+ +
+
+
+
LOGIC-901
+
ANALYTICS_CORE
+
+drag_indicator +
+
+EFFICIENCY +98.8% +
+
+ +
+
+
+
CYBER-112
+
QC_SUPERVISOR
+
+drag_indicator +
+
+EFFICIENCY +89.0% +
+
+ +
+
+
+
TITAN-007
+
LOAD_MASTER
+
+drag_indicator +
+
+EFFICIENCY +91.5% +
+
+
+
+
+ +
+ +
+
+
FORECASTED_DEMAND (Q3)
+
+1,240 +HRS/WK +
+
+
+
+
+
+
EFFICIENCY_GAINS
+
++12.4 +% +
+
ESTIMATED FROM CURRENT PLAN
+
+
+
RESOURCE_UTILIZATION
+
+82 +% +
+
+
+
+
+
+
+
+
+ +
+
+

ACTIVE_INDUSTRIAL_UNITS

+
+ CRITICAL + MAINTENANCE +
+
+
+ +
+
+
+

UNIT_BETA_04

+

ASSEMBLY_LINE / SOUTH_WING

+
+OVER_DEMAND +
+
+ +
+
+
VECTOR-22
+
QC_PRO
+
+close +
+ +
+DROP_AGENT_HERE +
+
+
+
DEMAND_FILL
+
45% (-55%)
+
+
+ +
+
+
+

STATION_GAMMA_11

+

PRECISION_WELDING / SECTOR_C

+
+OPTIMAL +
+
+ +
+
+
SPARK-09
+
WELD_ENGINE
+
+close +
+
+
+
VISION-44
+
THERMAL_EYE
+
+close +
+
+
+
DEMAND_FILL
+
98% (+2%)
+
+
+
+
+ +
+
+

OPERATIONAL_DEPTH_METRICS

+DOWNLOAD_TSV_REPORT +
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+00:00 +06:00 +12:00 +18:00 +23:59 +
+
+
+
+
+
+
+ +
+
+
+AGENT_PROFILE +close +
+
+
AETHER-042
+
Deployment History: 1.2k Tasks
+
+
+
+
CURRENT_ASSIGNMENT
+
UNASSIGNED (READY)
+
+
+
LATENCY_SCORE
+
2.4ms (LOW)
+
+
+
CORE_COMPETENCIES
+
+HYDRAULICS +SENSORS +DIAGNOSTICS +
+
+
+ +
+
+ \ No newline at end of file diff --git a/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/deployment_planner_light/screen.png b/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/deployment_planner_light/screen.png new file mode 100644 index 000000000..3544dc058 Binary files /dev/null and b/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/deployment_planner_light/screen.png differ diff --git a/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/digital_employee_live_status_light/code.html b/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/digital_employee_live_status_light/code.html new file mode 100644 index 000000000..c976a7965 --- /dev/null +++ b/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/digital_employee_live_status_light/code.html @@ -0,0 +1,480 @@ + + + + + +Digital Employee Platform - Industrial Control + + + + + + + + + + + +
+
+MONOLITH_v1.0 + +
+
+
+search + +
+
+notifications +lan +account_tree +
+Operator Avatar +
+
+
+
+ +
+ +
+
+

Fleet Telemetry

+
+
+
+24 Agents Online +
+
+
+2 Under Maintenance +
+
+
+
+
+Global Load +42.8 TFLOPs +
+
+Total Throughput +12.4 K/sec +
+
+
+ +
+ + + + +
+ +
+ +
+
+
+
+Logistics / Nexus-01 +

Route Optimizer A

+
+
Active
+
+
+
+
+CPU LOAD +
+78% +
+
+
+
+
+
+GPU CORE +
+12% +
+
+
+
+
+
+
+
+GOAL COMPLETION +94.2% +
+
+
+
+
+
+
+NETWORK HEARTBEAT +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+Analytics / Cerebro-9 +

Trend Forecaster

+
+
Processing
+
+
+
+
+CPU LOAD +
+45% +
+
+
+
+
+
+GPU CORE +
+89% +
+
+
+
+
+
+
+
+GOAL COMPLETION +61.0% +
+
+
+
+
+
+
+NETWORK HEARTBEAT +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+Maintenance / Iron-V +

Grid Watchdog

+
+
Alert
+
+
+
+
+CPU LOAD +
+92% +
+
+
+
+
+
+GPU CORE +
+08% +
+
+
+
+
+
+
+
+GOAL COMPLETION +22.5% +
+
+
+
+
+
+
+NETWORK HEARTBEAT +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+Logistics / Nexus-04 +

Inventory Auditor

+
+
Active
+
+
+
+
+CPU LOAD +
+14% +
+
+
+
+
+
+GPU CORE +
+04% +
+
+
+
+
+
+
+
+GOAL COMPLETION +100% +
+
+
+
+
+
+
+NETWORK HEARTBEAT +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+

Neural Engine Efficiency

+

+ Aggregate processing power peaking at 1.2 ExaFLOPS across all active clusters. +

+ +
+
+
+
+
+Thermal Margin +42°C +
+
+
+
+
+
+
+Buffer Capacity +89% +
+
+
+
+
+
+
+
+
+
+
+
++8 More Nodes +
+
+
+ +
+account_tree +
+
+
+
+ \ No newline at end of file diff --git a/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/digital_employee_live_status_light/screen.png b/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/digital_employee_live_status_light/screen.png new file mode 100644 index 000000000..88158160c Binary files /dev/null and b/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/digital_employee_live_status_light/screen.png differ diff --git a/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/efficiency_heatmap_light/code.html b/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/efficiency_heatmap_light/code.html new file mode 100644 index 000000000..aaeffd022 --- /dev/null +++ b/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/efficiency_heatmap_light/code.html @@ -0,0 +1,423 @@ + + + + + +Industrial Control - Operational Efficiency Heatmap + + + + + + + + + + + +
+
+MONOLITH_v1.0 + +
+
+
+ +
+
+notifications +lan +account_tree +
+
+Operator Avatar +
+
+
+ +
+ +
+
+

Operational Visualization

+

Efficiency Heatmap

+
+
+
+Digital Employee Managed +
+
+
+Human Managed +
+
+
+
+Global Delta ++24.8% +
+
+ +
+ +
+
+

Live Spatial Map // SECTOR_4

+
+ + + +
+
+ +
+ +
+STATION_A1 +98.2% +
+
+
+STATION_A3 +BOTTLENECK +
+
+
+
+H_RESOURCES +72.4% +
+
+
+
+ +
+
+
precision_manufacturing
+
+
+
+ASSEMBLY_B +
+
+
+
+
+ +
+
+
+TRANSFER_NODE +
+
+
+
+ +
+
+
+ +
+
+
+ +08:45:00 UTC +
+
+T-minus 04:00 +LIVE TRANSMISSION +
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+ +
+

Efficiency Analytics

+
+
+
+Digital Workforce +94.2% +
+
+
+
+
+
+
+Human Counterpart +69.4% +
+
+
+
+
+
+
+
+warning +
+

Anomaly Detected

+

Sector_4 / Station_A3 latency spike

+
+
+
+
+ +
+

Active Agents in Sector

+
+ +
+
+
+smart_toy +
+
+

Agent_774

+

Logistics Routing

+
+
+99% +
+
+
+
+memory +
+
+

Agent_912

+

Quality Control

+
+
+100% +
+
+
+
+account_tree +
+
+

Agent_003

+

Conflict Resolution

+
+
+92% +
+
+ +
+
+
+ +
+
+

Throughput Forecast

+
+ + + + + + + + + + + + +
+
+
+
+
+
+
+
+
+Peak Capacity +4,500 U/HR +
+
+Estimated Bottleneck +14:45 UTC +
+
+
+
+
+

Strategic Impact Report

+Confidential - Tier 1 +
+
+
+Cost Reduction +38.2% +

Since agent deployment in Sector 4 logistics nodes.

+
+
+Uptime Delta ++14% +

Shift from manual maintenance cycles to AI-led prediction.

+
+
+Safety Score +99.9 +

Zero incident record since Digital Employee supervision.

+
+
+
+
+
+ + + \ No newline at end of file diff --git a/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/efficiency_heatmap_light/screen.png b/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/efficiency_heatmap_light/screen.png new file mode 100644 index 000000000..e687fca87 Binary files /dev/null and b/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/efficiency_heatmap_light/screen.png differ diff --git a/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/engineering_analytics_tabs_pc/code.html b/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/engineering_analytics_tabs_pc/code.html new file mode 100644 index 000000000..3d8f1f54d --- /dev/null +++ b/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/engineering_analytics_tabs_pc/code.html @@ -0,0 +1,310 @@ + + + + + +ANDRITZ INDUSTRIAL PORTAL - Engineering Analytics + + + + + + + + + + +
+ +
+
+

ANDRITZ INDUSTRIAL PORTAL

+ +
+
+
+ + +
+
+User profile +
+
+
+ +
+ +
+
+Advanced Telemetry Matrix +

ENGINEERING ANALYTICS

+
+
+ + +
+
+ +
+ +
+
+
+

REAL-TIME PERFORMANCE TRENDS

+

THROUGHPUT VS. ENERGY CONSUMPTION (24H WINDOW)

+
+
+
+ +THROUGHPUT (t/h) +
+
+ +THERMAL LOAD (MW) +
+
+
+ +
+
+
+
+
+
+
+ + + + + + + + + + + + +
+00:0004:0008:0012:0016:0020:0023:59 +
+
+
+ +
+
+

SYSTEM EFFICIENCY

+
+ + + + +
+75% +OPTIMIZED +
+
+
+
+OPERATIONAL UPTIME +99.2% +
+
+
+
+
+
+
+ +
+
+
+

EQUIPMENT STRESS TOPOGRAPHY

+

SENSOR NODE VIBRATION & THERMAL ANALYSIS

+
+
+LOW STRESS +
+CRITICAL +
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ACTIVE SENSORS +
12,842
+
+trending_up ++1.2% v. PREV +
+
+
+AVERAGE TEMP +
242.4 °C
+
+horizontal_rule +NOMINAL +
+
+
+STRESS ALERTS +
02
+
+warning +ACTION REQUIRED +
+
+
+ENERGY INDEX +
0.84 kW/t
+
+trending_down +-4.5% EFFICIENCY +
+
+
+
+
+ \ No newline at end of file diff --git a/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/engineering_analytics_tabs_pc/screen.png b/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/engineering_analytics_tabs_pc/screen.png new file mode 100644 index 000000000..76c0c0337 Binary files /dev/null and b/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/engineering_analytics_tabs_pc/screen.png differ diff --git a/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/global_fleet_management/code.html b/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/global_fleet_management/code.html new file mode 100644 index 000000000..da981b259 --- /dev/null +++ b/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/global_fleet_management/code.html @@ -0,0 +1,332 @@ + + + + + +ANDRITZ PRECISION | Fleet Management + + + + + + + + + + + + + +
+ +
+ +
+
+ +
+
+
+Fleet Health Score +
+98.2 +% +
+
+
+
+
+
+
+
+

Operational

+

1,242 UNIT

+
+
+

Fault State

+

14 UNIT

+
+
+
+ +
+ +
+
+ +
+ +
+
+
+

CRITICAL FAULT

+

NODE_ROTTERDAM_09

+

Vibration threshold exceeded in turbine housing B.

+ +
+
+ +
+
+
+
+ +
+ + + +
+
+ +
+
+ +
+

Global Performance

+
+

Total Output

+
+842.5 +GWh/d +
+
+trending_up ++4.2% VS L-24H +
+
+
+

Active Fleet %

+
+94.1 +% +
+
+
+
+
+
+
+
+
+
+ +
+
+

Maintenance Queue

+VIEW ALL +
+
+ +
+
+PUMP_STAT_04 +Overdue +
+

Seal replacement required. Estimated downtime: 4h.

+
+ +Assigned: Marcus V. +
+
+ +
+
+GEN_ALPHA_X2 +Scheduled +
+

Systematic fluid analysis and calibration check.

+
+
+person_add +
+UNASSIGNED +
+
+
+
+ +
+

Event Stream

+
+
+
+
+

09:42 UTC

+

NODE_ROTTERDAM_09 reported abnormal vibration levels.

+
+
+
+
+
+

09:38 UTC

+

ASSET_4492_B power output stabilized at 45.2MW.

+
+
+
+
+
+

09:15 UTC

+

Routine diagnostic report generated for SECTOR_G4.

+
+
+
+
+
+
+
+ +
+ +
+ \ No newline at end of file diff --git a/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/global_fleet_management/screen.png b/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/global_fleet_management/screen.png new file mode 100644 index 000000000..4b09e3290 Binary files /dev/null and b/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/global_fleet_management/screen.png differ diff --git a/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/maintenance_protocol_detail/code.html b/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/maintenance_protocol_detail/code.html new file mode 100644 index 000000000..89594ab49 --- /dev/null +++ b/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/maintenance_protocol_detail/code.html @@ -0,0 +1,350 @@ + + + + + +Maintenance Protocol Detail | ANDRITZ PRECISION + + + + + + + + + +
+
+ANDRITZ PRECISION + +
+
+
+search + +
+ + +
+Operational Supervisor Profile +
+
+
+ + + +
+ +
+
+
+Protocol ID: MP-X405 +Priority: Critical +
+

TURBINE_CORE_ALPHA CALIBRATION

+

Comprehensive diagnostic and lubrication cycle for the main pressure housing and centrifugal assembly.

+
+
+ + +
+
+ +
+ +
+ +
+
+warning +

Safety Precautions

+
+
    +
  • +01 +Verify dual-path lockout/tagout (LOTO) on primary power rail. +
  • +
  • +02 +High-pressure ventilation required. Wear Type-R respiratory gear. +
  • +
  • +03 +Magnetic resonance risk. Remove all non-ferrous metal objects. +
  • +
+
+ +
+

Step Checklist

+
+ + + + +
+
+
+ +
+ +
+
+

Technical Schematic

+
+ + +
+
+
+
+Detailed technical schematic + +
+
+ +
+
+
+DWG_REF: 884-AX-001 +SCALE: 1:25 +
+
+
+ +
+ +
+

Required Components

+
+
+
+

PART_X99_A

+

Seal Ring Gasket

+
+IN STOCK +
+
+
+

PART_LUBE_02

+

Synthetic Grade-9 (5L)

+
+IN STOCK +
+
+
+

PART_B_M24

+

High-Tensile Bolt M24

+
+
+LOW (2 UNITS) +

ORDER NOW

+
+
+
+ +
+

ESTIMATED COMPLETION

+
+02:45 +HOURS +
+
+
+
+

Task In-Progress: Step 01/08

+
+
+
+
+ +
+
+
+CURRENT ASSIGNMENT +Mark J. (Technician) +
+
+
+STATION +BAY_04A +
+
+
+ + +
+
+
+ \ No newline at end of file diff --git a/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/maintenance_protocol_detail/screen.png b/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/maintenance_protocol_detail/screen.png new file mode 100644 index 000000000..4d8e46c91 Binary files /dev/null and b/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/maintenance_protocol_detail/screen.png differ diff --git a/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/maintenance_scheduler_modal_pc/code.html b/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/maintenance_scheduler_modal_pc/code.html new file mode 100644 index 000000000..5f6eb6ab6 --- /dev/null +++ b/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/maintenance_scheduler_modal_pc/code.html @@ -0,0 +1,284 @@ + + + + + + + + + + + + + +
+ + + +
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ +
+ +
+
+Service Protocol +

Unit Maintenance Scheduler

+
+ +
+ +
+ +
+ +
+
+
+settings_input_component +
+

Component Identity

+
+
+
+ + +
+
+ + +
+
+
+ +
+
+
+

Critical Priority Protocol

+

Elevating to critical will bypass standard queue and trigger alerts.

+
+ +
+
+warning + Status: High-Impact Shutdown Required +
+
+ +
+ + +
+
+ +
+
+
+calendar_month +
+

Schedule Window

+
+ +
+
+October 2024 +
+chevron_left +chevron_right +
+
+
+
M
+
T
+
W
+
T
+
F
+
S
+
S
+
+
+
26
+
27
+
28
+
29
+
30
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
11
+
12
+
13
+
14
+
15
+
16
+
17
+
18
+
19
+
20
+
+
+ +
+ +
+
+08:00 AM - Slot 01 +CRITICAL ONLY +
+
+10:30 AM - Slot 02 +VACANT +
+
+02:15 PM - Slot 03 +VACANT +
+
+
+ +
+ +
+
+
+ +
+
+
+
+
+ +
+A-14 +
+ \ No newline at end of file diff --git a/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/maintenance_scheduler_modal_pc/screen.png b/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/maintenance_scheduler_modal_pc/screen.png new file mode 100644 index 000000000..84dd62ad4 Binary files /dev/null and b/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/maintenance_scheduler_modal_pc/screen.png differ diff --git a/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/operational_event_logs_pc/code.html b/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/operational_event_logs_pc/code.html new file mode 100644 index 000000000..23b77034e --- /dev/null +++ b/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/operational_event_logs_pc/code.html @@ -0,0 +1,438 @@ + + + + + +ANDRITZ INDUSTRIAL PORTAL - Technical Logs + + + + + + + + + +
+
+

ANDRITZ INDUSTRIAL PORTAL

+ +
+
+
+search + +
+notifications +settings +
+User profile +
+
+
+
+ + + +
+
+
+
+

TECHNICAL LOGS

+

Real-time system telemetry and event monitoring

+
+
+ +
+
+
+ +
+ + + +
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TimestampUnit IDStatusEvent TypeOperatorMetrics
+
2023-10-24 14:22:01.045
+
UTC -05:00
+
+
TRB-H7-400
+
Main Bearing Assm.
+
+ + + CRITICAL + + +
THERMAL_OVERLOAD_E12
+
Core temperature exceeded 145°C limit
+
+
+
JS
+J. SMITH +
+
+
148.2 °C
+
+12% VARIANCE
+
+
2023-10-24 14:21:44.212
+
UTC -05:00
+
+
PMP-V2-012
+
Cooling Circuit
+
+ + + ACTIVE + + +
FLOW_STABILIZED
+
Hydraulic pressure within nominal range
+
+
+
AM
+A. MILLER +
+
+
45.2 BAR
+
NOMINAL
+
+
2023-10-24 14:18:02.990
+
UTC -05:00
+
+
CNV-A1-881
+
Feed System
+
+ + + STANDBY + + +
SCHEDULED_PAUSE
+
Maintenance window shift transition
+
+
+
SYS
+SYSTEM_ROOT +
+
+
0.0 M/S
+
IDLE
+
+
2023-10-24 14:15:22.561
+
UTC -05:00
+
+
TRB-H7-400
+
Main Bearing Assm.
+
+ + + CRITICAL + + +
VIBRATION_ALARM_V1
+
Unscheduled resonance detected in Z-axis
+
+
+
JS
+J. SMITH +
+
+
12.4 MM/S
+
DANGER ZONE
+
+
2023-10-24 14:12:09.112
+
UTC -05:00
+
+
GEN-S4-220
+
Power Output
+
+ + + ACTIVE + + +
OUTPUT_SYNC_OK
+
Phase synchronization with grid successful
+
+
+
SYS
+SYSTEM_ROOT +
+
+
60.01 HZ
+
SYNC_LOCKED
+
+
+ +
+
+ SHOWING 1-5 OF 1,248 LOG ENTRIES +
+
+ + + + + +
+
+
+ +
+
+
TOTAL EVENTS
+
12,482
+
+
+
+
+
+
CRITICAL FAULTS
+
42
+
▲ 14% SINCE LAST SHIFT
+
+
+
ACTIVE OPERATORS
+
08
+
+
+
+
+
+5
+
+
+
+
SYSTEM HEALTH
+
+
98.2%
+verified_user +
+
+
+
+
+ +
+
+
+
+LIVE TELEMETRY ACTIVE +LAST STREAM REFRESH: 0.2s AGO +
+
+
+ \ No newline at end of file diff --git a/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/operational_event_logs_pc/screen.png b/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/operational_event_logs_pc/screen.png new file mode 100644 index 000000000..59e8b61cd Binary files /dev/null and b/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/operational_event_logs_pc/screen.png differ diff --git a/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/operational_performance_matrix/code.html b/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/operational_performance_matrix/code.html new file mode 100644 index 000000000..23a924007 --- /dev/null +++ b/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/operational_performance_matrix/code.html @@ -0,0 +1,517 @@ + + + + + +ANDRITZ PRECISION | Operational Performance Matrix + + + + + + + + + +
+
+
+ANDRITZ PRECISION + +
+
+ + + +Operational Supervisor Profile +
+
+
+ + + +
+ +
+
+

Matrix Analysis

+

OPERATIONAL PERFORMANCE

+
+
+
+

Global OEE

+

88.4%

+
+
+
+
+
+

MTBF Trend

+

+12.2H

+
+trending_up SYSTEM GAIN +
+
+
+
+ +
+ +
+
+

EFFICIENCY HEATMAP / SHIFT_VAR_01

+
+AUTO_REFRESH: ON +LIVE_FEED +
+
+ +
+ +
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+00:00 +04:00 +08:00 +12:00 +16:00 +20:00 +23:59 +
+
+
+
+
+
+Optimal Range (>95%) +
+
+
+Nominal (85-95%) +
+
+
+Critical Delay (<70%) +
+
+
+ +
+
+
+
+emergency +SYS_HEALTH +
+

NODE STATUS

+

All core processing units are operating within nominal thermal envelopes.

+
+
+
+Throughput +1.2M u/h +
+
+
+
+
+Utilization +94.8 % +
+
+
+
+
+
+
+ +
+
+

Comparative Performance Matrix

+
+ + + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Unit identifierStatusAvailabilityPerformanceQuality IndexAction
+

UNIT_OMEGA_09

+

PRECISION_STAMPING

+
+ + Active + + +

99.2%

+

+0.4% VS LW

+
+
+
+
+
+
+
+
+
+

0.998

+

SIGMA_6_CERT

+
+ +
+

UNIT_SIGMA_04

+

THERMAL_TREATMENT

+
+ + Active + + +

84.1%

+

-2.1% VS LW

+
+
+
+
+
+
+
+
+
+

0.912

+

SIGMA_3_WARN

+
+ +
+

UNIT_BETA_12

+

FLUID_DYNAMICS

+
+ + Standby + + +

100%

+

STABLE

+
+
+
+
+
+
+
+
+
+

--

+

NO_DATA

+
+ +
+
+
+ +
+
+
+

Trend Analysis

+

7-DAY VOLUME COMPARISON

+
+equalizer +
+
+
+
+
+MON +
+
+
+
+TUE +
+
+
+
+WED +
+
+
+
+THU +
+
+
+
+FRI +
+
+
+
+SAT +
+
+
+
+SUN +
+
+
+ +
+
+
+

Service Matrix

+

SCHEDULED INTERVENTIONS

+
+ +
+
+
+
+

Oct

+

12

+
+
+

UNIT_OMEGA_09 : HYDRAULIC PURGE

+

Est. Downtime: 4.5 Hours

+
+verified +
+
+
+

Oct

+

14

+
+
+

UNIT_SIGMA_04 : THERMAL CALIBRATION

+

CRITICAL : OUTSIDE PARAMETERS

+
+warning +
+
+
+
+
+ + + \ No newline at end of file diff --git a/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/operational_performance_matrix/screen.png b/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/operational_performance_matrix/screen.png new file mode 100644 index 000000000..efff5af4f Binary files /dev/null and b/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/operational_performance_matrix/screen.png differ diff --git a/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/real_time_sensor_matrix/code.html b/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/real_time_sensor_matrix/code.html new file mode 100644 index 000000000..5405e076b --- /dev/null +++ b/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/real_time_sensor_matrix/code.html @@ -0,0 +1,528 @@ + + + + + +ANDRITZ PRECISION | Real-time Sensor Matrix + + + + + + + + + +
+
+ANDRITZ PRECISION + +
+
+
+search + +
+ + +
+Operational Supervisor +
+
+
+ + + +
+ +
+
+
+REAL-TIME +SYSTEM STATUS: OPTIMAL +
+

SENSOR_MATRIX

+

+ Live telemetry stream from NODE_A1 through NODE_D24. High-precision monitoring of vibrational harmonics and thermal gradients. +

+
+ +
+
+
Avg Thermal
+
84.2 °C
+
+
+
Active Nodes
+
1,024
+
+
+
Data Rate
+
12.8 GB/s
+
+
+
+ +
+ + +
+
+
+
S_NODE_01
+
THERMAL_L1
+
+device_thermostat +
+
+
78.4
+
°C
+
+arrow_upward 2.4% +
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
S_NODE_02
+
PRESSURE_V4
+
+compress +
+
+
14.2
+
BAR
+
+arrow_downward 0.8% +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
S_NODE_03
+
VIB_H_TRANS
+
+vibration +
+
+
92.1
+
Hz
+
+ CRITICAL +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
S_NODE_04
+
ROT_MAIN_SH
+
+settings_backup_restore +
+
+
1,450
+
RPM
+
+ STABLE +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
S_NODE_05
+
TORQUE_AUX
+
+precision_manufacturing +
+
+
324.5
+
Nm
+
+ NOMINAL +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
S_NODE_06
+
FLOW_RATE_B
+
+waves +
+
+
8.4
+
m³/s
+
+ STABLE +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
S_NODE_07
+
VOLT_GRID_1
+
+bolt +
+
+
480.2
+
VAC
+
+ LOAD_HIGH +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
S_NODE_08
+
MOIST_CORE
+
+humidity_low +
+
+
12.8
+
%RH
+
+ DRY +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ +
+
+
Active Diagnostics Pipeline
+

VIBRATION_SPECTRUM_ANALYSER

+
+
+
Peak Amplitude
+
0.42 mm/s²
+
+
+
Harmonic Dist
+
1.2%
+
+
+
Cycle Count
+
14.8M
+
+
+
Node Sync
+
99.9%
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+architecture +
+
+ +
+
+ System Event Stream + sync +
+
+
+
14:24:02
+
+
Update Applied
+
Core telemetry driver v4.2.1 synchronized across all nodes.
+
+
+
+
14:23:58
+
+
VIB_H_TRANS Alert
+
Vibration exceeding safety threshold at NODE_03. Maintenance required.
+
+
+
+
14:23:45
+
+
Sync Signal
+
Heartbeat received from NODE_A1_OPERATIONAL_UNIT_04.
+
+
+
+
14:22:12
+
+
Calibration Complete
+
Thermal sensors 01-12 calibrated to ±0.01°C precision.
+
+
+
+ +
+
+
+ \ No newline at end of file diff --git a/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/real_time_sensor_matrix/screen.png b/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/real_time_sensor_matrix/screen.png new file mode 100644 index 000000000..5dbed2b29 Binary files /dev/null and b/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/real_time_sensor_matrix/screen.png differ diff --git a/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/system_alert_dialog/code.html b/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/system_alert_dialog/code.html new file mode 100644 index 000000000..6a3f187a8 --- /dev/null +++ b/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/system_alert_dialog/code.html @@ -0,0 +1,294 @@ + + + + + +ANDRITZ PORTAL - Critical Alert + + + + + + + + + + +
+
+menu +ANDRITZ PORTAL +
+
+ +
+ +
+
+
+ + + +
+ +
+ +
+
+

Primary Throughput

+

842.50 m³/h

+
+
+

Efficiency

+

98.2%

+
+
+

Temperature

+

142°C

+
+
+
+
+analytics +
+
+ +
+
+

Hydraulic Pressure

+
+
+
+
+0 PSI +450 PSI +600 PSI +
+
+
+

UNIT HY-420 STATUS: CRITICAL

+
+
+ +
+

Real-time Vibration

+
+
+
+
+
+
+
+
+
+
+
+

Asset Distribution

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+warning +CRITICAL FAULT DETECTED +
+ERR_CODE: 0x4F2 +
+ +
+
+
+

Unit Identifier

+

HY-420

+
+
+

Pressure Reading

+

450 PSI

+
+
+
+

Action Required

+
+

Emergency Shutdown

+

Manual override required to prevent manifold rupture.

+
+
+ +
+ + +
+
+ +
+Timestamp: 14:22:18 UTC +Signal: Encrypted Satellite +
+
+
+ +
+
+analytics +DASHBOARD +
+
+factory +ASSETS +
+
+rss_feed +FEED +
+
+notifications_active +ALERTS +
+
+ \ No newline at end of file diff --git a/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/system_alert_dialog/screen.png b/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/system_alert_dialog/screen.png new file mode 100644 index 000000000..b950c5e10 Binary files /dev/null and b/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/system_alert_dialog/screen.png differ diff --git a/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/system_configuration/code.html b/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/system_configuration/code.html new file mode 100644 index 000000000..859bc8052 --- /dev/null +++ b/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/system_configuration/code.html @@ -0,0 +1,279 @@ + + + + + + + + + + + + + + +
+
+ANDRITZ INDUSTRIAL PORTAL + +
+
+notifications +settings +
+ +
+
+
+
+ + + +
+
+ +
+

Settings

+
+ + + + +
+
+

System Integrity

+
+
+CORE_MODULE: ACTIVE +
+
+
+DATABASE: STABLE +
+
+
+ +
+
+Module / Core +

General Configuration

+

+ Define the global operational parameters for the Monolithic Engine. Changes here affect cross-plant analytics and system-wide synchronization intervals. +

+
+
+ +
+

System Identity

+
+
+ + +
+
+ + +
+
+
+ +
+

Operational Timing

+
+
+
+

Global Session Timeout

+

Duration before automated logout for inactivity.

+
+
+ +Seconds +
+
+
+
+

Telemetry Frequency

+

Update rate for non-critical sensor arrays.

+
+
+ +ms +
+
+
+
+ +
+

Functional Toggles

+
+
+
+

Maintenance Mode Override

+

Allows manual override of automated safety protocols during certified inspection windows.

+
+ +
+
+
+

External Data Export

+

Enables real-time data streaming to authorized third-party analytics partners.

+
+ +
+
+
+ +
+ + +
+
+
+
+
+
+ +
+ANDRITZ +
+ \ No newline at end of file diff --git a/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/system_configuration/screen.png b/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/system_configuration/screen.png new file mode 100644 index 000000000..3318888f1 Binary files /dev/null and b/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/system_configuration/screen.png differ diff --git a/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/system_health_audit_log/code.html b/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/system_health_audit_log/code.html new file mode 100644 index 000000000..33de15bc7 --- /dev/null +++ b/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/system_health_audit_log/code.html @@ -0,0 +1,413 @@ + + + + + +System Health Audit Log | ANDRITZ PRECISION + + + + + + + + + +
+
+

ANDRITZ PRECISION

+ +
+
+
+notifications +
+settings +
+Operational Supervisor Profile +
+
+
+ + + +
+
+ +
+
+Audit Infrastructure +

SYSTEM_HEALTH_LOG

+
+
+verified_user +Last Compliance Check: 14:00 UTC +
+
+database +Retention: 365 Days +
+
+
+
+ + +
+
+ +
+
+
+ +
+ +calendar_month +
+
+
+ + +
+
+ + +
+
+ +
+ +person_search +
+
+
+ +
+
+
+ +
+
+

Showing 1,245 Events

+
+ + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TimestampEvent_IDTypeDescriptionActorStatus
2024-05-20 | 14:22:01.04EVT_7782_CFG +Config_Override +Critical safety threshold bypassed on Boiler Unit 4. Overvoltage detected.SYS_ADMIN_ROOT +priority_high +
2024-05-20 | 14:18:55.21EVT_0119_API +API_CALL +Bulk export request initiated for "Weekly_Compliance_Report_v2".USER_M_REED_04 +check_circle +
2024-05-20 | 14:15:10.88EVT_9921_SEC +System_Login +User authentication successful via MFA-HW Key #2291.OP_K_CHEN_91 +verified +
2024-05-20 | 14:02:44.33EVT_4402_WAR +Threshold_Warn +Node_A1 CPU utilization reached 92% for 180 consecutive seconds.INTERNAL_KERNEL +warning +
2024-05-20 | 13:58:12.00EVT_8821_DEP +Firmware_Upd +Remote firmware patch v2.4.1 applied to Sensor Cluster 08.AUTO_UPD_SRV +update +
+
+
+ +
+
+
+

Security Alerts

+lock_open +
+
+

04

+

REQUIRES_IMMEDIATE_ACTION

+
+
+
+
+
+

Operational Velocity

+
+
+
+
+
+
+

89.4%

+

Global System Integrity Score

+
+
+

+1.2%

+

vs last 24h cycle

+
+
+
+
+analytics +
+
+
+ +
+
+
+Global Activity Mesh +

NODE_TRAFFIC_DISTRIBUTION

+

Real-time visualization of system events across global data centers. Density represents the volume of API calls and configuration changes logged in the last session.

+
+
+Europe / Berlin_Node +452 Events/min +
+
+North America / Dallas_Hub +811 Events/min +
+
+Asia / Singapore_A1 +209 Events/min +
+
+
+
+ +
+ +
+
+
+
+
+
+
+ +
+
+
+Database Size +2.4 TB +
+
+Indexing Latency +42ms +
+
+Log Stream +LIVE_ACTIVE +
+
+
+ © 2024 ANDRITZ PRECISION INDUSTRIAL GROUP | INTERNAL_USE_ONLY +
+
+ \ No newline at end of file diff --git a/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/system_health_audit_log/screen.png b/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/system_health_audit_log/screen.png new file mode 100644 index 000000000..4e3a2b5b9 Binary files /dev/null and b/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/system_health_audit_log/screen.png differ diff --git a/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/user_management_permissions/code.html b/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/user_management_permissions/code.html new file mode 100644 index 000000000..694af879f --- /dev/null +++ b/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/user_management_permissions/code.html @@ -0,0 +1,412 @@ + + + + + + + + + + + + + + +
+
+ANDRITZ PRECISION + +
+
+ + +
+Operational Supervisor Profile +
+
+
+ + + +
+ +
+
+

Identity & Access

+

Managing 24 active plant operators and system engineers

+
+
+ + +
+
+ +
+
+
+Total Users +42 +
+
+Active Now +12 +
+
+Pending Sync +03 +
+
+
+
+search + +
+ +
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
User IdentityAssigned RoleSecurity LevelLast ActivityActions
+
+
MK
+
+
Marcus Kaelstrom
+
m.kaelstrom@andritz-precision.com
+
+
+
+Plant Engineer + +
+
+
+
+
+LVL_03 +
+
+
14:22:05 UTC
+
Module A1 Calibration
+
+ +
+
+
SL
+
+
Sarah Linden
+
s.linden@andritz-precision.com
+
+
+
+Shift Supervisor + +
+
+
+
+
+LVL_04 +
+
+
08:15:30 UTC
+
Login Event: Node_01
+
+ +
+
+
JT
+
+
James Thorne
+
j.thorne@andritz-precision.com
+
+
+
+Operator I + +
+
+
+
+
+LVL_01 +
+
+
2 days ago
+
Manual Override Exit
+
+ +
+
+ +
+
+
+

Global Security Thresholds

+security +
+
+
+
+Auth Protocol +2FA / BIOMETRIC +
+
+Session Timeout +15 MINUTES +
+
+Node Lockdown +DISABLED +
+
+
+

Network Integrity

+
+
+
+
+99.9% +
+
+
+
+
+
+
+

Critical Alerts

+
+
+warning +
+

UNAUTHORIZED ACCESS ATTEMPT

+

Terminal G-42 • 12:04 UTC

+
+
+
+info +
+

CERTIFICATE EXPIRY (12D)

+

Operator: Linden, Sarah

+
+
+
+
+ +
+
+
+ +
+ +
+
+

Edit Permissions: Kaelstrom, M.

+ +
+
+
+
+
+ + +
+
+ +
+ +LVL_03 +
+
+
+
+ +
+ + + + + + +
+
+
+ + +
+
+
+
+
+ \ No newline at end of file diff --git a/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/user_management_permissions/screen.png b/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/user_management_permissions/screen.png new file mode 100644 index 000000000..7424b2a68 Binary files /dev/null and b/docs/refs/stitch_andritz_style_app_light/stitch_andritz_style_app/user_management_permissions/screen.png differ