StyleKit
Blueprint[v1.0.0]
HeroComponentsPaletteGrid
Section A-1 · Hero Spec

工程
蓝图

Blueprint Design System

Cyanotype blueprint printing and modern engineering drawings. White lines on deep blue. Grid systems, annotation lines, dimension markers. Precision, professionalism, technical trust.

SCALE1:100
REV1.0.0
DATE2026-02-20
PROJSTYLEKIT
DWG: FLOOR-PLAN-01SECTION A-1
LIVING AREAR-01KITCHENR-02BED 01R-03BED 02R-04CORRIDOR · REF C-01C-0118000mm20000mm9600mm0,018,00,20N1:100DWG: FLOOR-PLAN-01REV 1.0 · 2026-02-20
Scale 1:100 · All dims in mmRev 1.0
Total width 18,000mm · 4 structural bays
Section B-1 · Component Specs

Component Demos

Control elements — engineering standard

BUTTONS · DEMO PANELCTL-01

Primary — white fill / invert on hover

Secondary — white border + white text

Callout — orange annotation accent

Section C-1 · Color Specification

Color Palette

Cyanotype spectrum — 5 engineering-labelled swatches

BG-01
PRIMARY

BLUEPRINT BLUE

#1e3a5f

Primary background — deep cyanotype base

FG-01
SECONDARY

WHITE LINE

#ffffff

Primary line — vector ink on cyanotype

AC-01
ACCENT-A

LIGHT BLUE

#4a90d9

Accent A — active states, highlights

AC-02
ACCENT-B

DIMENSION ORANGE

#ff6b35

Accent B — annotation, callout lines

AC-03
ACCENT-C

PALE BLUE

#a0c4e8

Accent C — muted text, grid guides

5 colors · Cyanotype-derived palette · No warm tones
Section D-1 · Grid Specification

Grid System

Orthographic framework — 24px base unit

Grid Pattern Demo24px unit
24px minor unit
0,0
on-grid
x: 280px
BASE24px
MINOR4px
MAJOR120px

Column layouts — engineering grid divisions

12 COL
1
2
3
4
5
6
7
8
9
10
11
12
8 / 4
Content + Sidebar
Primary
Aside
6 / 6
Equal split
Col A
Col B
3 / 9
Index + Content
Idx
Extended Content Zone
Gap: 16px — gutter specification
SYS-ARCH-02 · System SchematicSection D-2
CTL-AMOD-BINT-COUT-DREF-1REF-2REF-3REF-4VCCSCHEMATIC · SYS-ARCH-02 · REV 1.0
Section E-1 · Technical Specifications

Specification Panels

Engineering-standard data sheets

SPEC · A-1

GRID SYSTEM

Orthographic framework

24px base unit — 4px minor grid

The underlying coordinate system establishes every element's position. Grid lines are always present at 15% opacity, providing spatial context without visual noise.

REF: A-1 · Blueprint Standard
24PX GRID
MEASURED
Section F-1 · Engineering Principles

Design Principles

Specification compliance — do and do not

Specification — Approved

  • 01Blueprint blue background `bg-[#1e3a5f]` as the only permitted base
  • 02`font-mono` for all text — technical data demands monospace precision
  • 03White lines `text-white` and `border-white/30` for primary visual elements
  • 04Grid dot pattern at 15% opacity using radial-gradient background
  • 05Orange `#ff6b35` strictly for dimension callouts and annotation markers
  • 06Corner bracket markers on all panel elements — engineering standard
  • 07Thin 1px borders — `border border-white/30` or `border-[#4a90d9]/50`
  • 08Uppercase tracking labels — `uppercase tracking-widest` for all tags

Non-Compliant — Prohibited

  • 01Never use warm or light backgrounds — no whites, creams, or grays
  • 02Never use serif, sans-serif, or display fonts — `font-mono` only
  • 03Never use colorful gradients — only blue-range tonal shifts permitted
  • 04Never use `rounded-2xl` or pill shapes — engineering uses sharp corners
  • 05Never use drop shadows or glows — precision requires clean edges
  • 06Never use decorative flourishes — every element must serve a function
  • 07Never use centered body text — left-aligned columns only
  • 08Never omit the grid pattern — spatial context is always required

Blueprint draws from the cyanotype tradition — images produced through the action of light on chemistry. Every line has a reason. Every annotation serves the engineer. Form follows function absolutely: decoration is a tolerance violation.

— Blueprint Design Standard · Rev 1.0 · 2026

Section G-1 · Annotation Language

Dimension Annotations

Callout lines, markers, and measurement labels

HORIZONTAL DIM
Element
Width: 240px

Horizontal callout with arrowheads at both terminations. Label floats at center.

VERTICAL DIM
Panel
Height: 128px

Vertical callout. Label rotated 90 degrees for inline reading with engineering drawings.

CORNER MARKERS
Bracket emphasis

Corner brackets mark panel boundaries. Standard 4–5px arm on each corner.

GRD-01
24pxGrid Units
STR-01
1pxStroke Weight
OPT-01
15–40%Opacity Scale
CRN-01
4–5pxCorner Arm
Blueprint工程蓝图

Cyanotype blueprint printing and modern engineering drawings. White lines on deep blue. Precision, professionalism, technical trust.

REV1.0.0
DATE2026-02-20
PROJSTYLEKIT

Sections

  • Hero
  • Components
  • Palette
  • Grid

Resources

  • All Styles
  • StyleKit Home

Blueprint · 工程蓝图 · StyleKit Design System

Cyanotype · 1:100 · Rev 1.0