---
title: "moonli design system"
variant: extended
source: https://moonli.me/
captured_at: 2026-10-12
theme: dark
industry: crypto
generator: Design DNA (https://four.wiralomi.com/style/moonli-me)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# moonli · Design System

> Quietly technical, independently operated.

**Theme:** dark · **Industry:** crypto · **Source:** https://moonli.me/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

A restrained dark homepage presents moonli as an independent staking operator through concise operational proof, network listings, and transparent delegation details. Acid-green gradients highlight key actions and the brand mark, while muted metadata and thin rules keep the page utilitarian.

## North star

Keep the interface calm and operational: reserve luminous green for decisive actions and status, and let typography and rules do the organizing.

## Overview

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.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Forest Black | `#0b0f0c` | `--color-forest-black` | brand | Dominant page canvas; gives the entire site its deep green-black atmosphere. |
| Soft Chalk | `#ecf2ec` | `--color-soft-chalk` | neutral | Primary text for headlines, network names, navigation emphasis, and important links. |
| Sage Ash | `#8a9a8e` | `--color-sage-ash` | neutral | Muted descriptions, uppercase metadata, secondary navigation, and footer text. |
| Electric Leaf | `#58e02e` | `--color-electric-leaf` | accent | Bright end of the green action gradient; also appears in live indicators and brand artwork. |
| Signal Green | `#00c028` | `--color-signal-green` | accent | Deep end of the primary button gradient, paired with Electric Leaf. |
| Pine Line | `#232e26` | `--color-pine-line` | semantic | Fine outlines and dividers for navigation, network tables, and content boundaries. |
| Night Moss | `#121814` | `--color-night-moss` | surface | Subtle raised background for the network table against the darker page canvas. |
| Deep Spruce | `#04170a` | `--color-deep-spruce` | semantic | Dark foreground text on luminous green calls to action. |
| Moss Edge | `#283727` | `--color-moss-edge` | semantic | Occasional secondary outline detail; less prominent than the main divider color. |

### Semantic aliases

`--color-canvas` → `#0b0f0c` (Forest Black) · `--color-surface` → `#121814` (Night Moss) · `--color-text` → `#ecf2ec` (Soft Chalk) · `--color-text-muted` → `#8a9a8e` (Sage Ash) · `--color-border` → `#232e26` (Pine Line) · `--color-accent` → `#58e02e` (Electric Leaf) · `--color-accent-2` → `#00c028` (Signal Green)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ecf2ec` | `#0b0f0c` | 16.99:1 | AAA |
| `#ecf2ec` | `#121814` | 15.84:1 | AAA |
| `#8a9a8e` | `#0b0f0c` | 6.52:1 | AA |
| `#8a9a8e` | `#121814` | 6.08:1 | AA |
| `#58e02e` | `#0b0f0c` | 11.14:1 | AAA |
| `#58e02e` | `#121814` | 10.39:1 | AAA |

### Gradients

- `linear-gradient(135deg, rgb(0, 192, 40), rgb(88, 224, 46))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter Tight Variable | `--font-body` | webfont | 400, 600, 500, 700 | Body copy, buttons, and general interface text. | Inter |
| JetBrains Mono Variable | `--font-mono` | webfont | 400, 500 | Navigation, labels, metadata, timestamps, and technical annotations. | JetBrains Mono |
| Space Grotesk Variable | `--font-display` | webfont | 600, 500 | Hero and section headings, plus prominent network links. | Space Grotesk |

- **Inter Tight Variable:** Use regular body text and semibold controls; keep sentence case and compact, clean forms.
- **JetBrains Mono Variable:** Small uppercase text with generous tracking; use regular weight for quiet informational detail.
- **Space Grotesk Variable:** Semibold display headings use tight tracking and compact line spacing; avoid decorative treatments.

### Type scale — Perfect Fourth (ratio ≈ 1.335, base 17px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 54px | 600 | 1.04 | -0.02em | — | Space Grotesk Variable | Three-line hero statement, large and compact. |
| h2 | 32px | 600 | 1.55 | -0.02em | — | Space Grotesk Variable | Section headings introducing network and content bands. |
| h3 | 28px | 600 | 1.55 | -0.02em | — | Space Grotesk Variable | Secondary feature or explanatory headings. |
| h4 | 26px | 500 | 1.05 | -0.03em | — | Space Grotesk Variable | Compact subheadings and prominent short labels. |
| body | 17px | 400 | 1.55 | 0 | — | Inter Tight Variable | Descriptions, explanatory paragraphs, and network details. |
| caption | 11px | 400 | 1.55 | 0.14em | uppercase | JetBrains Mono Variable | Small uppercase operational metadata and eyebrow labels. |
| button | 14px | 600 | 1 | 0 | — | Inter Tight Variable | Primary and secondary action text. |
| nav | 11px | 400 | 1.55 | 0.14em | uppercase | JetBrains Mono Variable | Uppercase section navigation and compact header links. |
| link | 11px | 400 | 1.55 | 0.14em | uppercase | JetBrains Mono Variable | Uppercase utility links and supporting details. |
| eyebrow | 11px | 400 | 1.55 | 0.14em | uppercase | JetBrains Mono Variable | Small technical labels introducing sections. |
| code | 11px | 400 | 1.55 | 0.14em | uppercase | JetBrains Mono Variable | Technical annotations and code-like metadata. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 2, 4, 6, 8, 10, 11, 12, 13, 16, 20, 24, 28, 40, 64 px.
- Section rhythm 64px · element gap 20px · card padding 10px · max content width —.

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.

## Shape & elevation

- Radius: button `9px` · media `50%` · nav `50%` · xs `9px`
- Shadow `sm` (nav, other): `rgb(88, 224, 46) 0px 0px 8px 0px`

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.

## 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.

## Components

### 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.

### Measured component styles

- **Primary button** (“Stake on the Aztec portal”): transparent background · text #04170a · border 1px solid · radius 9px · padding 11px 16px · 600 14px Inter Tight Variable
- **Link** (“Aztec Network”): transparent background · text #ecf2ec · radius 0px · padding 0px · 600 18px Space Grotesk Variable
- **Card** (“WHY AN INDEPENDENT OPERATOR A diverse se”): transparent background · text #ecf2ec · border 1px solid #232e26 · radius 0px · padding 40px 0px 0px 0px · 400 17px Inter Tight Variable
- **Navigation item** (“NETWORKS”): transparent background · text #8a9a8e · radius 0px · padding 0px · 400 11px JetBrains Mono Variable · uppercase

## Do

- 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.

## Don't

- 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.

## Agent prompt

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.

## Source CSS custom properties (selected)

```css
--font-d: "Space Grotesk Variable", system-ui, sans-serif;
--font-b: "Inter Tight Variable", system-ui, sans-serif;
--font-m: "JetBrains Mono Variable", ui-monospace, monospace;
--text: #ecf2ec;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 20px;
--space-5: 28px;
--space-6: 40px;
--space-7: 64px;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/moonli-me