Leapbound AI UI Library — 品牌设计系统

UI Design System

Design Tokens

品牌配色系统

Leapbound AI 品牌使用 8 个核心色，通过透明度梯度派生浅色/深色两套语义 Token，覆盖背景、表面、边框、文字和阴影的全部场景。

Core Palette（8 核心色）

Void Indigo

#0A0F24

深色基底 / 正文色

Void Indigo-2

#101A3D

深色辅底

Void Indigo-3

#162453

深色三级

Leap Electric

#5B5CFF

能量主色 / 关键高亮

Signal Cyan

#5FD6FF

信号色 / 发光描边

Volt Lime

#D7FF3F

CTA 激活色

Mist Lavender

#C8C3FF

柔和渐变过渡

Soft Fog

#EEF2FF

浅色背景 / 对比

Light Theme vs Dark Theme — 语义 Token 对比

Light Theme Tokens

bg: #F7F9FF

card-strong: #FFFFFF

card: rgba(255,255,255,.72)

line: rgba(10,15,36,.10)

text: #0A0F24 (Void Indigo)

text-muted: #5F6884

text-soft: #8A91A8

阴影轻量，渐变描边柔和，网格底纹浅淡

Dark Theme Tokens

bg: #070C1D

surface-strong: rgba(12,18,42,.96)

surface: rgba(15,22,48,.92)

line: rgba(200,195,255,.12)

text: #F5F7FF

text-muted: rgba(245,247,255,.72)

text-soft: rgba(245,247,255,.50)

微光描边，发光信号点，渐变曲线，网格底纹

Asset Library

Icon 库

24 个品牌专属 SVG 图标，覆盖品牌诊断、市场策略、受众分析、渠道、自动化、分析等全部功能场景。统一视觉语言，适配浅色/深色双主题。

Brand Audit

Target Market

Competitor Analysis

Core Audience

Channel Strategy

Strategy Session

Emotion Compass

Localization Insight

Decision Risk

Trust Building

Messaging Style

Communication Pitfalls

AI Upgrade

Workflow Audit

Automation Funnel

Data Insights

Weekly Optimization

Expert Review

GTM Sprint

Content Framework

Landing Page

Growth Roadmap

ROI Estimate

Global Expansion

Typography

字体规范

以 Inter 为主体的现代无衬线字体栈，Georgia 为衬线装饰字体（积分符号专用），等宽字体用于代码 / 颜色值展示。

H1 / Displayinter; clamp(44px, 6vw, 76px); lh:0.98; ls:-.055em; w:800

Growth is a Formula.

H2 / Sectioninter; 34px; lh:1.16; ls:-.035em; w:750

A premium system that feels like a quant lab

H3 / Moduleinter; 22-24px; lh:1.3; ls:-.02em; w:700

Scientific Luxury — Dark surfaces, precise glow control

Bodyinter; 16px; lh:1.75; color:text-muted

Leapbound AI 沿用"从噪声到秩序"的叙事方式，以 Cyan 代表信号路径，Electric 代表系统能量，Lime 负责 CTA 和关键高亮。正文使用 Void Indigo（浅色版）或 F5F7FF（深色版），保证可读性优先。

Eyebrow / Labelinter; 11-12px; ls:.20em; uppercase; w:800

SCIENTIFIC LUXURY / GROWTH INTELLIGENCE

Code / MonoSF Mono, Monaco; 13-14px

--lb-leap-electric: #5B5CFF; --lb-radius-xl: 34px;

Serif (Integral Symbol)Georgia, serif; 80px+

∫ Leapbound AI

Visual Identity

VI 规范

品牌标识、积分符号、渐变系统、网格语言、圆角体系 — 构成 Leapbound AI "量化实验室 + 增长引擎"的视觉身份。

品牌标识 — 积分符号 ∫

∫

积分符号 ∫ 是 Leapbound AI 的核心视觉锚点，代表"信号累积 / 从噪声到秩序 / 连续增长"的品牌哲学。使用 Georgia 衬线体呈现，配合冷色渐变增强科技精密感。

渐变系统

浅色版：Lavender → Cyan → Lime（柔和过渡，适配白底）

深色版：Cyan → Lime（对比更强，适配暗底发光体系）

网格底纹语言

58px 间距细线网格作为固定背景层（body::before），配合渐变 mask 在上方淡出，营造"量化分析实验室"质感。深色版使用 Cyan 微光网格，浅色版使用 Void Indigo 极淡网格。

圆角系统

xl 34

lg 24

md 18

sm 14

四级圆角系统：xl 用于主面板，lg 用于卡片，md 用于内部区块，sm 用于小元素。全部基于 CSS 变量 --radius-*。

发光信号体系 (深色专属)

深色版在 Signal Chart 上使用三个发光信号点（Lime / Cyan / Lavender），代表信号采集中不同阶段的关键节点。

增长曲线语言

