Line Art 线稿 / 单线风格（Line Art / Monoline）
Line Art renders an interface as a contour drawing: every control, container, and icon is built from a single-weight outline with no solid fill, like a technical illustration or monoline icon set blown up to UI scale. The line itself is the visual subject — not a border around a colored block, not decoration on top of a flat layout. It reads as precise, light, and almost schematic, as though the product were still a clean ink drawing on tracing paper.
线稿风格把界面画成一幅轮廓图：每一个控件、容器和图标都由单一粗细的轮廓线构成，没有实心填充，就像被放大到 UI 尺寸的单线图标集或技术插图。线本身就是视觉主体 —— 它不是色块周围的边框，也不是扁平布局上的装饰。整体观感精确、轻盈、近乎示意图，仿佛产品还是描图纸上一张干净的墨线图。
Scope: This entry covers line-art UI as a finished visual style — uniform-stroke outlines, monoline icons, and wireframe-like surfaces where the contour is the form. It does not cover low-fidelity wireframes (which are placeholders, not a final look) nor line illustrations used only as decoration; here the entire interface must read as a single contour drawing.
范围：本条覆盖作为成品视觉风格的线稿 UI —— 统一粗细的描边、单线图标、线框感表面，其中轮廓就是形体。它不包括低保真线框图（线框只是占位，不是最终外观），也不包括仅作为装饰出现的线性插画；在这里，整个界面必须被读作一幅轮廓画。
标本可交互 —— 点点看。Specimen is live — try it.
If you called it…如果你管它叫……
Full style DNA完整风格 DNA
-
Single-weight contour lines统一粗细的轮廓线 geometry defining定义特征
All structure is drawn with one consistent stroke weight — typically 1.5–2px — whether it is a card edge, button rim, icon, or divider.
所有结构都用同一粗细的线条绘制 —— 通常是 1.5–2px —— 不管是卡片边缘、按钮边框、图标还是分隔线。
-
No solid fills无实心填充 surface defining定义特征
Interactive surfaces are hollow; the background shows through every shape. Color appears only as line ink, never as block fill.
交互表面是中空的，背景会透过每个形状显现出来。颜色只作为线条的墨迹出现，绝不会以块状填充出现。
-
Monochrome ink palette单色墨迹配色 color defining定义特征
A near-black line color such as #1a1a1a or #222223 on an off-white ground such as #fafafa or #ffffff; optional single accent is still a line, not a fill.
线条用接近纯黑的颜色，如 #1a1a1a 或 #222223，铺在米白底色 #fafafa 或 #ffffff 上；即便有单一强调色，它也只能是一条线，而不是填充。
-
Technical-drawing precision技术制图般的精确 geometry defining定义特征
Clean vector paths, consistent corner radii (0–4px), exact alignment, and equal gaps — the feeling of a draftsperson's ink drawing rather than a sketch.
干净的矢量路径、统一的圆角（0–4px）、精确对齐、等距间隙 —— 给人的感觉是制图员的墨线图，而不是随手草图。
-
Negative space as form负空间即形体 layout supporting辅助特征
Composition relies on the gaps between lines; shapes are recognized by the boundary they draw, not by filled regions or heavy boxes.
构图依赖线条之间的空隙；形状靠它画出的边界被识别，而不是靠填充区域或沉重的盒子。
-
Outline-friendly type适配轮廓的字体 typography supporting辅助特征
A plain geometric sans in regular weight, small sizes (12–14px), with no filled badges or heavy labels competing with the contour network.
使用朴素的几何无衬线体，常规字重，字号 12–14px，没有填充徽章或厚重标签去和轮廓网络抢戏。
-
Flat filled blocks扁平填充块 surface avoid避免
Solid rectangles of color or tinted cards shift the style toward Minimalism or flat design — the line is no longer doing the work.
实心色块或着色卡片会把风格推向极简主义或扁平设计 —— 线就不再是主角了。
Often confused with: Minimalism最容易混淆：极简主义
Line Art线稿 / 单线风格（Line Art / Monoline）
Minimalism极简主义
This is Line Art because the visual subject is the drawn contour itself — every element is a single-weight outline with empty interior, like a technical illustration.
这是线稿风格，因为视觉主体是画出来的轮廓线本身 —— 每个元素都是统一粗细的描边，内部留白，像技术插图一样。
It would become Minimalism if the outlines were replaced by solid color blocks, generous whitespace, and flat fills — the form would come from absence and color, not from drawn lines.
如果把这些轮廓线换成纯色块、大量留白和扁平填充 —— 形体来自缺失和颜色，而不是画出来的线 —— 就变成极简主义了。
In code — optional starting points代码写法 —— 可选起点
The defining container: a hollow card drawn in one stroke
background: transparent; border: 1.5px solid #1a1a1a; border-radius: 4px; color: #1a1a1a;A line-art button: circular outline, no fill, icon as stroke
width: 40px; height: 40px; border: 1.5px solid #1a1a1a; border-radius: 50%; background: transparent; color: #1a1a1a; transition: transform .15s ease;SVG icon drawn with the same stroke weight
svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }Style brief — paste into your agent风格 Brief —— 粘贴给你的代理
Create the interface as Line Art. Defining signals: every element is rendered as a single-weight contour line, typically 1.5px solid #1a1a1a on a #fafafa or #ffffff ground, with no solid fills; buttons, cards, and icons are hollow shapes whose boundaries are the form. Use a clean geometric sans such as Inter or SF Pro at 12–14px regular weight; keep labels sparse so the line network stays the visual subject. Interactive states should change the line (dashed focus outline 1.5px dashed #1a1a1a, pressed state scale 0.96 or a short dash animation) rather than adding background fills. Progress bars and sliders are simple horizontal lines with a circular thumb drawn in the same stroke; use SVG stroke-only icons (stroke-width: 1.5, fill: none, stroke-linecap round). Corner radii stay subtle at 0–4px; shadows are absent. Do not drift into Minimalism — the decisive difference is that Line Art builds the interface from drawn outlines, while Minimalism builds it from colored blocks and whitespace. Preserve a minimum 3:1 contrast for the lines themselves and 4.5:1 for any text, keep touch targets at least 44×44px even when the visible outline is smaller, and provide non-color state cues such as dashed outlines or scale changes.
用线稿风格（Line Art / Monoline）创建这个界面。决定性信号：每个元素都渲染成统一粗细的轮廓线，通常用 1.5px solid #1a1a1a 铺在 #fafafa 或 #ffffff 底色上，没有任何实心填充；按钮、卡片和图标都是中空形状，边界本身就是形体。字体用干净的几何无衬线体，如 Inter 或 SF Pro，12–14px 常规字重；标签保持稀疏，让线条网络始终是视觉主体。交互状态应改变线条本身（焦点用 1.5px dashed #1a1a1a 的虚线框，按下态用 scale(0.96) 或短线动画），而不是添加背景填充。进度条和滑块就是一根水平线加同粗细的圆形滑块thumb；图标用纯 SVG 描边（stroke-width: 1.5, fill: none, stroke-linecap round）。圆角控制在 0–4px；不使用阴影。不要滑向极简主义；决定性区别在于线稿风是用画出来的轮廓线搭建界面，而极简主义是用色块和留白搭建。保证线条本身至少有 3:1 对比度，文字达到 4.5:1，触控目标即便可见轮廓较小也要保持至少 44×44px，并通过虚线框、缩放变化等非颜色线索表达状态。
Accessibility & misuse可访问性与误用
Thin contour lines can disappear for users with low vision or on low-contrast screens; keep the stroke at least 1.5px and measure it against the ground at the smallest supported viewport.
细轮廓线对低视力用户或低对比度屏幕可能不可见；线条至少保持 1.5px，并在最小支持视口下实测与背景的对比度。
Line-only controls can look inert because there is no filled button shape to suggest clickability; reinforce affordance with hover/focus state changes (dashed outline, scale, or arrow cursor) and ensure keyboard focus is highly visible.
纯线条控件看起来可能不像可点击物，因为缺少实心按钮形状暗示可操作性；通过 hover / focus 状态变化（虚线框、缩放或指针光标）强化 affordance，并确保键盘焦点高度可见。
Small outlined icons and tiny labels are hard to parse at a glance; pair the line network with adequate spacing and avoid relying on line color alone to communicate state — use dashed, dotted, or thickened strokes instead.
细小的描边图标和微型标签一眼难辨；让线条网络配合足够的间距，并避免单独依赖线条颜色传达状态 —— 改用虚线、点线或加粗描边。
Origin起源
Line art is an ancient graphic technique — technical illustration, engraving, and engineering drafting all rely on contour alone — but its modern UI form grew from two visible revivals: the Noun Project's monoline icon library, which popularized single-weight pictograms around 2010, and iOS 7's ultra-thin outline icon set in 2013, which proved an entire interface could read as a family of strokes. Since the mid-2010s the look has appeared in landing pages, dashboards, and illustration-led product identities as a deliberate antidote to heavy flat fills.
线稿是一种古老的图形技法 —— 技术插图、版画、工程制图都只靠轮廓 —— 但它现代的 UI 形态来自两次可见的复兴：Noun Project 的单线图标库在 2010 年前后把统一粗细的象形图推广开来，而 2013 年 iOS 7 的超细描边图标则证明整套界面都可以被读作一个笔画家族。2010 年代中期以来，这种风格作为对厚重扁平填充的反拨，出现在落地页、仪表盘和以插画为主导的产品形象中。