graphify matrix green dark
本地来源：Knowledge/World/设计配色/graphify-matrix-green-dark.txt
# Style Pack: Graphify Matrix Green Dark
# 来源: clone-graphifylabs.ai
# 适用: 数据平台、开发者工具、AI 代理、技术仪表盘、代码产品
# 情绪: 精准、技术感、黑客、矩阵、代码美学
# 主题: 暗色 (Dark)
---
## 配色 Token (Colors)
---
--bg: #0c0d0f
--bg-raised: #15171c
--bg-elevated: #1c1f26
--bg-highest: #22262f
--fg: #eaf0f6
--fg-secondary: #9ca3af
--fg-muted: #6b7280
--border: rgba(255,255,255,0.08)
--border-strong: rgba(255,255,255,0.12)
--accent: #22c55e
--accent-hover: #16a34a
--accent-fg: #0c0d0f
--accent-soft: rgba(34,197,94,0.08)
--accent-strong: rgba(34,197,94,0.2)
--accent-glow: rgba(34,197,94,0.3)
--accent-bright: #4ade80
--accent-bright-glow: rgba(74,222,128,0.45)
--success: #22c55e
--warning: #fbbf24
--warning-fg: #0c0d0f
--danger: #ef4444
--info: #8b5cf6
--info-soft: rgba(139,92,246,0.12)
--pink-accent: #e0489b
--pink-soft: rgba(240,72,155,0.12)
---
## 字体 (Typography)
---
# Display / 超大标题
--font-display: "Bricolage Grotesque", "Space Grotesk", sans-serif
--font-size-display: clamp(2.5rem, 5vw, 4rem)
--font-weight-display: 700
--line-height-display: 0.94
--letter-spacing-display: -0.04em
# H1
--font-size-h1: clamp(2rem, 3.5vw, 3rem)
--font-weight-h1: 700
--line-height-h1: 0.98
--letter-spacing-h1: -0.035em
# H2
--font-size-h2: clamp(1.5rem, 2.5vw, 2rem)
--font-weight-h2: 650
--line-height-h2: 1.05
--letter-spacing-h2: -0.025em
# Body / 正文
--font-sans: "Inter", "Sora", "Space Grotesk", ui-sans-serif, system-ui, sans-serif
--font-size-body: 0.913rem
--font-weight-body: 400
--line-height-body: 1.6
--letter-spacing-body: -0.008em
# Label / 标签
--font-size-label: 0.688rem
--font-weight-label: 600
--line-height-label: 1
--letter-spacing-label: 0.08em
--text-transform-label: uppercase
# Small / 小字
--font-size-sm: 0.75rem
--font-weight-sm: 500
--line-height-sm: 1.4
# Mono / 代码 (核心特征 — 高频使用)
--font-mono: "JetBrains Mono", "Geist Mono", ui-monospace, monospace
--font-size-mono: 0.75rem
--font-weight-mono: 500
--line-height-mono: 1.4
--letter-spacing-mono: 0.01em
# Mono 大号 (代码块标题/数据标签)
--font-size-mono-lg: 0.813rem
--font-weight-mono-lg: 600
--line-height-mono-lg: 1.3
---
## 圆角 (Border Radius)
---
--radius-none: 0px
--radius-xs: 2px
--radius-sm: 3px
--radius-md: 6px
--radius-lg: 10px
--radius-xl: 14px
--radius-2xl: 18px
--radius-full: 999px
---
## 间距 (Spacing)
---
--space-0: 0px
--space-1: 4px
--space-2: 6px
--space-3: 8px
--space-4: 12px
--space-5: 16px
--space-6: 20px
--space-8: 28px
--space-10: 36px
--space-12: 48px
--space-16: 64px
--space-20: 80px
---
## 阴影 (Shadows) — 绿色辉光系统
---
# 绿色发光 — 核心特征
--glow-sm: 0 0 12px rgba(34,197,94,0.15)
--glow-md: 0 0 24px rgba(34,197,94,0.3)
--glow-lg: 0 0 40px rgba(34,197,94,0.45)
--glow-xl: 0 0 60px rgba(34,197,94,0.5), 0 4px 24px rgba(0,0,0,0.6)
# 绿色内发光卡片
--glow-inset: inset 0 0 0 1px rgba(34,197,94,0.12), 0 0 22px rgba(34,197,94,0.08)
# 绿色按钮辉光
--glow-btn: 0 0 18px rgba(34,197,94,0.35), 0 2px 8px rgba(0,0,0,0.5)
# 脉冲辉光动画
--glow-pulse-start: 0 0 0 0 rgba(74,222,128,0.5)
--glow-pulse-end: 0 0 0 0 rgba(74,222,128,0)
# 默认无传统 shadow
--shadow-none: none
---
## 布局 (Layout)
---
# 桌面端 (>1024px)
--max-width: 1280px
--content-padding-desktop: 40px
--nav-height: 56px
--section-gap-desktop: 72px
--grid-columns-desktop: 12
# 平板端 (768px-1024px)
--content-padding-tablet: 28px
--nav-height-tablet: 52px
--section-gap-tablet: 48px
--grid-columns-tablet: 6
# 移动端 (<768px)
--content-padding-mobile: 18px
--nav-height-mobile: 48px
--section-gap-mobile: 40px
--grid-columns-mobile: 4
---
## 组件规格 (Component Tokens)
---
# 主按钮 (Primary Button) — 绿色辉光按钮
--btn-primary-bg: var(--accent)
--btn-primary-fg: var(--accent-fg)
--btn-primary-hover-bg: var(--accent-hover)
--btn-primary-radius: var(--radius-md)
--btn-primary-padding-x: 20px
--btn-primary-padding-y: 10px
--btn-primary-font-size: 0.813rem
--btn-primary-font-weight: 600
--btn-primary-shadow: var(--glow-sm)
--btn-primary-hover-shadow: var(--glow-btn)
--btn-primary-font-family: var(--font-mono)
# 次按钮 (Secondary Button) — 暗面+边框
--btn-secondary-bg: var(--bg-raised)
--btn-secondary-fg: var(--fg-secondary)
--btn-secondary-border: var(--border-strong)
--btn-secondary-hover-bg: var(--bg-elevated)
--btn-secondary-hover-fg: var(--fg)
--btn-secondary-radius: var(--radius-md)
--btn-secondary-padding-x: 20px
--btn-secondary-padding-y: 10px
# 卡片 (Card) — 技术面板风格
--card-bg: rgba(255,255,255,0.025)
--card-fg: var(--fg)
--card-border: var(--border)
--card-radius: var(--radius-lg)
--card-padding: 20px
--card-shadow: none
--card-hover-border: rgba(34,197,94,0.15)
--card-hover-bg: rgba(255,255,255,0.035)
--card-hover-shadow: var(--glow-sm)
# 代码卡片 (Code Card) — 终端风格面板
--code-card-bg: var(--bg-raised)
--code-card-fg: var(--accent-bright)
--code-card-border: var(--border-strong)
--code-card-radius: var(--radius-md)
--code-card-padding: 16px
--code-card-font: var(--font-mono)
--code-card-gutter-fg: var(--fg-muted)
# 输入框 (Input)
--input-bg: var(--bg-deep)
--input-fg: var(--fg)
--input-placeholder: var(--fg-muted)
--input-border: var(--border-strong)
--input-radius: var(--radius-sm)
--input-padding-x: 12px
--input-padding-y: 10px
--input-focus-border: var(--accent)
--input-focus-ring: 0 0 0 2px rgba(34,197,94,0.2)
--input-height: 40px
# 徽章 (Badge) — 数据标签
--badge-bg: var(--accent-soft)
--badge-fg: var(--accent-bright)
--badge-radius: var(--radius-full)
--badge-padding-x: 10px
--badge-padding-y: 3px
--badge-font-size: 0.625rem
--badge-font-weight: 600
--badge-font-family: var(--font-mono)
--badge-text-transform: uppercase
--badge-letter-spacing: 0.06em
# 导航 (Navigation) — 紧凑技术导航
--nav-bg: rgba(12,13,15,0.9)
--nav-backdrop: blur(10px)
--nav-border: var(--border)
--nav-link-fg: var(--fg-muted)
--nav-link-hover-fg: var(--fg)
--nav-link-active-fg: var(--accent-bright)
--nav-font-size: 0.75rem
--nav-font-family: var(--font-mono)
# 分割线 (Divider)
--divider-color: var(--border)
--divider-width: 1px
# 数据表格 (Data Table)
--table-header-bg: var(--bg-raised)
--table-header-fg: var(--fg-muted)
--table-row-hover-bg: rgba(34,197,94,0.04)
--table-row-border: var(--border)
--table-cell-padding: 10px 14px
--table-font-size: 0.75rem
--table-font-family: var(--font-mono)
# 指标卡 (Metric Card)
--metric-value-font: var(--font-display)
--metric-value-size: 2rem
--metric-value-weight: 700
--metric-value-fg: var(--accent-bright)
--metric-label-font: var(--font-mono)
--metric-label-size: 0.625rem
# 状态指示灯 (Status Dot)
--status-online-bg: var(--accent)
--status-online-glow: var(--glow-sm)
--status-offline-bg: var(--fg-muted)
--status-warning-bg: var(--warning)
--status-dot-size: 8px
---
## 动效 (Motion)
---
--duration-instant: 80ms
--duration-fast: 150ms
--duration-normal: 220ms
--duration-slow: 400ms
--duration-reveal: 600ms
--duration-pulse: 2000ms
--easing-default: cubic-bezier(0.4, 0, 0.2, 1)
--easing-technical: cubic-bezier(0.2, 0, 0, 1)
# 脉冲动画 (Pulse) — 绿色辉光呼吸效果
@keyframes pulse-glow {
0%, 100% { box-shadow: var(--glow-pulse-start); }
50% { box-shadow: var(--glow-pulse-end); }
}
# 终端光标闪烁 (用于代码演示)
@keyframes blink-cursor {
0%, 50% { opacity: 1; }
51%, 100% { opacity: 0; }
}
---
## 设计铁律 (Design Locks)
---
1. 颜色锁定：唯一主强调色绿色 #22c55e，亮绿色 #4ade80 用于高亮，不使用其他颜色的 CTA
2. 形状锁定：小圆角 (3-6px) 为主，代码区 2-3px 小圆角，按钮 6px
3. 辉光系统：绿色辉光为核心特征，不使用常规 box-shadow
4. 主题锁定：纯暗色主题，背景 #0c0d0f
5. 字体锁定：Mono 字体高频使用（JetBrains Mono），正文 Inter，Display Bricolage Grotesque
6. 间距锁定：紧凑间距系统 (4, 6, 8, 12, 16, 20, 28, 36, 48, 64, 80)
---
## 布局家族 (Layout Families)
---
1. 控制台分割 (Console Split): 左侧代码/数据预览，右侧说明
2. 数据面板网格 (Data Panel Grid): 多个紧凑指标卡
3. 终端展示带 (Terminal Showcase): 代码块 + 绿色语法高亮
4. 架构图展示 (Architecture Display): 系统架构图谱
5. 集成方格 (Integration Grid): 工具/API 图标网格
6. 对比表格 (Comparison Table): 技术特性对比
7. 命令行互动区 (CLI Interactive): 仿终端交互演示
---
## PC端布局规范
---
- 最大内容宽度: 1280px
- 内容区内边距: 40px
- 导航高度: 56px (紧凑)
- 段落垂直间距: 72px 至 96px
- 12列网格系统
- Hero 标题用 Mono 或 Grotesque，副标题不超过 24 字
- 主要 CTA 必须在首屏可见
---
## 移动端布局规范 (<768px)
---
- 内容区内边距: 18px
- 导航高度: 48px (非常紧凑)
- 段落垂直间距: 40px 至 56px
- 4列网格系统
- 数据面板改为垂直堆叠
- 代码块可横向滚动
- 指标卡2列排列
---
## 平板端布局规范 (768px-1024px)
---
- 内容区内边距: 28px
- 导航高度: 52px
- 段落垂直间距: 48px 至 64px
- 6列网格系统
---
## 组件状态 (Component States)
---
- hover: 辉光增强 (glow-sm → glow-md)
- focus-visible: 2px 绿色光环
- active: 辉光消失，背景加深
- disabled: 30% 透明度，无交互
- loading: 绿色脉冲辉光呼吸动画
- empty: 虚线边框占位提示
- error: 红色边框 #ef4444
---
## 使用提示词模板 (Prompt Template)
---
使用 Graphify Matrix Green Dark 风格。
项目：
- 产品：[名称]
- 受众：[目标用户]
- 页面类型：[landing / dashboard / documentation]
- 转化目标：[目标 CTA]
要求：
- 深黑背景 (#0c0d0f)，绿色辉光系统 (#22c55e)
- Mono 字体高频使用 (JetBrains Mono)
- 技术密度高，代码块和终端风格展示
- 避免软阴影、避免大圆角、避免彩色图标
- 绿色脉冲辉光动画作为核心交互反馈
- 至少 4 种布局家族防止重复感
- 移动端响应式折叠
---
## 禁止清单 (Anti-Slop Ban List)
---
- 不要使用软阴影 (box-shadow blur)
- 不要使用大圆角 (>18px)
- 不要使用多彩色系统
- 不要使用渐变色背景
- 不要使用玻璃态 (glassmorphism)
- 不要使用装饰性伪终端内容
- 不要使用三个相同大小的功能卡片
- 不要使用霓虹色彩过度
- 不要使用纯黑色 #000000 作为画布 (用 #0c0d0f)
本文档为站内渲染。原始文件本地路径：saas/source/knowledge-world/Knowledge-World-设计配色-graphify-matrix-green-dark-3325d4.txt（仅本地保留，不入库不部署）