NFT & Web3 Platform

---
version: alpha
name: NFT & Web3 Platform
description: 一套赛博朋克藏品界面，以近黑画布、洋红身份色、青色交互反馈、金色价值信号和适配艺术品的玻璃面板构成。
sourceUrl: "https://www.uupm.cc/demo/nft-web3"
websiteUrl: "https://www.uupm.cc/demo/nft-web3"
exampleUrl: "https://www.uupm.cc/demo/nft-web3"
language: zh-CN
sourceLanguage: en
colors:
  primary: "#FF00FF"
  primary-dark: "#FF00FF"
  secondary: "#00FFFF"
  cta: "#FFD700"
  ink: "#FFFFFF"
  body: "#9CA3AF"
  muted: "#9CA3AF"
  hairline: "#333333"
  canvas: "#0D0D0D"
  surface: "#1A1A1A"
  on-primary: "#0A0E27"
  success: "#22C55E"
  warning: "#F59E0B"
  error: "#EF4444"

typography:
  display-xl:
    fontFamily: "Orbitron, sans-serif"
    fontSize: 60px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -1.2px
  display-lg:
    fontFamily: "Orbitron, sans-serif"
    fontSize: 44px
    fontWeight: 700
    lineHeight: 1.16
    letterSpacing: -0.8px
  title-lg:
    fontFamily: "Orbitron, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: -0.2px
  title-md:
    fontFamily: "Orbitron, sans-serif"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0
  body-lg:
    fontFamily: "DM Sans, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0
  body-md:
    fontFamily: "DM Sans, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0
  body-sm:
    fontFamily: "DM Sans, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  label:
    fontFamily: "DM Sans, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0.02em
  metric:
    fontFamily: "Orbitron, sans-serif"
    fontSize: 32px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.5px

rounded:
  xs: 4px
  sm: 5px
  md: 8px
  lg: 14px
  xl: 24px
  pill: 9999px

spacing:
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 24px
  xl: 32px
  xxl: 48px
  section: 80px

effects:
  panel-shadow: "0 0 34px rgba(255, 0, 255, 0.18)"
  focus-ring: "0 0 0 3px #FF00FF33"
  hover-lift: "translateY(-2px)"
  transition: "160ms ease"

components:
  button-primary:
    backgroundColor: "{colors.cta}"
    textColor: "#111111"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 14px 28px
    minHeight: 48px
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    borderColor: "{colors.primary}"
    borderWidth: 1px
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 13px 27px
    minHeight: 48px
  content-card:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.hairline}"
    rounded: "{rounded.lg}"
    padding: 24px
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    borderColor: "{colors.hairline}"
    rounded: "{rounded.md}"
    padding: 12px 14px
    minHeight: 48px
  status-badge:
    backgroundColor: "#00FFFF1F"
    textColor: "{colors.secondary}"
    rounded: "{rounded.pill}"
    padding: 6px 10px
---

## 概览

该模板把来源 Demo 抽象为可复用的 **赛博朋克藏品玻璃** 体系，适用于营销页、发现流程、产品样张、转化模块和内容密集型服务界面。模板不规定具体品牌与业务文案；可复用价值来自字体、颜色职责、空间节奏、表面层级与交互语法。

其识别细节是纤细霓虹框、版次元数据、克制故障转场与艺术品主导卡片。这些细节必须增强内容，而不能沦为装饰。

## 设计原则

- **内容建立层级。** 图像、指标、产品或服务证据先于装饰效果。
- **颜色职责固定。** 主色用于导航与选中，辅助色用于对照，CTA 色只负责承诺型操作。
- **每屏只有一个签名处理。** 让特色字体、表面或动效中的一个成为主角，其余组件保持安静。
- **真实密度下仍可读。** 页面变得数据密集或内容丰富时，标签、数值、说明与焦点顺序仍需清晰。
- **抽象设计体系，而非复制来源故事。** Demo 中的名称、价格、承诺和图像都应替换为经过验证的项目内容。

## 色彩体系

### 核心职责

