blueprint-ui

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Blueprint / Wireframe UI Design System

Blueprint / Wireframe UI设计系统

Build web pages using a technical blueprint aesthetic: dark background, sharp edges, connected sections with shared borders, dashed outlines, measurement annotations, and monospace labels.

采用技术蓝图风格构建网页：深色背景、锐利边缘、共享边框的连接式区块、虚线轮廓、尺寸标注以及等宽字体标签。

Core Principles

核心原则

No rounded corners. Everything is sharp-edged. Never use
```
rounded-*
```
classes.
Connected sections. Sections share borders and flow into each other via
```
border-x border-border
```
on a shared max-width container. No floating cards with gaps.
Dashed outlines for content boundaries, illustration placeholders, and measurement guides.
Section labels — small monospace uppercase labels positioned over section borders (e.g., "Hero", "Features", "CLI").
Measurement annotations — thin dashed lines with monospace dimension labels (e.g., "48px", "grid: 3 cols", "max-width: 672px") placed between sections or elements.
Dot grid background on the page body.
Numbered elements — cards and list items get small monospace counters like "01", "02", "03".

无圆角。所有元素均为锐利边缘。切勿使用
```
rounded-*
```
类。
连接式区块。区块共享边框，并通过共享最大宽度容器上的
```
border-x border-border
```
实现流畅衔接。无带间隙的浮动卡片。
虚线轮廓用于内容边界、插图占位符和尺寸参考线。
区块标签——位于区块边框上方的小型等宽大写标签（例如"Hero"、"Features"、"CLI"）。
尺寸标注——带有等宽尺寸标签（例如"48px"、"grid: 3 cols"、"max-width: 672px"）的细虚线，放置在区块或元素之间。
页面主体采用点阵网格背景。
元素编号——卡片和列表项添加小型等宽计数器，如"01"、"02"、"03"。

Color Palette

调色板

Background:     #0a0a0a
Surface:        #111111
Border:         #1e1e1e
Border bright:  #333333
Text primary:   #e8e8e8
Text muted:     #666666
Text dim:       #525252  (labels, annotations, counters)
Accent:         #f59e0b  (amber — CTAs, highlights, output text)
Accent alt:     #ea580c  (orange — hover states, secondary accent)

Background:     #0a0a0a
Surface:        #111111
Border:         #1e1e1e
Border bright:  #333333
Text primary:   #e8e8e8
Text muted:     #666666
Text dim:       #525252  (labels, annotations, counters)
Accent:         #f59e0b  (amber — CTAs, highlights, output text)
Accent alt:     #ea580c  (orange — hover states, secondary accent)

Typography

排版规范

Body: Inter (sans-serif)
Code / labels / annotations: JetBrains Mono (monospace)
Section headers: Two-tone — first line white, second line muted
Section labels: 10px monospace, uppercase, letter-spacing 0.1em,
```
text-dim
```
, positioned over borders with background color punch-through
Measurement text: 9px monospace,
```
text-dim
```

正文：Inter（无衬线字体）
代码/标签/标注：JetBrains Mono（等宽字体）
区块标题：双色样式——第一行白色，第二行浅灰色
区块标签：10px等宽字体、大写、字间距0.1em、
```
text-dim
```
类，置于边框上方并通过背景色覆盖边框
尺寸文本：9px等宽字体、
```
text-dim
```
类

Component Patterns

组件模式

Section container

区块容器

Sections are wrapped in

border-x border-border

on the shared

max-w-6xl

container. Internal content uses

border-b border-dashed border-border

as a bottom separator. Each section has a

.section-label

positioned at the top.

html

<section class="relative border-x border-border">
  <span class="section-label">Features</span>
  <div class="border-b border-dashed border-border px-8 pt-16 pb-16 md:px-16 md:pt-24 md:pb-24">
    <!-- content -->
  </div>
</section>

区块包裹在共享

max-w-6xl

容器的

border-x border-border

中。内部内容使用

border-b border-dashed border-border

作为底部分隔线。每个区块顶部都有一个

.section-label

标签。

html

<section class="relative border-x border-border">
  <span class="section-label">Features</span>
  <div class="border-b border-dashed border-border px-8 pt-16 pb-16 md:px-16 md:pt-24 md:pb-24">
    <!-- content -->
  </div>
</section>

Feature cards (connected grid)

功能卡片（相连网格）

Cards share borders in a grid. No gaps, no rounded corners. Each card gets a monospace counter.

html

<div class="grid border border-border md:grid-cols-3">
  <div class="border-b border-border p-6 md:border-b-0 md:border-r md:p-8">
    <div class="mb-3 font-mono text-[10px] uppercase tracking-widest text-dim">01</div>
    <h3>Title</h3>
    <p class="text-muted">Description</p>
  </div>
  <!-- more cards... last card has no border-r -->
