Technical Drawing Design System // Rev 1.0
A constrained palette derived from traditional cyanotype blueprints. Deep blues form the drawing surface, white lines convey structure, and accent colors mark annotations and status.
Monospace and technical fonts evoke engineering documentation. IBM Plex Mono for body text, Share Tech Mono for labels, Source Code Pro for numeric data.
FLOOR PLAN A-101
SECTION DETAIL 3 / ELEVATION NORTH
Primary label font for headings, titles, and callouts.
The quick brown fox jumps over the lazy dog. ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
Readable monospace for specifications, notes, and paragraph text.
3.14159 | 45.000° | R2500mm
Numeric-optimized font for dimensions and tabular data.
| Element | Font | Size | Use Case | Sample |
|---|---|---|---|---|
| H1 | Share Tech Mono | 2.5rem | Drawing titles | SITE PLAN |
| H2 | Share Tech Mono | 1.75rem | Section titles | ELEVATION |
| H3 | Share Tech Mono | 1.25rem | Sub-sections | DETAIL VIEW |
| H4 | Share Tech Mono | 1rem | Group labels | NOTES |
| H5 | Share Tech Mono | 0.875rem | Field labels | MATERIAL |
| H6 | Share Tech Mono | 0.75rem | Annotations | REF MARK |
| BODY | IBM Plex Mono | 0.875rem | Body text | General specifications |
| DATA | Source Code Pro | 0.875rem | Numeric data | 1024.00px |
A 4px base unit defines a 10-step scale. All measurements align to this grid, like dimension lines on a technical drawing.
Technical corner brackets reference registration marks on engineering drawings. Primary uses filled backgrounds, secondary and ghost rely on outlines for hierarchy.
Corner brackets reinforce the precision aesthetic while providing clear visual affordance for interactive elements.
Input fields use deep blue backgrounds with precise line borders. Focused states glow cyan, mimicking the cursor on a CAD workstation.
Cards are framed like detail views on a drawing sheet. Corner marks establish boundaries, reference codes identify each component, and border colors communicate status.
The standard card is the primary container for grouping content. Corner registration marks reference technical drawing conventions.
Reference codes in the header identify each component within the system.
Cyan-bordered card for emphasized content, active selections, or primary information panels.
Dashed border variant for preliminary, draft, or conceptual content.
Yellow-bordered card for dimensions, measurements, and calculated values.
Red-bordered card for errors and items requiring immediate attention.
Tables present structured data like a bill of materials. Monospace fonts ensure alignment, alternating rows aid readability.
| Ref | Component | Material | Dimension | Tolerance | Status |
|---|---|---|---|---|---|
| A-101 | Primary Structure | Steel S275 | 2400 x 1200mm | +/- 0.5mm | Approved |
| A-102 | Secondary Frame | Aluminum 6061 | 1800 x 900mm | +/- 0.25mm | Approved |
| B-201 | Cover Panel | Acrylic 3mm | 600 x 400mm | +/- 1.0mm | Review |
| B-202 | Gasket Ring | EPDM Rubber | OD 150mm | +/- 0.1mm | In Progress |
| C-301 | Mounting Bracket | Stainless 304 | 80 x 60 x 4mm | +/- 0.5mm | Revision |
| C-302 | Fastener Set | Grade 8.8 Zinc | M8 x 25mm | ISO 4014 | Approved |
| Total Components: 6 | Drawing Set: BP-2026-001 | ||||
Compact labels for status, categories, and reference markers. Outlined variants maintain the line-drawing aesthetic.
System messages and drawing notes. A colored left bar identifies severity, referencing markup annotations on reviewed drawings.
All dimensions are in millimeters unless otherwise noted. Refer to general specification BP-GS-001 for material standards and tolerances.
This drawing has been reviewed and approved for construction. All dimensions verified against the 3D model.
Revision 3 modifications have not been verified against structural analysis. Do not fabricate until engineering sign-off.
Dimensional conflict at grid B3/C4. Structural column overlaps mechanical duct routing. Coordination required.
The guiding constraints that define the blueprint aesthetic. Every decision serves clarity, precision, and honest communication.
Every line has purpose. Grid lines establish reference, borders define boundaries, dimension marks communicate measurements. Nothing is purely ornamental.
Heavy lines define section cuts. Normal lines describe visible edges. Thin lines show projected geometry. The weight of a line tells you what it represents.
A limited palette of blues, whites, and sparse accents eliminates ambiguity. When everything is blue and white, the rare cyan or red element commands attention.
All elements align to the spatial grid. The grid is not invisible scaffolding; it is a visible part of the design, just as it is on a blueprint.
Monospace fonts, generous letter spacing, and clear size hierarchy ensure text remains legible whether viewed at full size or reduced to fit a screen.
No gradients mimicking physicality. No drop shadows suggesting false depth. The blueprint is a flat, honest medium where depth is conveyed through line convention.