Blueprint

# Visual style: Blueprint

Engineering blueprint and technical drawing style with white lines on blue, grid coordinates, annotation lines, and dimension markers. Ideal for architecture, engineering, tech, and education.

## Philosophy
Blueprint draws design inspiration from traditional cyanotype blueprint printing and modern engineering drafting. White lines on a blue background are its most iconic visual feature, while grid systems, annotation lines, and dimension markers give the interface a precise, professional, and trustworthy character.

Core concepts:
- Blue background with white lines: The classic blueprint color scheme -- white lines and text on a deep blue background
- Grid system: Background grids suggest a precise coordinate system and measurement units
- Annotation language: Annotation lines, dimension markers, and coordinate labels serve as both decorative and navigational elements
- Technical font: Monospace fonts reinforce the precision feel of engineering drafting

Blueprint style naturally conveys "carefully planned" and "professionally reliable" messaging. It suits any scenario that needs to demonstrate technical depth and engineering thinking. UI elements should look as if drawn on drafting paper -- buttons like legend buttons, cards like detail zoom boxes on drawings, input fields like annotation columns.

Suitable for: architecture firms, engineering consultancies, tech product launch pages, educational institutions, and technical documentation websites.

## Do
- Use blueprint blue bg-[#1e3a5f] for backgrounds paired with grid line background effects
- Use white text-white or light blue text-[#a0c4e8] for text and lines
- Use monospace font font-mono to enhance the technical drafting feel
- Use white/light blue thin line borders border border-white/30
- Use orange text-[#ff6b35] for annotation highlight markers
- Cards use semi-transparent backgrounds bg-[#1e3a5f]/60 backdrop-blur-sm
- Add grid backgrounds bg-[linear-gradient(rgba(255,255,255,0.05)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.05)_1px,transparent_1px)]
- Use dashed elements border-dashed to simulate auxiliary lines

## Don't
- Do not use warm-toned backgrounds
- Do not use rounded, soft design elements
- Do not use gradient color fills (lines and fills should be solid colors)
- Do not use glow effects or neon shadows
- Do not use serif fonts or handwritten fonts
- Do not use large areas of colored blocks
- Do not use elements with overly large rounded corners rounded-2xl rounded-3xl

## Rules for the AI
STYLE: Blueprint
TYPE: Engineering technical drawing interface

MUST USE:
- Blueprint blue background: bg-[#1e3a5f]
- White lines and text: text-white, border-white/30
- Monospace font: font-mono for all text
- uppercase tracking-widest for labels
- Grid background pattern for coordinates
- Orange annotations: text-[#ff6b35] for highlights
- Light blue secondary: text-[#a0c4e8]
- Corner markers on cards (L-shaped borders)
- Dashed lines for auxiliary elements: border-dashed

MUST AVOID:
- Warm-toned backgrounds
- Rounded/soft design elements
- Gradient fills
- Glow or neon effects
- Serif or handwritten fonts
- Large colored blocks
- Large border-radius (rounded-2xl+)

COLOR RULES:
- White line: #ffffff (primary elements)
- Blueprint blue: #1e3a5f (background)
- Light blue: #4a90d9, #a0c4e8 (secondary elements)
- Annotation orange: #ff6b35 (highlights, callouts)

SPECIAL EFFECTS:
- Grid background pattern (20px spacing)
- Corner bracket markers on containers
- Dimension lines with end markers
- Coordinate labels as decorative elements

Animation & Interaction Rules:
- CAD Precision: Interaction effects must be crisp and precise, prefer duration-100 (adjustable within 75-150ms range), avoiding sluggish ease-in-out.
- Crosshair Reveals: On hovering interactive elements, use before/after or corner markers to reveal crosshair and alignment hints.
- Blueprint Highlight: Default blue-white palette; active or confirm states can briefly light up engineering orange #ff6b35, but it must not dominate the main visual for long.
- Grid Interaction: Container hover can slightly increase grid line visibility (white lines to light blue lines), serving only as measurement feedback, not emotional animation.