Clarity 来源采集截图 — Clarity — Style Reference · 来源预览 ↗

Clarity — Style Reference

居中电子能力门户：紫罗兰信号、深色渐变 Hero 与圆润的技术表面。

视觉来源原生是创意机构服务模板，其客户询盘路径支持 B2B 分类；开发板、电子模块和套件属于高改造量适配，并非来源网站的原生行业。这份原创实施规范使用虚构名称、抽象 CSS 几何和通用文案，将深紫色、轻盈的方向转化为供应商发现路径：探索能力 → 确认需求 → 准备询盘；不复用第三方代码、标识、图片、客户内容或交易流程。

https://bootstrapmade.com

调色板

本次改编实现的设计变量；请遵循 DESIGN.md 指定的前景与背景组合。

参考颜色

排版

字体尺寸与角色遵循交付实现；正式使用前请检查 Quick Start 中的字体服务要求。

字号刻度

nav14px · 600 · 1.35
hero60px · 700 · 1.08
section38px · 700 · 1.15
card20px · 700 · 1.25
lead19px · 400 · 1.6
body16px · 400 · 1.65
label14px · 700 · 1.35
caption12px · 400 · 1.4

字体

字体族

字重: 400 · 700
字号: 12–19px · 4 个值
行高: 1.35–1.65 · 4 个值
备选字体: Arial, sans-serif

注释 / 标签 / 正文 / 导语

字体族

字重: 700
字号: 20–60px · 3 个值
行高: 1.08–1.25 · 3 个值
备选字体: Arial, sans-serif

卡片标题 / 区块标题 / Hero

字体族

字重: 600
字号: 14–14px · 1 个值
行高: 1.35–1.35 · 1 个值
备选字体: Arial, sans-serif

导航

间距与形状

间距

用途	数值	预览
密度
基础单位
页面壳层
Hero
手机端

边框圆角

用途	数值	预览
能力卡片
按钮
输入框

完整间距刻度

1 --space-1
2 --space-2
3 --space-3
4 --space-4
5 --space-5
6 --space-6
区块 --space-section

指南

建议

将紫色限定为导航、行动、编号与技术几何的聚焦信号。
以类别、集成需求和本地询盘交接组织发现路径。
每一个能力标签上线前都补充获批、与项目对应的事实。
保留可见键盘焦点、原生标签、错误文字与减少动态效果路径。

避免

不要因为参考中存在装饰图标，就添加购物车、购物袋、价格、支付、结账或账户购买行为。
不要复用模板文案、Logo、人物、作品图片或第三方组件代码。
不要把样张卡片描述成库存、认证、交期、兼容性或性能证据。
不要让本地表单暗示数据传输、保存线索或实时报价。

Design.mdMarkdown

DESIGN-reference-eaa1f4254443.md

# Clarity — Style Reference
> 居中电子能力门户：紫罗兰信号、深色渐变 Hero 与圆润的技术表面。

**Theme:** light

视觉来源原生是创意机构服务模板，其客户询盘路径支持 B2B 分类；开发板、电子模块和套件属于高改造量适配，并非来源网站的原生行业。这份原创实施规范使用虚构名称、抽象 CSS 几何和通用文案，将深紫色、轻盈的方向转化为供应商发现路径：探索能力 → 确认需求 → 准备询盘；不复用第三方代码、标识、图片、客户内容或交易流程。

## Tokens — Colors

| Name | Value | Token | Role |
|---|---|---|---|
| 白色画布 | `#ffffff` | `--color-canvas` | 主页面表面 |
| 浅紫表面 | `#f7f7ff` | `--color-surface` | Hero 与流程区 |
| 信号紫 | `#524dd3` | `--color-violet` | 主行动与技术信号 |
| 深紫 | `#39349b` | `--color-violet-dark` | 悬停与强调 |
| 淡紫 | `#e9e8ff` | `--color-violet-pale` | 装饰性几何 |
| 亮紫 | `#c3c1ff` | `--color-violet-light` | 深色表面上的高可读紫色强调 |
| 墨色 | `#202035` | `--color-ink` | 标题与询盘深色表面 |
| 辅助灰 | `#62627a` | `--color-muted` | 正文 |
| 分隔线 | `#dcdced` | `--color-line` | 卡片与导航边界 |

