Design System / One Page

绚量映界

Core Neon Aesthetic

这一页把完整网页里常见的结构标签、内容区块、交互组件、表单组件、数据展示、排版层级、页脚结构，统一收进一个高饱和霓虹拼贴风的 HTML 设计系统中。重点不是像素级临摹原图，而是抽取它的视觉语法：大字压画面、荧光描边、透明叠层、黄绿圆形能量场、青色翅片状装饰、像素网格英文轮廓、未来感胶片式拼贴。

查看组件 查看表单 复制代码规范
Huge Display Type Glass / Overlay Acid Pastel Pink Stroke
01 / Brand Tokens

Brand

这一组定义色彩、圆角、描边、光晕、纹理、按钮状态。原图最强的识别点是偏荧光的粉色描边和巨大的黄绿色发光圆形，因此系统里把这两个元素固定为基底。

Violet Field #5D63FF / #7A5CFF
Acid Halo #F7EF66 / #D8FF7D
Cyan Wings #62F1FF
Neon Stroke #FF47F5

Shape Tokens

  • Radius: 16 / 24 / 42 / 72
  • Stroke: 2px neon pink
  • Shadow: outline + pink glow
  • Panel: translucent glass layer

Texture Tokens

  • Radial halo
  • Fine grid lines
  • Diagonal slices
  • Micro particle dots

Motion Tokens

  • Hover lift: translateY(-2px)
  • Focus ring: neon border + glow
  • Layer drift: slight rotation offsets
  • Sticky header blur
02 / Typography

Type

标题使用重型无衬线，以近似海报字体的大块压迫感组织信息。英文辅助字用轮廓化、像素化表达，模拟原图 “CORENCLAW” 那种被网格切割的感受。

H1 霓虹主标题

H2 区块大标题

H3 组件标题

H4 次级标题

H5 辅助标题
H6 元信息标题

正文段落适合 16px–18px，行高建议 1.7–1.85。通过 高亮标记 可以强调重要信息。

Small / Caption / Meta text

主视觉字体

Secondary Pixel Outline

适合官网首页、专题页、活动页、作品集、潮流品牌、电音类视觉站点，也适合作为 WebGL 或动效站的静态 UI 基底。

Inline tags: HTML、Design System、Glass Panel、Emphasis、Strong、Underline.

03 / Components

Components

尽量覆盖常见网站元素：按钮、标签、通知、卡片、统计、表格、手风琴、分页、标签页、时间线、媒体对象、头像组等。

Buttons / Pills / Breadcrumbs

Tag Pill ⌘ + K

Alerts / Status

✓
Success组件发布成功，样式令牌已经同步到生产环境。
!
Warning当前页面使用的是演示数据，图表和表格不代表真实业务。
×
Error主色 token 缺失时，描边系统会出现视觉断裂，需要回退到默认变量。
Downloads 24K Month / UI Kit
Tokens 128 Color / Motion / Space
Coverage 96%
Members 08
A B C D
Table / Release Schedule
Version Status Owner Date
v1.0 Published Core Team
v1.1 Testing UI Team
v2.0 Planning Lab

Tabs / Segmented / Pagination

Accordion / FAQ

这个系统最适合什么网站？

最适合视觉驱动的网站：首页 Hero 需要强记忆点、希望品牌带有亚文化、未来感、潮流杂志感时，这套风格很合适。

如何避免页面太花？

把强视觉集中在 Hero、Banner、CTA 和重点卡片；正文区域保持较高留白，减少无意义装饰。

可以接入深色内容区吗？

可以，用更深的紫蓝面板承载正文，把荧光元素保留给边框、链接和按钮状态。

Timeline

Research

提取参考图的视觉语法与网页化表达方式。

Tokenize

整理颜色、边框、光晕、形状、排版层级为 CSS 变量。

Componentize

将按钮、表格、表单、通知、卡片统一成同一材质语言。

04 / Forms

Forms

输入框、文本域、下拉框、复选、单选、字段组、搜索条和按钮等都统一到荧光边框玻璃板材质中。

Preferences

Search / Filters / Utility

78%
05 / Content Patterns

Content

网站并不只有控件，还需要故事、媒体、说明文字、价格卡、成员卡、代码块、数据块等实际内容载体。

Figure / 用纯 CSS 拼出黄绿光晕、荧光描边、青色翅片状装饰和玻璃层。

Lite

¥199

适合单页落地页和活动专题页。

  • 基础色彩与按钮
  • Hero + Footer
  • 基础表单样式

Studio

¥599

适合完整品牌官网和设计系统起稿。

  • 全组件库
  • Token 体系
  • 响应式布局

Ultra

¥1299

适合扩展到动态视觉、3D 或品牌活动站。

  • 高级动效建议
  • 页面模块模板
  • 品牌化扩展

Dialog / Article / Semantic Text

语义标签建议

header / nav / main / section / article / aside / figure / footer / form / fieldset / details / table / time / mark / code

真正做网站时，不要只靠 div 堆页面。即便最终视觉非常“超现实”，语义结构也应该保持清晰，这样对 SEO、无障碍、维护性都更友好。

例如品牌故事用 article，组件分区用 section，补充资料用 aside，图像和说明用 figure + figcaption，FAQ 用 details + summary。

Code Sample

:root {
  --line: #ff47f5;
  --cyan: #62f1ff;
  --yellow: #f7ef66;
  --bg-0: #5868ff;
  --panel: rgba(255,255,255,.08);
}

.panel {
  background: linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.08));
  border: 2px solid rgba(255,60,255,.7);
  box-shadow: 0 0 0 2px var(--line), 0 0 30px rgba(255,71,245,.15);
  backdrop-filter: blur(18px);
}
Semantic Tags Used 30+
Reusable Patterns 18
Visual Consistency High
Ready for Expansion Yes