</div>

卡片在网格中共享边框。无间隙、无圆角。每张卡片都有一个等宽计数器。

html

<div class="grid border border-border md:grid-cols-3">
  <div class="border-b border-border p-6 md:border-b-0 md:border-r md:p-8">
    <div class="mb-3 font-mono text-[10px] uppercase tracking-widest text-dim">01</div>
    <h3>Title</h3>
    <p class="text-muted">Description</p>
  </div>
  <!-- more cards... last card has no border-r -->
</div>

Terminal block

终端区块

Sharp corners, square traffic-light dots with borders, monospace content.

html

<div class="border border-border">
  <div class="flex items-center gap-2 border-b border-border px-4 py-2.5">
    <span class="h-2.5 w-2.5 border border-[#ff5f57] bg-[#ff5f57]/20"></span>
    <span class="h-2.5 w-2.5 border border-[#febc2e] bg-[#febc2e]/20"></span>
    <span class="h-2.5 w-2.5 border border-[#28c840] bg-[#28c840]/20"></span>
    <span class="ml-2 font-mono text-[10px] text-dim">terminal</span>
  </div>
  <div class="p-5 font-mono text-xs leading-[1.8] md:p-6 md:text-sm">
    <p><span class="text-dim">$</span> <span class="text-text">command here</span></p>
    <p class="text-amber">output here</p>
  </div>
</div>

锐利边角、带边框的方形红绿灯圆点、等宽内容。

html

<div class="border border-border">
  <div class="flex items-center gap-2 border-b border-border px-4 py-2.5">
    <span class="h-2.5 w-2.5 border border-[#ff5f57] bg-[#ff5f57]/20"></span>
    <span class="h-2.5 w-2.5 border border-[#febc2e] bg-[#febc2e]/20"></span>
    <span class="h-2.5 w-2.5 border border-[#28c840] bg-[#28c840]/20"></span>
    <span class="ml-2 font-mono text-[10px] text-dim">terminal</span>
  </div>
  <div class="p-5 font-mono text-xs leading-[1.8] md:p-6 md:text-sm">
    <p><span class="text-dim">$</span> <span class="text-text">command here</span></p>
    <p class="text-amber">output here</p>
  </div>
</div>

Buttons

按钮

Sharp-edged, monospace uppercase text, border-based. Two variants:

html

<!-- Primary (filled) -->
<a class="border border-amber bg-amber px-5 py-2 font-mono text-xs font-medium text-bg hover:bg-transparent hover:text-amber">
  GET STARTED
</a>

<!-- Secondary (outline) -->
<a class="border border-border px-5 py-2 font-mono text-xs font-medium text-muted hover:border-text hover:text-text">
  GITHUB
</a>

锐利边角、等宽大写文本、基于边框的样式。两种变体：

html

<!-- Primary (filled) -->
<a class="border border-amber bg-amber px-5 py-2 font-mono text-xs font-medium text-bg hover:bg-transparent hover:text-amber">
  GET STARTED
</a>

<!-- Secondary (outline) -->
<a class="border border-border px-5 py-2 font-mono text-xs font-medium text-muted hover:border-text hover:text-text">
  GITHUB
</a>

Measurement annotation

尺寸标注

Dashed lines with a centered dimension label between elements.

html

<div class="flex items-center gap-2">
  <div class="h-px flex-1 border-t border-dashed border-dim"></div>
  <span class="measure">48px</span>
  <div class="h-px flex-1 border-t border-dashed border-dim"></div>
</div>

元素之间带有居中尺寸标签的虚线。

html

<div class="flex items-center gap-2">
  <div class="h-px flex-1 border-t border-dashed border-dim"></div>
  <span class="measure">48px</span>
  <div class="h-px flex-1 border-t border-dashed border-dim"></div>
</div>

Illustration placeholder

插图占位符

Dashed border box with monospace dimension label.

html

<div class="flex h-48 items-center justify-center border border-dashed border-border">
  <span class="font-mono text-[10px] text-dim">[ 400 x 300 ]</span>
</div>

带等宽尺寸标签的虚线边框盒子。

html

<div class="flex h-48 items-center justify-center border border-dashed border-border">
  <span class="font-mono text-[10px] text-dim">[ 400 x 300 ]</span>
</div>

Carousel (horizontal scroll)

轮播组件（横向滚动）

Connected cards with shared borders in a scrollable container. Square arrow buttons.

html

<div class="carousel flex gap-0 overflow-x-auto scroll-smooth border border-border">
  <div class="flex min-w-[300px] flex-col border-r border-border">
    <!-- card content -->
  </div>
  <!-- more cards... -->
</div>

