North star · Keep the interface calm and operational: reserve luminous green for decisive actions and status, and let typography and rules do the organizing.
The page uses an almost-black green canvas as its defining visual field, with a subtle forest tint that keeps the dark interface from feeling neutral or generic. Soft off-white carries headlines and important content; sage-gray is reserved for navigation, captions, dates, and supporting copy. Bright green appears sparingly in the primary actions, live status, and the large circular brand illustration, with a two-tone gradient adding energy without changing the otherwise quiet palette. Space Grotesk gives large headings a confident, compact shape, while Inter Tight handles readable body copy and controls. JetBrains Mono, uppercase and tracked, turns labels and operational metadata into a consistent technical annotation layer. A centered, narrow-feeling content column organizes a left-aligned hero, tabular network data, and repeated horizontal content bands. Fine green-black borders separate regions instead of shadows or rounded cards, maintaining a precise infrastructure-dashboard character.
配色
点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
品牌色
强调色
表层色
中性色
功能色
页面底色 · Forest Black表层 · Night Moss主文字 · Soft Chalk次要文字 · Sage Ash描边 · Pine Line强调 · Electric Leaf强调 2 · Signal Green
Navigation, labels, metadata, timestamps, and technical annotations.
Aa 设计
Space Grotesk Variable
网络字体 · 字重 600 / 500 · 占比 11%
免费替代：Space Grotesk
Hero and section headings, plus prominent network links.
角色
示例
字号
字重
行高
字距
一级标题
Three-line hero statement, large and compact.
moonli
54px
600
1.04
-0.02em
二级标题
Section headings introducing network and content bands.
moonli
32px
600
1.55
-0.02em
三级标题
Secondary feature or explanatory headings.
moonli
28px
600
1.55
-0.02em
四级标题
Compact subheadings and prominent short labels.
The quick brown fox 敏捷的狐狸
26px
500
1.05
-0.03em
正文
Descriptions, explanatory paragraphs, and network details.
The quick brown fox 敏捷的狐狸
17px
400
1.55
0
辅助文字
Small uppercase operational metadata and eyebrow labels.
The quick brown fox 敏捷的狐狸
11px
400
1.55
0.14em
按钮
Primary and secondary action text.
The quick brown fox 敏捷的狐狸
14px
600
1
0
导航
Uppercase section navigation and compact header links.
The quick brown fox 敏捷的狐狸
11px
400
1.55
0.14em
链接
Uppercase utility links and supporting details.
The quick brown fox 敏捷的狐狸
11px
400
1.55
0.14em
眉题
Small technical labels introducing sections.
The quick brown fox 敏捷的狐狸
11px
400
1.55
0.14em
代码
Technical annotations and code-like metadata.
const style = 1;
11px
400
1.55
0.14em
间距与布局
基准单位 4px · 密度：适中
64px版块间距
20px元素间距
10px卡片内边距
—内容最大宽度
2px
4px
6px
8px
10px
11px
12px
13px
16px
20px
24px
28px
40px
64px
Use a centered content column with generous dark margins and predominantly left-aligned content. The hero pairs a compact text-and-metrics block with a large brand graphic on the right at wider viewports. Below it, use thin horizontal rules to define navigation and section transitions. Keep network information in a dense, aligned table, then alternate concise heading-and-copy bands. Section spacing is measured at 64px; element rhythm favors 20px gaps, with comfortable rather than airy density. The measured maximum width is unspecified, so avoid imposing an invented fixed value.
圆角与层次
按钮 · 9px
图片 · 50%
导航 · 50%
sm · nav, other
The interface is nearly flat: rely on the canvas and subtly different table surface rather than card shadows. Fine green-black borders define table edges, navigation bands, and section separators. Reserve the measured soft green glow for the live indicator or similarly small status detail; keep primary buttons vivid through their gradient, not added depth.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Primary action
Use a rounded green gradient button with dark text, semibold Inter Tight, and a concise action label; examples include choosing a network or opening a staking portal.
Utility navigation
Small uppercase, tracked JetBrains Mono labels sit in a horizontal row, with muted sage text and thin rules separating navigation from content.
Hero metrics
Present operating history, slashing events, and network count as compact values with uppercase monospaced labels and subdued supporting details.
Network table
Place network names, commission, minimum, and unbonding information in aligned columns on a subtly raised surface, bounded by fine borders.
Network row action
Pair each eligible network with a green portal button; keep network identity and staking requirements legible before the action.
Content band
Use a thin horizontal divider and a two-column heading-and-copy composition for operator rationale, infrastructure, giving, and contact information.
Live status
Show a small luminous green indicator beside compact uppercase monospaced status text in the header.
Imagery · The page is typography-led rather than photography-led. Its main visual is a bright green circular brand mark with dark diagonal cutouts, shown prominently beside the hero copy in the full-page view. Treat this graphic as a crisp, high-contrast identity illustration, not as a photographic background. Small network logos appear inline in the listings; keep them subordinate to names and staking data.
该做与不该做
✓ 该做
Use Forest Black as the dominant page canvas.
Reserve the green gradient for high-priority actions.
Set technical labels in tracked uppercase monospace.
Use Soft Chalk for primary information and Sage Ash for supporting detail.
Organize sections with fine Pine Line dividers.
Keep the network data aligned and easy to scan.
✕ 不该做
Do not introduce bright colors beyond the measured green accents.
Do not put shadows on every panel or table row.
Do not turn operational details into decorative badges.
Do not use large rounded cards where flat ruled sections fit.
Do not make supporting copy as bright as the main headings.
Do not invent a fixed content width or unmeasured spacing values.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new page in moonli’s restrained staking-operator style. Use Forest Black (#0b0f0c) for the main canvas, Soft Chalk (#ecf2ec) for primary copy, and Sage Ash (#8a9a8e) for secondary labels. Keep Night Moss (#121814) limited to subtle data surfaces, with Pine Line (#232e26) for quiet dividers. Use Electric Leaf (#58e02e) and Signal Green (#00c028) together only for key actions or small live details; set action text in Deep Spruce (#04170a). Use Space Grotesk for headings, Inter Tight for body and controls, and tracked uppercase JetBrains Mono for navigation and metadata. Favor a centered, left-aligned content column, compact operational data, and flat ruled sections over elevated cards. Keep any brand illustration crisp and subordinate to the information hierarchy.
