Blueprint design skill for AI agents

Overview

Blueprint is an architectural, paper-warm design system built around precision and visual discipline. Its identity combines exact blueprint blue with drafting coral, graphite ink, cream content surfaces, fine 1px construction rules, and almost-square component geometry.

The result feels like a carefully annotated working document translated into a production interface. It is structured without becoming sterile and distinctive without relying on gradients, heavy shadows, or excessive decoration.

Design language

• Architectural palette: Blueprint blue #003488 anchors heroes, primary actions, and the footer. Drafting coral #ED6540 appears as a measured secondary accent.
• Warm paper surfaces: Content sections use cream #F2EAD6, panels step lighter to #F7F1E4, and controls use an even lighter cream-derived surface.
• Uniform 2px geometry: Components, controls, cards, media, and overlays use precise 2px corners, with full rounding reserved for a small set of genuinely circular controls.
• Fine construction rules: Every component edge is exactly 1px. Resting components stay flat, with restrained elevation reserved for open dropdowns and chart tooltips.
• Fixed page rhythm: Product pages move from a brand-blue hero through consistent paper sections to a permanent brand-blue footer.

Typography

Blueprint uses Lato throughout, with a deliberately strict hierarchy. The primary page heading carries the strongest weight, supporting headings and actions remain regular, and most reading copy, labels, metadata, and table content use a lighter weight. Short technical coordinates and annotations may use a monospaced face where the content calls for it.

Best suited for

Blueprint is a strong fit for architecture, engineering, planning tools, documentation products, consultancies, research platforms, technical services, and editorial commerce experiences that benefit from warmth and exact structure.

Included guidance

The downloadable skill defines the full token foundation and detailed patterns for buttons, cards, forms, navigation, tables, charts, overlays, feedback states, responsive layouts, marketing pages, application screens, and ecommerce surfaces.