blueprinter

Generate technical diagrams using HTML/CSS following the "Flat Engineering Blueprint" style guidelines. Precise, Objective, High Data-Ink Ratio. The output should look like a technical specification sheet or an architectural diagram, NOT a marketing landing page. - NO drop shadows - NO gradients - NO glassmorphism/blur - NO rounded buttons - Use 1px or 2px solid borders for structure - Use white backgrounds for content blocks - Headings/Labels: Sans-serif (Inter/Helvetica) - Data/Paths/Code: Monospace (JetBrains Mono/Consolas) - The diagram must be contained within a diagram-canvas (a bordered box with padding) - Header: Title + Uppercase Subtitle, separated by a solid bottom border - Grid/Flexbox alignment: Everything must be strictly aligned - Connectors : Thin, straight or orthogonal lines. Dashed lines for abstract relationships. - Icons : Simple stroke SVG icons (no fill or complex details) - Badges : Outlined or solid black/gray blocks. Small font size. - Always use the CSS variables - never hardcode colors - Keep it flat - no shadows, no gradients, no blur effects - Use monospace for data - any technical values, paths, codes should use --font-mono - Align strictly - use CSS Grid or Flexbox with consistent gaps - Connect with lines - use SVG for connectors between components - Minimal icons - if icons are needed, use simple stroke-only SVGs