可滚动容器中带有共享边框的相连卡片。方形箭头按钮。

html

<div class="carousel flex gap-0 overflow-x-auto scroll-smooth border border-border">
  <div class="flex min-w-[300px] flex-col border-r border-border">
    <!-- card content -->
  </div>
  <!-- more cards... -->
</div>

Nav

导航栏

Fixed, sharp, blurred backdrop, monospace wordmark.

html

<nav class="fixed top-0 z-50 w-full border-b border-border bg-bg/90 backdrop-blur-md">
  <div class="mx-auto flex max-w-6xl items-center justify-between px-6 py-4">
    <a class="font-mono text-lg font-semibold">brand</a>
    <!-- links + CTA -->
  </div>
</nav>

固定定位、锐利边角、模糊背景、等宽品牌标识。

html

<nav class="fixed top-0 z-50 w-full border-b border-border bg-bg/90 backdrop-blur-md">
  <div class="mx-auto flex max-w-6xl items-center justify-between px-6 py-4">
    <a class="font-mono text-lg font-semibold">brand</a>
    <!-- links + CTA -->
  </div>
</nav>

Footer

页脚

Single border box at the bottom, monospace text, minimal.

底部的单边框盒子、等宽文本、极简风格。

Required CSS

必备CSS

css

@import "tailwindcss";

@theme {
  --color-bg: #0a0a0a;
  --color-surface: #111111;
  --color-border: #1e1e1e;
  --color-border-bright: #333333;
  --color-text: #e8e8e8;
  --color-muted: #666666;
  --color-dim: #525252;
  --color-amber: #f59e0b;
  --color-orange: #ea580c;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

html {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
}

.dot-grid {
  background-image: radial-gradient(circle, var(--color-border) 1px, transparent 1px);
  background-size: 24px 24px;
}

.section-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-dim);
  position: absolute;
  top: -8px;
  left: 12px;
  background: var(--color-bg);
  padding: 0 6px;
}

.measure {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--color-dim);
  letter-spacing: 0.05em;
}

.carousel::-webkit-scrollbar { display: none; }
.carousel { -ms-overflow-style: none; scrollbar-width: none; }

css

@import "tailwindcss";

@theme {
  --color-bg: #0a0a0a;
  --color-surface: #111111;
  --color-border: #1e1e1e;
  --color-border-bright: #333333;
  --color-text: #e8e8e8;
  --color-muted: #666666;
  --color-dim: #525252;
  --color-amber: #f59e0b;
  --color-orange: #ea580c;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

html {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
}

.dot-grid {
  background-image: radial-gradient(circle, var(--color-border) 1px, transparent 1px);
  background-size: 24px 24px;
}

.section-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-dim);
  position: absolute;
  top: -8px;
  left: 12px;
  background: var(--color-bg);
  padding: 0 6px;
}

.measure {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--color-dim);
  letter-spacing: 0.05em;
}

.carousel::-webkit-scrollbar { display: none; }
.carousel { -ms-overflow-style: none; scrollbar-width: none; }

Tech Stack

技术栈

Astro (static output) with
```
@tailwindcss/vite
```
plugin
Tailwind CSS v4 — theme defined in CSS
```
@theme
```
, no
```
tailwind.config.js
```
Google Fonts: Inter + JetBrains Mono
No JS frameworks. Pure Astro components. Vanilla JS only for interactions like carousels.
bun as package manager

Astro（静态输出）搭配
```
@tailwindcss/vite
```
插件
Tailwind CSS v4 — 主题在CSS
```
@theme
```
中定义，无需
```
tailwind.config.js
```
Google Fonts：Inter + JetBrains Mono
无JS框架。纯Astro组件。仅在轮播等交互中使用Vanilla JS。
bun 作为包管理器

When building a page

页面构建步骤

Wrap everything in a
```
.dot-grid
```
container
Use a single
```
max-w-6xl
```
centered main with
```
border-x border-border
```
on each section
Add
```
.section-label
```
to every section
Use connected grids (shared borders, no gaps) for cards
Add 1-2 measurement annotations per page for the blueprint feel
Keep all corners sharp — zero border-radius
Use the two-tone heading pattern for section headers
Terminal blocks use square traffic-light dots
All small labels and counters in monospace

将所有内容包裹在
```
.dot-grid
```
容器中
使用单个居中的
```
max-w-6xl
```
主容器，每个区块添加
```
border-x border-border
```
为每个区块添加
```
.section-label
```
标签
为卡片使用相连网格（共享边框、无间隙）
每页添加1-2个尺寸标注以体现蓝图风格
保持所有边角锐利——无圆角半径
区块标题采用双色样式
终端区块使用方形红绿灯圆点
所有小型标签和计数器使用等宽字体