Digital Epoch 视频 Hero 与 Logo 跑马灯v1.0 已发布
8.1K
Digital Epoch 视频 Hero 与 Logo 跑马灯 Design SystemDigital Epoch 视频 Hero 与 Logo 跑马灯 建立了一套Glass、Layered 的营销落地页系统。可复用层是字体、色彩、间距、圆角、表面、组件和基础动效；特殊 Skill 单独映射。
Typography
Heading systemInter / 56px / 600 / - / -Body systemInter / 16px / 400 / - / -Inter
LettersAa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk LlNumbers01 02 03 04 05 06 07 08 09
Colors
Primary#F9FAFB

6% usage signal

Secondary#0A1B33

53% usage signal

Tertiary#FFFFFF

24% usage signal

Neutral#64748B

18% usage signal

linear-gradient(90deg,transparent,black 12%,black 88%,transparent)linear-gradient(135deg,#2563eb,#93c5fd)"></div><img src="https://svgl.app/library/procure.svg" alt="Procure"></div> <div class="group relative h-24 w-40 shrink-0 flex items-center justify-center rounded-full bg-white border border-slate-200/60 shadow-sm hover:border-slate-300 transition-all overflow-hidden c2-logo-card"><div class="c2-logo-glow" style="background:linear-gradient(135deglinear-gradient(135deg,#0ea5e9,#1d4ed8)"></div><img src="https://svgl.app/library/blender.svg" alt="Blender"></div> <div class="group relative h-24 w-40 shrink-0 flex items-center justify-center rounded-full bg-white border border-slate-200/60 shadow-sm hover:border-slate-300 transition-all overflow-hidden c2-logo-card"><div class="c2-logo-glow" style="background:linear-gradient(135deglinear-gradient(135deg,#f43f5e,#ef4444)"></div><img src="https://svgl.app/library/spotify.svg" alt="Spotify"></div> <div class="group relative h-24 w-40 shrink-0 flex items-center justify-center rounded-full bg-white border border-slate-200/60 shadow-sm hover:border-slate-300 transition-all overflow-hidden c2-logo-card"><div class="c2-logo-glow" style="background:linear-gradient(135deg
Layout
LayoutLayeredWidthFull BleedGridMinimalFramingGlass
导航与入口主叙事区视觉场与背景层内容/数据表面行动路径
Spacing
6px5pxTitle block

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

5px6px8px10px12px13px14px18px20px22px
Buttons
Product
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.

Blur / backdrop filterBlur / backdrop filter / Reusable shadows / Gradient surfaces
Surface sampleGlass
SurfaceGlassBorder1px solid currentColor / low opacityShadow0 18px 50px rgba(15,23,42,.14)Blur0px
Shapes

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

32pxradius-148pxradius-2999pxradius-3
Card surfaceInput fieldStatus pill