## Tokens — Typography

Quicksand 用于圆润、易接近的标题；Roboto 用于紧凑且清晰的操作性文字；Poppins 用于紧凑导航。仅使用声明的字重；正式项目可用已批准字体文件替换托管字体。

### Type Scale

| Role | Family | Weight | Size | Line Height | Letter Spacing | Token |
|---|---|---:|---:|---:|---:|---|
| 注释 | Roboto | 400 | 12px | 1.4 | normal | `--text-caption` |
| 标签 | Roboto | 700 | 14px | 1.35 | normal | `--text-label` |
| 正文 | Roboto | 400 | 16px | 1.65 | normal | `--text-body` |
| 导语 | Roboto | 400 | 19px | 1.6 | normal | `--text-lead` |
| 卡片标题 | Quicksand | 700 | 20px | 1.25 | -0.02em | `--text-card` |
| 区块标题 | Quicksand | 700 | 38px | 1.15 | -0.045em | `--text-section` |
| Hero | Quicksand | 700 | 60px | 1.08 | -0.055em | `--text-hero` |
| 导航 | Poppins | 600 | 14px | 1.35 | normal | `--text-nav` |

## Tokens — Spacing & Shapes

整体采用宽松区块与紧凑导航。18px 圆角仅用于能力卡片；控件维持 8px 的克制圆角。

### Spacing Scale

| Name | Value | Token |
|---|---:|---|
| 1 | 8px | `--space-1` |
| 2 | 12px | `--space-2` |
| 3 | 16px | `--space-3` |
| 4 | 24px | `--space-4` |
| 5 | 32px | `--space-5` |
| 6 | 48px | `--space-6` |
| 区块 | 96px | `--space-section` |

### Border Radius

| Element | Value | Token |
|---|---:|---|
| 能力卡片 | 18px | `--radius-card` |
| 按钮 | 8px | `--radius-control` |
| 输入框 | 8px | `--radius-control` |

### Layout

- **页面壳层：** 居中 `--layout-max` / 1160px 阅读宽度，桌面边距为 24px。
- **Hero：** 使用 `--hero-min-height` / 580px、120px 垂直留白、深色渐变与对称原创放射几何，不采用来源摄影。
- **手机端：** 760px 以下页面边距为 16px，所有多列模块改为单列。

## Components

### 页头与移动导航
`.site-header`、`.nav-row` 与 `.nav-list` 组成克制的吸顶导航。内部行是 50px 圆角、25px 横向内边距的深色壳层。手机端 `.nav-toggle` 控制 `data-open`；Escape、再次点击开关或选择链接都会关闭列表。

### 居中 Hero
`.hero` 使用原创深色渐变、CSS 圆形与放射表面承载居中白色陈述。`.eyebrow`、`h1 em` 与单一紫色 50px 圆角 `.button` 形成能力邀请，不展示价格或购买行动。

### 能力卡片
`.capability-grid` 包含三张 `.capability-card`。每张采用 CSS 绘制的紫色圆环、简洁分类说明，不放库存、SKU 或购物车控件。

### 需求流程
`.process-grid` 与 `.process-item` 展示三个询盘准备步骤，只组织信息，不宣称测试、合规或性能结论。

### 本地询盘表单
`.form` 要求联系人或组织名称二选一，同时要求邮箱和需求说明。失败时设置 `aria-invalid`、显示关联错误并聚焦首个问题。有效提交显示 500ms 忙碌状态，随后说明请求仅在本地准备且未发送；不创建网络请求、存储、订单或报价。正式交付应以可见字段收集接口、芯片或控制器、尺寸、资料、合规需求、MOQ、交期和 OEM/ODM 需求，这些都是项目待填信息，而非预设承诺。

### 页脚
`.site-footer` 使用通用导航和联系占位。不得在这里放置供应商 Logo、来源标识、社交资料、客户名或成果数字。

## Do's and Don'ts

### Do

