themx
← Back to themes

Blueprint / Technical

corporate Visual style

Technical diagrams and measured grids on deep blue surfaces

Reference year: 2026

Compare this theme

Best for

Developer tools, Education, Portfolio, Dashboard

Less suitable for

  • Image-led lifestyle brands where technical annotations compete with photography.

Live component preview

Try the sample controls. daisyUI uses compiled library classes; shadcn/ui uses React components from the New York registry. The three example layouts demonstrate styling with the selected tokens. All content is demo data.

Blueprint / Technical preview

Color Palette

Primary #6EDCF5
Secondary #9EC7FF
Accent #FFD166
Background #08283F
Text #E3F2FF

Typography

Heading: Space Mono
Body: IBM Plex Sans

Key Characteristics

  • Deep blue surfaces with a low-contrast technical grid
  • Cyan line drawings and dimension annotations
  • Monospace headings with readable sans-serif body text
  • Aligned panels, fine borders, and explicit labels

Tags

blueprint technical engineering grid diagram

Blueprint design uses a technical grid, measured line drawings, and labels that connect a diagram to its subject. It suits engineering portfolios, technical education, and developer products with real diagrams or structured information.

Key Visual Elements

Keep the grid lower in contrast than text and controls. Use cyan lines for diagrams, borders, and dimension markers. Decorative measurements should remain separate from application data and should not imply actual product specifications.

Layout and Interaction

Align panels and annotations consistently. Give complex diagrams a readable description and enough space. On small screens, stack content and reduce decorative detail. Distinguish selected states and errors with labels as well as color.

Typography

Space Mono supports short technical headings and labels. IBM Plex Sans keeps descriptions and forms readable. Use ordinary spacing for long paragraphs instead of monospace text throughout the page.

Export style

Choose a library mapping or use the CSS variables in your own components. JSON includes the same mapping. Load the listed fonts separately.

:root {
  --tx-surface-bg: #08283F;
  --tx-font-heading: "Space Mono", sans-serif;
  --tx-font-body: "IBM Plex Sans", sans-serif;
  --tx-surface-bg-image: linear-gradient(#6EDCF514 1px, transparent 1px), linear-gradient(90deg, #6EDCF514 1px, transparent 1px);
  --tx-card-bg: #0C304A;
  --tx-card-border: #447A96;
  --tx-card-border-width: 1px;
  --tx-card-radius: 0;
  --tx-card-shadow: none;
  --tx-card-backdrop-blur: 0px;
  --tx-card-border-hover: #6EDCF5;
  --tx-card-shadow-hover: 0 0 0 1px #6EDCF5;
  --tx-font-heading-weight: 700;
  --tx-font-body-weight: 400;
  --tx-text-muted: #B2CEE0;
  --tx-text-subtle: #9ABCCE;
  --tx-link-color: #6EDCF5;
  --tx-button-radius: 0;
  --tx-input-bg: #08283F;
  --tx-input-border: #6B9CB7;
  --tx-text: #E3F2FF;
  --tx-primary: #6EDCF5;
  --tx-secondary: #9EC7FF;
  --tx-accent: #FFD166;
  --tx-media-filter: none;
}

Prompt Builder

Choose your project, UI library, and output. Prompts, documents, and exports use the same resolved theme values.

Example projects:

Use your own components with the exported CSS variables.

Components

Changing the page purpose selects suggested components. You can adjust them below.

Optional design layers

Apply a layout, then a surface effect, then a color mode. Fonts stay with the base theme. The output contains one final token set.

Blueprint / Technical

Live component preview

Try the sample controls. daisyUI uses compiled library classes; shadcn/ui uses React components from the New York registry. The three example layouts demonstrate styling with the selected tokens. All content is demo data.

Optional skills

Include skill references and installation instructions for your coding agent. Selecting a skill here does not install it.

Choose daisyUI or shadcn/ui to include its official skill.

Copy this prompt into your coding assistant. The task mode applies to the UI prompt.

Generated prompt

You are building a web application using Next.js with Tailwind.
Read existing project instructions and reuse installed components where available.

## Project
Project brief: Not specified
Target users: Not specified
Page purpose: Developer tools
Framework: Next.js
CSS approach: Tailwind
UI library: Custom / no library
Tone: Professional

## Visual direction
Base theme: Blueprint / Technical (visual-style)
- Deep blue surfaces with a low-contrast technical grid
- Cyan line drawings and dimension annotations
- Monospace headings with readable sans-serif body text
- Aligned panels, fine borders, and explicit labels

## Resolved style
Use this final token set. It already includes the selected layers. These values take precedence over conflicting base characteristics.
Color palette: primary #6EDCF5, secondary #9EC7FF, accent #FFD166, background #08283F, text #E3F2FF
Typography: Space Mono for headings, IBM Plex Sans for body text
Load the declared fonts with the required weights. Use system fallbacks when a font is unavailable.
```css
:root {
  --tx-surface-bg: #08283F;
  --tx-font-heading: "Space Mono", sans-serif;
  --tx-font-body: "IBM Plex Sans", sans-serif;
  --tx-surface-bg-image: linear-gradient(#6EDCF514 1px, transparent 1px), linear-gradient(90deg, #6EDCF514 1px, transparent 1px);
  --tx-card-bg: #0C304A;
  --tx-card-border: #447A96;
  --tx-card-border-width: 1px;
  --tx-card-radius: 0;
  --tx-card-shadow: none;
  --tx-card-backdrop-blur: 0px;
  --tx-card-border-hover: #6EDCF5;
  --tx-card-shadow-hover: 0 0 0 1px #6EDCF5;
  --tx-font-heading-weight: 700;
  --tx-font-body-weight: 400;
  --tx-text-muted: #B2CEE0;
  --tx-text-subtle: #9ABCCE;
  --tx-link-color: #6EDCF5;
  --tx-button-radius: 0;
  --tx-input-bg: #08283F;
  --tx-input-border: #6B9CB7;
  --tx-text: #E3F2FF;
  --tx-primary: #6EDCF5;
  --tx-secondary: #9EC7FF;
  --tx-accent: #FFD166;
  --tx-media-filter: none;
}
```
Use the CSS variables in your own components. Apply the heading and body font variables to their respective elements.

## Layout
- Align panels to a consistent grid. Use thin cyan lines, dimension marks, and labeled technical diagrams.
- Place annotations beside their subject. Reduce grid contrast and stack panels on mobile.

## Interaction
- Use clear focus outlines and text labels for status. Keep decorative measurement lines away from controls.

## Suitability notes
Use these limitations to assess the chosen page purpose. Explain any mismatch before applying an unsuitable treatment.
- Blueprint / Technical: Image-led lifestyle brands where technical annotations compete with photography.

## Components
Generate the following components in this style:
- Sidebar
- Tables
- Forms

## Quality requirements
Choose section order and visual emphasis from the real content and page purpose. Add only sections needed for the task.
Use supplied content. Label sample data. Do not invent testimonials, customer logos, statistics, or compliance claims.
Every interactive control must perform its declared action or be clearly labeled as a demo.
Include loading, empty, error, success, disabled, and focus states where applicable.
Use semantic HTML, visible keyboard focus, readable text contrast, and labeled form fields.
Ensure responsive design (mobile-first). Preserve reading order and avoid horizontal page overflow.
Respect prefers-reduced-motion. Keep essential content visible when animations are disabled.

## Verification
Check representative desktop and mobile widths, keyboard interaction, and relevant component states. Run available project checks and report what was actually verified.
Use Tailwind utility classes with the declared tokens.
Product context is incomplete. Label assumptions and treat the result as a draft until the missing context is supplied.