Blueprint (Technical Drawing) 蓝图技术制图（Blueprint）
Blueprint turns the interface into an engineering drawing: a cyan-blue sheet ruled with a fine white grid, every control drawn as a 1px white outline, the surface annotated like a drafting document — dashed dimension lines with arrowheads, measurements ('280mm'), figure labels ('FIG. 1-A'), crosshair registration marks, and terse hand-lettered notes. Nothing is filled in; the UI is specified, not painted. It signals precision and planning — the screen as something you could build from.
蓝图把界面变成一张工程图纸：青蓝色图纸上打着细白网格，每个控件都画成 1px 白色轮廓线，图面像制图文件一样布满标注 —— 带箭头的虚线尺寸线、测量值（'280mm'）、图号标签（'FIG. 1-A'）、十字对位标记和简短的手写体注释。什么都不填色；UI 是被「标定」出来的，不是画出来的。它传达精确和规划感 —— 屏幕是一份可以照着施工的东西。
Scope: Covers the white-on-blue technical-drawing aesthetic — cyanotype grounds, drafting grids, dimension annotation — applied to interfaces. It is not monoline illustration (see Line Art) and not dark cockpit instrumentation (see Sci-Fi HUD): a blueprint is measured and labeled for construction, not merely outlined or glowing.
范围：涵盖应用在界面上的「蓝底白图」技术制图美学 —— 蓝晒底、制图网格、尺寸标注。它既不是单线插画（见线稿 / 单线风格），也不是深色座舱仪表（见科幻 HUD）：蓝图是为了施工而测量和标注的，不只是描个边、发个光。
标本可交互 —— 点点看。Specimen is live — try it.
If you called it…如果你管它叫……
Full style DNA完整风格 DNA
-
Cyan-blue ground, fine grid青蓝图纸底，细网格 surface defining定义特征
Deep blueprint blue (#0e4d92–#1b4f72) covered edge to edge by a fine white grid, like graph vellum under the drawing; a slightly brighter major line may step in every 4–5 cells.
深蓝图蓝（#0e4d92–#1b4f72）从边到边铺满细白网格，像图线下垫着的坐标纸；每隔 4–5 格可以有一条稍亮的主线。
-
Uniform white 1px outlines统一的白色 1px 轮廓线 geometry defining定义特征
Panels, buttons, sliders, and icons are single-weight white hairlines with empty interiors — no fills, gradients, or shadows; corners stay square.
面板、按钮、滑块和图标都是单一线宽的白色发丝线，内部留空 —— 没有填充、渐变和阴影；角保持方正。
-
Dimension lines with units带单位的尺寸线 layout defining定义特征
Dashed extension lines ending in arrowheads or perpendicular ticks annotate real measurements — '280mm', 'Ø60' — as if the layout were specified for construction.
虚线引出线以箭头或垂直短刻度收尾，标注真实测量值 —— '280mm'、'Ø60' —— 仿佛布局是为施工而标定的。
-
Figure labels and notes图号标签与注释 imagery defining定义特征
Uppercase mono tags ('FIG. 1-A', 'DETAIL B', 'SCALE 1:1') and leader arrows treat the screen as one numbered drawing in a set.
全大写等宽标签（'FIG. 1-A'、'DETAIL B'、'SCALE 1:1'）加指引箭头，把屏幕当作一套图纸里编号的一张。
-
Objects as drafted schematics物体画成制图示意 imagery supporting辅助特征
Imagery is drafted, not pictured: construction circles, dashed center lines, section hatching, exploded parts — a speaker rendered as a front-elevation diagram.
图像是「绘制」出来的，不是「描绘」出来的：构造圆、虚线中心线、剖面线、爆炸图零件 —— 一个喇叭要画成正立面图。
-
Crosshair registration marks十字对位标记 surface supporting辅助特征
Small plus-sign crosses sit at sheet corners or part centers, borrowed from print registration and drafting alignment.
小十字出现在图纸角落或零件中心，借自印刷对位和制图对齐。
-
Draw-on and measure-up motion描线与量测动效 motion variable可变特征
Lines may 'draw' themselves via dash animation and dimensions can slide to new values on state change; a static sheet is equally valid.
线条可以用虚线动画「自己画出来」，尺寸可以随状态变化滑到新数值；静态图纸同样成立。
-
Pictorial rendering绘画式渲染 imagery avoid避免
Shading, sketchy gestures, varied line weight, or anything drawn for beauty over buildability breaks the spec-sheet read — that is Line Art or Hand-Drawn territory.
明暗、涂鸦笔触、变化的线宽，或任何为美而不是为可建造性而画的东西，都会破坏规格书的观感 —— 那是线稿或手绘涂鸦的地盘。
Often confused with: Line Art最容易混淆：线稿 / 单线风格（Line Art / Monoline）
Blueprint (Technical Drawing)蓝图技术制图（Blueprint）
Line Art线稿 / 单线风格（Line Art / Monoline）
This is Blueprint because the drawing exists to be measured and built from: a cyan-blue ground, a white grid, dimension lines with units, figure numbers, and registration marks turn every element into a technical specification.
这是蓝图，因为这张图的存在是为了被测量和照着施工：青蓝底、白网格、带单位的尺寸线、图号和对位标记，把每个元素都变成一份技术规格。
It would become Line Art if the blue ground, grid, and annotation apparatus were stripped away, leaving clean single-weight outlines on white as pure illustration — expressive contour drawing with nothing left to measure.
如果把蓝底、网格和标注系统全部剥掉，只留下白底上干净的单一线宽轮廓当纯插画 —— 富有表现力的轮廓画，再没什么可量 —— 就变成线稿风格了。
In code — optional starting points代码写法 —— 可选起点
Ground + drafting grid
background-color: #0e4d92;
background-image:
repeating-linear-gradient(0deg, rgba(255,255,255,.12) 0 1px, transparent 1px 24px),
repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 1px, transparent 1px 24px);Technical-outline element + section-hatch fill
border: 1px solid rgba(255,255,255,.9);
background: transparent;
border-radius: 0;
box-shadow: none;
/* fill states (progress, volume): drafting section hatch */
.fill { background: repeating-linear-gradient(45deg, #fff 0 1.5px, transparent 1.5px 5px); }Same construction as utilities
bg-[#0e4d92] [background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.12)_0_1px,transparent_1px_24px),repeating-linear-gradient(90deg,rgba(255,255,255,.12)_0_1px,transparent_1px_24px)] border border-white/90 rounded-noneStyle brief — paste into your agent风格 Brief —— 粘贴给你的代理
Create the surface as an engineering blueprint. Canvas: deep blueprint blue (#0e4d92) with a fine white grid — 1px lines every 20–24px at rgba(255,255,255,0.12). Every element (panels, buttons, sliders, art) is a uniform 1px white outline (rgba(255,255,255,0.9)) with an empty interior: no fills, gradients, or shadows; border-radius 0. Annotate like a drafting sheet: dashed dimension lines (1px, ~6px dash) with arrowheads or ticks, labeled in small uppercase mono with real units ('280mm', 'Ø60'); numbered parts ('FIG. 1-A', 'DETAIL B'); crosshair registration marks at the corners. Render imagery as drafted schematics — construction circles, dashed center lines, section hatching — never pictorial art. Fill states (progress, volume) use 45° section hatching, not solid color. Type: monospace, uppercase, letter-spaced, 9–12px. Optional motion: draw lines on via stroke-dashoffset. Avoid solid blocks, soft shadows, rounded corners, glow (Sci-Fi HUD), and expressive sketchy linework (Line Art, Hand-Drawn). Keep text at 4.5:1 against the blue and honor prefers-reduced-motion.
把这个界面做成一张工程蓝图。画布：深蓝图蓝（#0e4d92）铺细白网格 —— 每 20–24px 一条 1px 线，颜色 rgba(255,255,255,0.12)。每个元素（面板、按钮、滑块、封面图）都是统一 1px 白色轮廓线（rgba(255,255,255,0.9)），内部留空：不要填充、渐变、阴影；border-radius 0。像制图图纸一样做标注：虚线尺寸线（1px，约 6px 线段）以箭头或短刻度收尾，用小号全大写等宽字体标真实单位（'280mm'、'Ø60'）；零件编号（'FIG. 1-A'、'DETAIL B'）；角落放十字对位标记。图像一律画成制图示意 —— 构造圆、虚线中心线、剖面线 —— 绝不用绘画式插图。填充状态（进度、音量）用 45° 剖面线，不用纯色。字体：等宽、全大写、加字距，9–12px。可选动效：用 stroke-dashoffset 让线条自己画出来。避免色块、柔和阴影、圆角、辉光（那是科幻 HUD）和富有表现力的涂鸦线条（那是线稿、手绘涂鸦）。蓝底上的文字保持 4.5:1 对比度，并响应 prefers-reduced-motion。
Accessibility & misuse可访问性与误用
White on #0e4d92 passes contrast comfortably, but the style lives on 1px hairlines and 9px mono labels — both are hard for low-vision users. Keep interactive outlines at a true 1px minimum, give text a quiet zone or solid knockout behind it, and never let the grid run through body copy.
白字配 #0e4d92 对比度轻松达标，但这个风格靠 1px 发丝线和 9px 等宽小标签活着 —— 两者对低视力用户都很难。交互轮廓至少保持真实的 1px，文字背后留一块安静区或实底色块，别让网格穿过正文。
Draw-on stroke animations and sliding measurement labels are the style's delight but non-essential motion: honor prefers-reduced-motion by rendering lines fully drawn, with no dash animation.
描线动画和滑动的尺寸标签是这个风格的乐趣所在，但属于非必要动效：响应 prefers-reduced-motion，直接呈现画好的线条，不做虚线动画。
Figure numbers, dimensions, and registration marks are decorative noise to assistive technology: mark annotation layers aria-hidden, and never carry meaning only in a schematic — the play button still needs a real accessible name, not just 'FIG. 2'.
图号、尺寸和对位标记对辅助技术来说是装饰性噪音：给标注层加 aria-hidden，也绝不要只把含义放在示意图里 —— 播放按钮仍然需要一个真正的无障碍名称，而不只是「FIG. 2」。
Origin起源
The process is real: Sir John Herschel invented the cyanotype in 1842, Anna Atkins used it for her botanical photogram books from 1843, and by the late nineteenth century it had become the cheapest way to copy architectural and engineering drawings — contact-printed white lines on Prussian-blue paper, the original 'blueprint'. Cyanotype copying was displaced by diazo whiteprints and then digital plotting through the twentieth century, but the word survived as a metaphor for any master plan, and the white-on-blue schematic look survives in interfaces as shorthand for engineering precision — from game building menus to 'blueprint' modes and technical marketing graphics.
这套工艺是真实存在的：John Herschel 爵士在 1842 年发明了蓝晒法（cyanotype），Anna Atkins 从 1843 年起用它制作植物摄影图鉴，到十九世纪末它已成为复制建筑和工程图纸最便宜的方式 —— 在普鲁士蓝图纸上接触印出白色线条，这就是最初的「蓝图」。二十世纪里，蓝晒复制先后被重氮晒图和数字绘图取代，但这个词作为「总体规划」的隐喻活了下来，而蓝底白线的示意图观感也留在界面里，成为工程精确感的 shorthand —— 从游戏的建造菜单到各种「蓝图模式」和技术风营销图。