- 将紫色限定为导航、行动、编号与技术几何的聚焦信号。
- 以类别、集成需求和本地询盘交接组织发现路径。
- 每一个能力标签上线前都补充获批、与项目对应的事实。
- 保留可见键盘焦点、原生标签、错误文字与减少动态效果路径。

### Don't

- 不要因为参考中存在装饰图标，就添加购物车、购物袋、价格、支付、结账或账户购买行为。
- 不要复用模板文案、Logo、人物、作品图片或第三方组件代码。
- 不要把样张卡片描述成库存、认证、交期、兼容性或性能证据。
- 不要让本地表单暗示数据传输、保存线索或实时报价。

## Surfaces

| Level | Name | Value | Purpose |
|---:|---|---|---|
| 0 | 白色画布 | `#ffffff` | 页头、卡片、输入框 |
| 1 | 浅紫表面 | `#f7f7ff` | Hero 与需求流程 |
| 2 | 墨色询盘区 | `#202035` | 需求行动区 |
| 3 | 深色页脚 | `#151521` | 页脚内容 |

## Elevation

- 能力卡片使用 `--shadow-card` 与细分隔线；无需悬浮式导航抽屉。
- 按钮以填充对比与一像素边界提示可操作性，不依赖深重阴影。
- 流程卡片保持扁平，使紫色顶线和序号主导阅读顺序。

## Imagery

视觉系统只使用原创 CSS 渐变、圆环和圆形。后续图片必须是已获授权、符合项目实际的开发板或模块素材，并以替代文字说明真实产品语境。不得复用参考摄影、截图、图标或品牌标识。

## Layout

桌面顺序为页头 → 居中 Hero → 能力卡片 → 需求流程 → 本地询盘 → 页脚。Hero 始终是一幅居中构图。窄屏时导航变为可展开列表，卡片、流程、询盘与页脚网格堆叠，主内容不会被隐藏。

## Agent Prompt Guide

**Quick Color Reference**

- 画布 `#ffffff`，墨色 `#202035`，正文 `#62627a`，分隔线 `#dcdced`。
- 信号紫 `#524dd3`；悬停深紫 `#39349b`；淡紫几何 `#e9e8ff`。
- 深色表面使用白字与亮紫 `#c3c1ff` 强调；浅色表面的焦点环使用 `#242078`，深色表面的焦点环使用 `#c3c1ff`。

**Example Component Prompts**

1. **居中能力 Hero：** 创建最小高度 580px 的 `.hero`，使用原创紫色放射几何、居中 60px Quicksand 标题、一个短紫色强调词和一个询盘按钮。
2. **技术能力三卡：** 在响应式网格中创建三张 18px 圆角 `.capability-card`。使用 CSS 紫色圆环、简洁分类标签，并且没有交易控件。
3. **本地需求表单：** 实现联系人或组织名称、邮箱和需求说明的校验，配套关联错误、首个错误焦点、500ms 忙碌状态，以及明确的仅本地完成提示。

## Similar Brands

- **Arduino** — 产品生态说明了清晰的板卡家族导航价值，但不得复制其标识。
- **Adafruit** — 面向学习者的硬件页面表明分类可以既友好又准确。
- **SparkFun** — 组件发现可将技术语言与简洁的下一步结合。
- **STMicroelectronics** — 企业级技术传播说明产品事实和支持路径必须经过核实。

## Quick Start

### CSS Custom Properties

将此完整样式表作为空白项目起点。它包含 token、响应式布局、命名组件、焦点状态、校验状态、仅本地的忙碌反馈与减少动态效果处理；不使用来源代码或来源素材。

