Interface Lab

NOVA_AI 电影感滚动视频落地页v1.0 已发布

100.0K

NOVA_AI Cinematic LandingNOVA_AI 电影感滚动视频落地页建立了一套Glass、Layered 的网页界面系统。可复用层是字体、色彩、间距、圆角、表面、组件和基础动效；特殊 Skill 单独映射。

Typography

Heading systemFlexo Soft Medium / - / - / -Body system14px / 400Flexo Soft Medium

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

Colors

background#0A0A0A

67% usage signal

text-primary#FFFFFF

33% usage signal

text-secondaryrgba(255,255,255,0.85)

18% usage signal

text-mutedrgba(255,255,255,0.60)

10% usage signal

borderrgba(255,255,255,0.60)

6% usage signal

overlayrgba(0,0,0,0.20)

6% usage signal

Tertiary#4B4BA0

6% usage signal

Neutral#090A0D

6% usage signal

Layout

LayoutLayeredWidthBoundedGridMinimalFramingGlass

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

Spacing

16px8pxTitle block

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

8px16px24px32px48px64px

Icons

LinearKeep one stroke/fill rule and align icons to the spacing scale.

Elevation & Depth

Depth is communicated through surfaces, borders, shadows, and blur treatments.

GlassSurface, border, shadow, and blur remain reusable recipes.

Surface sampleGlass

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

Shapes

Shapes define the radius family for cards, inputs, tags, and supporting surfaces.

6pxradius-19999pxradius-2

Card surfaceInput fieldStatus pill

Interface Lab Skills

Scroll-scrubbed VideoDetailLayout / Components / ElevationReplay Reveal MotionSupportLayout / Components / Elevation