- **Primary**（`{colors.primary}` — #FF00FF）：品牌强调、选中、关键链接、焦点环与激活导航。
- **Secondary**（`{colors.secondary}` — #00FFFF）：辅助高光、对比状态、分类区分与克制的氛围细节。
- **CTA**（`{colors.cta}` — #FFD700）：最高优先级承诺操作，不重复铺在被动表面。
- **Ink**（`{colors.ink}` — #FFFFFF）：标题、关键数值与高强调标签。
- **Body**（`{colors.body}` — #9CA3AF）：段落、帮助文案与元数据。
- **Canvas**（`{colors.canvas}` — #0D0D0D）：页面级背景。
- **Surface**（`{colors.surface}` — #1A1A1A）：卡片、控件、内容槽与有边界模块。
- **Hairline**（`{colors.hairline}` — #333333）：分隔线、输入框、表格规则与弱边界。

### 使用比例

画布与中性色表面约占视口 75–85%，主色占 8–15%，辅助色占 3–8%，CTA 面积最小但最明确。涉及安全、失败或完成时，语义红、橙、绿不得被装饰性色替代。

## 字体体系

展示标题、大型卡片标题与关键数值使用 **Orbitron**；段落、导航、表单控件、标签和密集元数据使用 **DM Sans**。

| Token | 字号 | 字重 | 用途 |
| --- | ---: | ---: | --- |
| `{typography.display-xl}` | 60px | 600–700 | Desktop 首屏主张 |
| `{typography.display-lg}` | 44px | 600–700 | 主要区块标题 |
| `{typography.title-lg}` | 24px | 600 | 功能、服务或集合标题 |
| `{typography.title-md}` | 18px | 600 | 卡片与面板标题 |
| `{typography.body-lg}` | 20px | 400 | 首屏辅助说明 |
| `{typography.body-md}` | 16px | 400 | 默认内容与控件 |
| `{typography.body-sm}` | 14px | 400 | 元数据、图注与帮助文字 |
| `{typography.label}` | 14px | 600 | 按钮、Tab、筛选与徽标 |
| `{typography.metric}` | 32px | 700 | 进度、价格、评分或关键总数 |

Desktop 展示标题每行控制在约 10–14 个英文单词对应的视觉长度。正文每行保持 45–75 个字符。不得用展示字体排长段落。

## 布局

- 最大内容宽度 1280px，Desktop 两侧 gutter 为 24px。
- 推荐构图：首屏采用 5/7 文案与精选艺术品分栏，资产画廊四列，创作者或市场区使用分栏。
- 营销 section 垂直内边距 80–112px；应用或目录模块可用 48–64px。
- 主要内容轴必须稳定；装饰媒体可出血，但控件与阅读文本需对齐网格。
- 卡片内边距 24px，紧凑行 12–16px，相关控件间隔 8–12px。
- 每个 section 只保留一个视觉主角，避免多个元素同权竞争。

## 表面与层级

1. **Canvas：** #0D0D0D，无阴影。
2. **Quiet region：** #1A1A1A，可带 hairline，不抬高。
3. **Content card：** 表面填充加 1px hairline。
4. **Interactive card：** 在内容卡基础上加入轻微 0 0 34px rgba(255, 0, 255, 0.18) 阴影或等效边界对比。
5. **Floating control：** 仅用于搜索、预订、模型选择、媒体控制等真正需要抬高的操作。

标志性表面必须可优雅降级。半透明区域需要不透明 fallback；深色界面需要不依赖阴影的可见边界。Hover 位移最多 2px。

## 形状体系

- `{rounded.xs}`：微小可视化标记。
- `{rounded.sm}`：紧凑筛选、标签与工具控件。
- `{rounded.md}`：按钮、字段与标准卡。
- `{rounded.lg}`：首屏样张与大型内容模块。
- `{rounded.pill}`：只用于状态、标签、头像与分段控件。

形状语言需匹配整体气质，不要把锐利编辑块与无关膨胀胶囊混用。

## 组件规范

### 按钮

主按钮使用 CTA 色，点击区域至少 48px，并使用简洁动词。次按钮透明或使用表面色，配主色描边。Hover 只改变明度并最多上浮 2px；Pressed 回到基准面。Disabled 降低彩度但保持标签可读。