```css
:root {
  --color-canvas: #ffffff; --color-surface: #f7f7ff; --color-ink: #202035; --color-muted: #62627a;
  --color-violet: #524dd3; --color-violet-dark: #39349b; --color-violet-pale: #e9e8ff; --color-violet-light: #c3c1ff;
  --color-line: #dcdced; --color-focus: #242078; --color-focus-dark: #c3c1ff; --color-on-dark: #ffffff; --color-error: #b42318;
  --font-heading: 'Quicksand', Arial, sans-serif; --font-body: 'Roboto', Arial, sans-serif; --font-nav: 'Poppins', Arial, sans-serif;
  --text-caption: 12px; --text-label: 14px; --text-nav: 14px; --text-body: 16px; --text-lead: 19px; --text-card: 20px; --text-section: 38px; --text-hero: 60px;
  --space-1: 8px; --space-2: 12px; --space-3: 16px; --space-4: 24px; --space-5: 32px; --space-6: 48px; --space-section: 96px;
  --layout-max: 1160px; --layout-gutter: 24px; --hero-min-height: 580px; --radius-card: 18px; --radius-control: 8px; --shadow-card: 0 18px 48px rgba(39, 35, 117, .11);
}
* { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; color: var(--color-muted); background: var(--color-canvas); font: 400 var(--text-body)/1.65 var(--font-body); }
a { color: inherit; } button, input, textarea { font: inherit; } .shell { width: min(calc(100% - 2 * var(--layout-gutter)), var(--layout-max)); margin-inline: auto; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 30; padding: var(--space-2); background: var(--color-violet); color: var(--color-on-dark); transform: translateY(-200%); } .skip-link:focus { transform: translateY(0); }
.site-header { position: sticky; top: 0; z-index: 20; padding-block: 10px; background: color-mix(in srgb, var(--color-canvas) 94%, transparent); backdrop-filter: blur(10px); } .nav-row { min-height: 64px; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding-inline: 25px; border-radius: 50px; background: #1b1933; }
.brand { color: var(--color-on-dark); font: 700 24px/1 var(--font-heading); text-decoration: none; letter-spacing: -.04em; } .brand span { color: #a9a6ff; } .nav-list { display: flex; align-items: center; gap: 28px; list-style: none; padding: 0; margin: 0; } .nav-list a { color: #c8c6e3; font-family: var(--font-nav); font-size: var(--text-nav); font-weight: 600; text-decoration: none; } .nav-list a:hover { color: #ffffff; }
.nav-toggle { display: none; border: 1px solid #aaa7e9; border-radius: 50px; padding: 9px 12px; color: var(--color-on-dark); background: transparent; font-weight: 700; }
.hero { position: relative; overflow: hidden; display: grid; place-items: center; min-height: var(--hero-min-height); text-align: center; background: radial-gradient(circle at 13% 18%, rgba(82,77,211,.75), transparent 33%), radial-gradient(circle at 90% 78%, #1f2240, transparent 34%), linear-gradient(135deg, #05071e, #131428); }
.hero::before, .hero::after { content: ''; position: absolute; width: 300px; aspect-ratio: 1; border: 1px solid rgba(206,204,255,.36); border-radius: 50%; } .hero::before { top: -150px; left: -80px; } .hero::after { right: -110px; bottom: -180px; }
.hero-content { position: relative; z-index: 1; max-width: 820px; padding-block: 120px; } .eyebrow { margin: 0 0 var(--space-3); color: var(--color-violet); font-size: var(--text-label); font-weight: 700; letter-spacing: .11em; text-transform: uppercase; } .hero .eyebrow, .inquiry .eyebrow { color: var(--color-violet-light); } h1,h2,h3 { margin: 0; color: var(--color-ink); font-family: var(--font-heading); } h1 { color: var(--color-on-dark); font-size: var(--text-hero); line-height: 1.12; letter-spacing: -.055em; } h1 em { color: var(--color-violet-light); font-style: normal; } h2 { font-size: var(--text-section); line-height: 1.15; letter-spacing: -.045em; } h3 { font-size: var(--text-card); line-height: 1.25; }
.hero-copy { max-width: 670px; margin: var(--space-4) auto var(--space-5); color: #e5e4f5; font-size: var(--text-lead); } .button { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; border: 1px solid var(--color-violet); border-radius: 50px; padding: 12px 24px; background: var(--color-violet); color: var(--color-on-dark); font-weight: 700; text-decoration: none; transition: background .2s, transform .2s; } .button:hover { background: var(--color-violet-dark); transform: translateY(-1px); } .button--quiet { background: transparent; color: var(--color-violet); }
.section { padding-block: var(--space-section); } .section-heading { max-width: 680px; margin-bottom: var(--space-6); } .section-heading p { margin: var(--space-3) 0 0; }
.capability-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } .capability-card { min-height: 240px; padding: var(--space-5); border: 1px solid var(--color-line); border-radius: var(--radius-card); background: var(--color-canvas); box-shadow: var(--shadow-card); } .capability-card::before { content: ''; display:block; width: 42px; height: 42px; margin-bottom: var(--space-4); border: 8px solid var(--color-violet-pale); border-radius: 50%; box-shadow: inset 0 0 0 6px var(--color-violet); }
.process { background: var(--color-surface); } .process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); counter-reset: item; } .process-item { position:relative; padding: 72px var(--space-4) var(--space-4); border-top: 2px solid var(--color-violet); background: var(--color-canvas); } .process-item::before { counter-increment:item; content:'0' counter(item); position:absolute; top:var(--space-3); left:var(--space-4); color:var(--color-violet); font:700 28px var(--font-heading); }
.inquiry { background: #131428; color: #e8e7f7; } .inquiry h2 { color: var(--color-on-dark); } .inquiry-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:var(--space-6); } .field { display:grid; gap:6px; } .form { display:grid; gap:var(--space-3); } .field label { color:var(--color-on-dark); font-size:var(--text-label); font-weight:700; } .field input,.field textarea { width:100%; border:1px solid #77778e; border-radius:var(--radius-control); padding:13px; color:var(--color-ink); background:var(--color-canvas); } .field textarea { min-height:120px; resize:vertical; } .field [aria-invalid='true'] { border-color:var(--color-error); } .field-error { min-height:1.4em; color:#ffb4ab; font-size:var(--text-caption); } .form-status { min-height:1.6em; margin:0; color:var(--color-on-dark); } .button[disabled] { opacity:.65; cursor:wait; }
.site-footer { padding-top:var(--space-6); background:#151521; color:#c8c8d5; } .footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--space-5); padding-bottom:var(--space-5); } .site-footer h3 { color:var(--color-on-dark); font-size:var(--text-label); } .footer-base { border-top:1px solid #343445; padding-block:var(--space-3); font-size:var(--text-caption); }
:where(a,button,input,textarea):focus-visible { outline:3px solid var(--color-focus); outline-offset:3px; } .nav-row :where(a,button):focus-visible, .hero :where(a,button):focus-visible, .inquiry :where(a,button,input,textarea):focus-visible, .site-footer :where(a,button):focus-visible { outline-color: var(--color-focus-dark); }
@media (max-width: 760px) { :root { --layout-gutter: 16px; --hero-min-height: 500px; --text-hero: 40px; --text-section: 30px; --space-section: 64px; } .nav-row { padding-inline: 18px; } .nav-toggle { display:inline-flex; } .nav-list { position:absolute; top:82px; left:var(--layout-gutter); right:var(--layout-gutter); display:none; flex-direction:column; align-items:stretch; gap:0; padding:var(--space-3) var(--space-4); background:#03051f; border-radius:24px; } .nav-list[data-open='true'] { display:flex; } .nav-list a { display:block; padding:var(--space-3) 0; } .hero-content { padding-block:72px; } .capability-grid,.process-grid,.inquiry-grid,.footer-grid { grid-template-columns:1fr; } .capability-card { min-height:0; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; } }
```

### Tailwind v4

可选的 Tailwind v4 编译器输入；组件规则仍应保留上方完整样式表。

```css
@import "tailwindcss";
@theme {
  --color-canvas: #ffffff;
  --color-ink: #202035;
  --color-violet: #524dd3;
  --color-violet-dark: #39349b;
  --color-surface: #f7f7ff;
  --font-heading: 'Quicksand', Arial, sans-serif;
  --font-body: 'Roboto', Arial, sans-serif;
  --radius-card: 18px;
  --spacing-section: 96px;
}
```

调色板

参考颜色

排版

字号刻度

字体

间距与形状

间距

边框圆角

指南

建议

避免

Cookie 偏好