Built for the
night shift.
深色 dashboard + 发光数据 + sparkline + 多层卡片 · Linear / Vercel / Grafana 风范 · 让工程师在凌晨 3 点看 metric 不刺眼。
MRR
$28,492
+12.4% MoM
Active
1,247
+5.8% wk
Uptime
99.98%
+0.01% wk
Latency p99
142ms
−18ms
C Style DNA
Fit · 适用
- Linear / Vercel 风产品
- SaaS analytics dashboard
- Grafana 风监控
- Dev tools landing
- infra / API 产品
Unfit · 不适用
- 消费品 App landing
- 童趣 / Gen Z 品牌
- 编辑型长文
- 新中式 / 暖调品牌
Keywords
darkblue glowsparklinetnumLinearVercelJetBrains Mono
D Craft Details
Palette01 / 04
#0d1117 GitHub dark 基 + 4 数据色（blue/purple/green/orange）+ 高对比 text。**禁用纯黑 #000**·会刺眼。
#0D1117
#161B22
#21262D
#30363D
#58A6FF
#A371F7
#3FB950
#D29922
Typography02 / 04
Inter 做 UI / heading·JetBrains Mono 做数据 / label / metric（tnum 等宽数字 = dashboard 灵魂）·body 15px。
DISPLAY
Inter 700
BODY
Inter Regular · 15px
METRIC
JBM 700 · $28,492
Spacing03 / 04
密集 + 系统化·metric card gap 12px·section gap 88px·**高密度但呼吸感不丢**。
Visual Features04 / 04
- text-shadow 0 0 18px rgba(blue, 0.5)
- radial-gradient hero glow (blue + purple)
- sparkline 渐变 bar · 16-24px 高
- top hairline gradient on cards
- blinking status dot · pulse animation
- tnum 等宽数字 · font-feature-settings
- border-radius 12px 卡片 · 6px 内部
E How to talk to CC
std
按 dark-dashboard 风格做这个 analytics 页 / dev tools landing / 监控面板
var
走 dark-dashboard + 数据色换 purple 主色 / glow 加强 / sparkline 改 line chart
mix
主框 dark-dashboard + 局部 ppvi-elegant 的配置卡（亮色 inset）
CC receives this style ID ·
auto-loads
frontend-design + linear-vercel-aesthetic reference · 按 4 件 craft 实现·**绝不冒出**·纯黑 #000 / 暖色 / serif / 童趣圆角 / pastel 装饰 — 这些是 dark-dashboard 的 DON'T。
F Components
Glowing Metric
Monthly Revenue
$28,492
▲ +12.4% MoM
JBM 700 · text-shadow 0 0 24px blue
Sparkline Chart
Daily Active · 7d
1,247 ▲ +8.4%
渐变 bar + glow + tnum
Multi-Layer Card
Top metric$847K+12.4%
Layer 2$520K
Layer 3$280K
3 层叠加 · scale 0.95 / 0.9 + opacity
BUTTON
CARD
Revenue · MTD
$847K
▲ +12.4%
HERO TYPE
Ship faster.
Sleep better.
Sleep better.
v2.4 · online
G Related Skills
I Similar styles · 看完也许你还想看
CPU.LOAD: 78%
MEM: 12.4G / 64G
NET: ↑42 ↓180 Mb
> SCAN 0xff32...
工业 brutalist
industrial-brutalist
同为dark + tool + 高密度·区别·terminal mono + 警告黄 + 工程 CLI 风 vs Linear/Vercel + 蓝紫 glow + 现代 dashboard
MRR$28,492+12.4%
PPVI 克制优雅
ppvi-elegant
同为refined + 数据 / dashboard 场景·区别·亮色玻璃 + OKLCH 灰阶 vs 深色 GitHub + 蓝紫 glow + sparkline
TYPE / 01
26°
瑞士国际主义
swiss-international
同为系统化 + 大数字 + 严谨·区别·黑白几何 + 红 accent + 文档导向 vs 深色 + 蓝 glow + 数据驱动