### 卡片

卡片从有意义内容开始：图像、标题、指标、任务或服务信息。边框与阴影只突出一个。元数据顺序保持统一；交互卡需提供 Hover 与键盘 Focus，且不能引发布局位移。

### 表单与搜索

标签始终可见，placeholder 不代替 label。依赖字段应分组，错误提示就近出现，最强颜色只用于提交操作。日期、价格、模型、数量或分类选择器需显示当前值。

### 媒体与数据

使用经过验证且授权清晰的图像，保持自然裁切并提供有效替代文本。图表与进度不能只依赖颜色区分；数字列使用等宽数字特性。

## 交互状态

- **Hover：** 小幅明度变化，最多上浮 2px，无重排。
- **Focus：** 清晰 3px 主色焦点环并保留 offset。
- **Pressed：** 取消上浮，表面或边界加深。
- **Loading：** 保持组件尺寸，时长不确定时描述进度。
- **Success：** 绿色配图标或明确确认文字。
- **Warning / Error：** 在受影响控件旁解释问题并提供恢复路径。
- **Empty：** 教用户完成下一步，不展示纯装饰空卡。
- **Disabled：** 保持可读；原因不明显时需说明。

## 动效

控件过渡 160–240ms，section 揭示 320–500ms。只动画 opacity 与 transform，避免布局属性。特色动效集中成一次编排，不散落循环。遵循 `prefers-reduced-motion`，关闭视差、自动移动与循环效果，同时保留状态反馈。

## 响应式

| 断点 | 行为 |
| --- | --- |
| ≥ 1200px | 完整构图、3–4 列网格与完整导航 |
| 768–1199px | 两列模块、缩小展示字号、简化浮动细节 |
| 480–767px | 单一阅读列，仅次级集合可横向滚动 |
| < 480px | 20px 页面 gutter、44px 最小控件、紧凑元数据、无装饰溢出 |

Mobile 下文案应排在产品或内容样张之前；主操作可见但不得覆盖内容；需测试长中文与本地化标签。禁止把 Desktop 网格直接缩小到不可读。

## 无障碍

- 满足 WCAG AA：正文 4.5:1，大字和界面边界 3:1。
- 焦点顺序与视觉顺序一致。
- 纯图标控件需有无障碍名称和至少 44×44px 点击区。
- 状态不得只通过 #FF00FF、#00FFFF 或 #FFD700 传达。
- 非必要动效可暂停或减少，不使用闪烁。
- 内容图像提供有效 alt；纯氛围图使用空 alt。
- 表单通过语义关系提供 label、说明、验证与恢复路径。

## 应当与不应当

### 应当

- 保留纤细霓虹框、版次元数据、克制故障转场与艺术品主导卡片。
- 在导航、内容和转化中维持固定颜色职责。
- 使用真实项目证据和本地化文案。
- 像设计理想状态一样设计空、加载、成功与失败状态。
- 在图像、半透明和渐变叠加后重新检查对比度。

### 不应当

- 使用霓虹正文、控件故障动画、虚假稀缺感，以及改变艺术品本身的视觉效果。
- 复制来源 Demo 的名称、价格、承诺、Logo 或评价。
- 给每张卡都添加视觉效果。
- 把必要信息藏在 Hover 后。
- 为视觉新奇牺牲键盘访问或文字清晰度。

## QA 检查清单

- [ ] 三张预览图均可加载，并代表模板的不同部分。
- [ ] 展示字体和正文字体有合理 fallback，且不会造成明显布局跳动。
- [ ] 主色、辅助色、CTA 与语义色职责不混淆。
- [ ] 标题层级连续，并可在 200% 缩放下阅读。
- [ ] 按钮、链接、字段、卡片与导航具备 Hover、Focus、Pressed、Disabled 状态。
- [ ] 表单保留可见标签，并以程序化方式暴露校验信息。
- [ ] 图像版权、裁切、替代文本和响应式资源已验证。
- [ ] Desktop、Tablet、Mobile 均无横向溢出。
- [ ] 减少动效模式完全可用。
- [ ] 来源业务内容已替换为项目真实内容。