用 SVG 曲线（Cyan 主曲线 + Lime 辅线）表达"信号累积 → 增长跃迁"的叙事，曲线呈上升趋势且带平滑贝塞尔控制点。

按钮组件 Buttons

Primary / Secondary / Ghost — 三种语义级别，带 hover 上浮动效

Dark Background Variant

<button class="lb-btn lb-btn-primary">Primary CTA</button>  <button class="lb-btn lb-btn-secondary">Secondary</button>  <button class="lb-btn lb-btn-ghost">Ghost Button</button>  .btn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 23px; border-radius: 999px; font-weight: 760; border: 1px solid transparent; transition: transform .18s ease, box-shadow .18s ease; } .btn:hover { transform: translateY(-2px); }

导航组件 Navigation

Pill Nav — 适用于顶部导航栏

Top Nav Bar — 品牌标识 + 导航链接 + CTA 按钮（完整导航栏）

DARK GROWTH OS

<nav class="lb-nav-pills"> <a class="lb-nav-pill lb-active" href="#">Home</a> <a class="lb-nav-pill" href="#">System</a> </nav>  <div class="nav"> <div class="brand">...</div> <div class="nav-links">...</div> <a class="lb-btn lb-btn-primary">Book a Demo</a> </div>

卡片组件 Cards & Panels

Info Card — 用于内容区块

Scientific Luxury

Dark surfaces, precise glow control. 强化原始 VI 的夜色高级感，通过微光描边、网格底纹与渐变曲线提升精密感。

Integral Storytelling

以 Cyan 代表信号路径，Electric 代表系统能量，Lime 负责 CTA 和关键高亮。

Panel — 主面板容器（带渐变光泽 + 微光装饰）

SCIENTIFIC LUXURY

A premium system that feels like a quant lab

Panel 组件自带：半透明渐变背景、细线边框、微光伪元素装饰、backdrop-filter 模糊。浅色版用 White → Soft Fog 渐变，深色版用 Void Indigo 多层渐变。

<div class="lb-panel"> <div class="eyebrow">EYEBROW TEXT</div> <h3>Panel Title</h3> <p>Panel content...</p> </div>  <div class="lb-info-card"> <h5>Title</h5> <p>Description text...</p> </div>

指标卡 Metrics

4 列指标网格 — 用于数据看板 / Hero 下方

Metric

12,480 Micro-wins captured

Metric

3.2M Growth signals integrated

Metric

148 Compounding experiments

Metric

+37% Average leap velocity

<div class="metrics"> <div class="metric"> <div class="label">Metric</div> <b>12,480</b> <span>Micro-wins captured</span> </div> ... </div> .metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

边栏导航 Sidebar

源自 Workbench 模板 — 带分组 + 计数 pill

<aside class="sidebar"> <div class="sidebar-group"> <div class="sidebar-title">Workspace</div> <nav class="nav-list"> <a class="nav-item lb-active">...</a> <a class="nav-item">...</a> </nav> </div> </aside> .sidebar { width: 280px; border-right: 1px solid var(--line); background: rgba(6,10,24,.76); backdrop-filter: blur(18px); position: sticky; top: 0; height: 100vh; }

表格组件 Table

Brand Audit Matrix — 带状态标签的数据表

Category	Current State	Gap	Status
Brand Positioning	Strong technical promise	Needs clearer premium framing	Review
Localized Messaging	Translated but not native	Requires CA-native phrasing	Live
CTA Strategy	Direct sales oriented	Shift to diagnostic intake	Ready
Content Conversion	Feature-heavy narrative	Need proof + business outcome	Live

<table> <thead> <tr><th>Category</th><th>Current State</th>...</tr> </thead> <tbody> <tr>...<td><span class="status lb-review">Review</span></td></tr> </tbody> </table> th { color: var(--text-soft); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; font-size: 11px; }

状态标签 & 进度条

Status Tags — Live / Ready / Review 三种语义状态

Live Ready Review

Progress Bar — 三色渐变进度条（Electric → Cyan → Lime）

Homepage Messaging RefreshReframe hero copy from service list to growth formula narrative.

76%

Sales Deck LocalizationAdapt sales narrative for investor-grade audience.

91%

<span class="status lb-live">Live</span> <span class="status lb-ready">Ready</span> <span class="status lb-review">Review</span> .status.live { background: rgba(95,214,255,.12); color: var(--lb-signal-cyan); } .status.ready { background: rgba(215,255,63,.10); color: var(--lb-volt-lime); } .status.review { background: rgba(200,195,255,.12); color: var(--lb-mist-lavender); }  <div class="progress"> <i style="width:76%"></i> </div> .progress > i { background: linear-gradient(90deg, var(--lb-leap-electric), var(--lb-signal-cyan), var(--lb-volt-lime)); }

网格系统 Grid System

12 列标准网格 — 页宽 max 1180px，间距 58px 为网格底纹单位

