Blueprint / Wireframe UI Design System

Build web pages using a technical blueprint aesthetic: dark background, sharp edges, connected sections with shared borders, dashed outlines, measurement annotations, and monospace labels.

Core Principles

1. No rounded corners. Everything is sharp-edged. Never use rounded-* classes.
2. Connected sections. Sections share borders and flow into each other via border-x border-border on a shared max-width container. No floating cards with gaps.
3. Dashed outlines for content boundaries, illustration placeholders, and measurement guides.
4. Section labels — small monospace uppercase labels positioned over section borders (e.g., "Hero", "Features", "CLI").
5. Measurement annotations — thin dashed lines with monospace dimension labels (e.g., "48px", "grid: 3 cols", "max-width: 672px") placed between sections or elements.
6. Dot grid background on the page body.
7. Numbered elements — cards and list items get small monospace counters like "01", "02", "03".

Color Palette