Interface Lab

NeuroSync 认知加速首页v1.0 已发布

7.4K

NeuroSync 认知加速首页 Design SystemNeuroSync 认知加速首页建立了一套Gradient shell、Layered 的营销落地页系统。可复用层是字体、色彩、间距、圆角、表面、组件和基础动效；特殊 Skill 单独映射。

Typography

Heading systemInter / 42px / 600 / 1.05Body systemInter / 12px / 400 / 1.55Inter

LettersAa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk LlNumbers01 02 03 04 05 06 07 08 09

Colors

primary#07080A

12% usage signal

secondary#F3F4F2

6% usage signal

tertiary#FFFFFF

24% usage signal

neutral#090A0D

6% usage signal

radial-gradient(circle at 54% 70%,#ffffff1a,transparent 24%)linear-gradient(180deg,#090a0d,#0a0b0e)linear-gradient(180deg,transparent,#f8fbff,#f3b57b,transparent)

Layout

LayoutLayeredWidthFull BleedGridMinimalFramingGradient shell

导航与入口主叙事区视觉场与背景层内容/数据表面行动路径

Spacing

10px9pxTitle block

Description copy reflects measured rhythm, icon offset, and CTA spacing.

9px10px13px15px16px34px46px56px

Buttons

Product

Icons

Linear- Radius family: 2px - Icon style: Linear

Elevation & Depth

- Surface: Gradient shell - Border: 1px solid currentColor / low opacity - Shadow: 0 25px 50px rgba(0,0,0,.35) - Blur: 12px

Blur / backdrop filterBlur / backdrop filter / Gradient surfaces

Surface sampleGradient shell

SurfaceGradient shellBorder1px solid currentColor / low opacityShadow0 25px 50px rgba(0,0,0,.35)Blur12px

Shapes

- Radius family: 2px - Icon style: Linear

2pxsurface9999pxpill

Card surfaceInput fieldStatus pill

Do's and Don'ts

Use these constraints as design lint rules for future generations.

Do把 Design System 作为每个作品的第一层 Skill 维护。先复用字体、颜色、间距、圆角、表面和组件规则，再叠加特殊 Skill。每个特殊 Skill 必须绑定到具体区域，避免全局风格漂移。新增作品时先生成 DESIGN.md，再判断哪些局部效果可以沉淀为 Skill。

Don't不要让 WebGL、Three.js 或动效重新定义全局字体和组件系统。不要只用视觉形容词描述作品，必须落到 token、区域和 Skill。不要把一次性页面细节误存成 Design System 基础规则。

Interface Lab Skills

Aura 资产图像DetailButtons / Components边框渐变SupportColors / Elevation遮罩揭示SupportLayout / Components / Elevation