1

2

3

4

5

6

7

8

9

10

11

12

1.12fr — Hero 主区域

0.88fr — Chart 侧区域

0.98fr — Visual System

1.02fr — Info Cards

/* 常用 Grid 布局 */ .hero-grid { grid-template-columns: minmax(0, 1.12fr) minmax(320px, .88fr); } .section-grid { grid-template-columns: .98fr 1.02fr; } .metrics { grid-template-columns: repeat(4, 1fr); } /* 响应式断点 */ @media (max-width: 900px) { .hero-grid, .section-grid { 1fr } } @media (max-width: 560px) { .metrics { 1fr } }

完整代码片段 — 可复用模板

以下为可直接复制使用的完整 CSS 变量定义，涵盖浅色/深色双主题 + Workbench 工作台。

CSS Variables — 浅色主题完整 Token 集

:root { /* Core Palette */ --lb-void-indigo: #0A0F24; --lb-void-indigo-2: #101A3D; --lb-leap-electric: #5B5CFF; --lb-signal-cyan: #5FD6FF; --lb-volt-lime: #D7FF3F; --lb-mist-lavender: #C8C3FF; --lb-soft-fog: #EEF2FF; /* Light Theme Tokens */ --bg: #F7F9FF; --card: rgba(255,255,255,.72); --card-strong: #FFFFFF; --line: rgba(10,15,36,.10); --line-strong: rgba(91,92,255,.22); --text: #0A0F24; --text-muted: #5F6884; --text-soft: #8A91A8; --shadow: 0 24px 80px rgba(20,32,74,.12); --shadow-soft: 0 12px 40px rgba(91,92,255,.12); /* Radius System */ --lb-radius-xl: 34px; --lb-radius-lg: 24px; --lb-radius-md: 18px; --lb-radius-sm: 14px; /* Layout */ --max: 1180px; --lb-font-sans: Inter, system-ui, -apple-system, sans-serif; --lb-font-serif: Georgia, serif; }

CSS Variables — 深色主题完整 Token 集

:root { /* Core Palette — 同上 */ /* Dark Theme Tokens */ --bg: #070C1D; --surface: rgba(15,22,48,.92); --surface-soft: rgba(18,28,64,.78); --surface-muted: rgba(255,255,255,.03); --line: rgba(200,195,255,.12); --line-strong: rgba(95,214,255,.24); --text: #F5F7FF; --text-muted: rgba(245,247,255,.72); --text-soft: rgba(245,247,255,.50); --shadow: 0 28px 84px rgba(0,0,0,.36); --shadow-soft: 0 18px 48px rgba(0,0,0,.24); /* Body 背景 — 多层径向渐变 + 网格底纹 */ background: radial-gradient(circle at 15% 10%, rgba(91,92,255,.22), transparent 26%), radial-gradient(circle at 84% 12%, rgba(95,214,255,.18), transparent 30%), linear-gradient(180deg, #040814 0%, #071127 32%, #060C1C 100%); } body::before { background-image: linear-gradient(rgba(95,214,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(95,214,255,.06) 1px, transparent 1px); background-size: 58px 58px; mask-image: linear-gradient(to bottom, rgba(0,0,0,.92), transparent 82%); }

CSS Variables — 工作台 Workbench 专属 Token

:root { /* 工作台使用深色基底 + 更紧凑的圆角 */ --lb-radius-xl: 28px; --lb-radius-lg: 22px; --lb-radius-md: 18px; --lb-radius-sm: 14px; /* 边栏 + 主区域布局 */ .app { display: grid; grid-template-columns: 280px 1fr; min-height: 100vh; } .sidebar { position: sticky; top: 0; height: 100vh; background: rgba(6,10,24,.76); backdrop-filter: blur(18px); border-right: 1px solid var(--line); } .workspace { padding: 24px; } }

Brand Identity

Logo 使用规范

Leapbound AI 品牌标识的应用标准。标准组合标识由图形符号 + "Leapbound AI" 文字构成，优先使用完整版本。

标准组合标识

标准组合标识 = 图形符号 + "Leapbound AI" 文字，优先使用此版本。

安全间距（Clear Space）

安全间距 = 50% 图形高度

50% 图形高度

Logo 周围至少保持图形符号高度 50% 的空白区域，不得放置任何文字、图形或边缘元素。

最小尺寸

数字端最小宽度：120px

印刷端最小宽度：80px

确保 "Leapbound AI" 文字始终清晰可读，不低于上述最小尺寸。

禁用示例

拉伸变形 — 不得改变宽高比

更改颜色 — 不得替换标准渐变色

添加描边或阴影 — 不得添加额外效果

放置在复杂背景上 — 优先使用深色纯色背景

背景适配

Logo 专为深色背景（#0A0F24 系列）优化，浅色主题自动切换为浅色 Logo 变体。