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

# Glassnode · Design System

> Market intelligence, framed with clarity.

**Theme:** light · **Industry:** crypto · **Source:** https://glassnode.com/ · **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._

Glassnode pairs restrained typography and pale neutral backgrounds with dark, information-dense sections to present digital-asset intelligence. Product dashboards and research previews provide the visual detail, while muted blue accents guide attention without overpowering the data.

## North star

Use a quiet, spacious editorial frame around precise market-data interfaces, reserving dark bands and blue accents for clear hierarchy.

## Overview

The homepage alternates pale gray and white sections with near-black bands, giving the long page a clear rhythm and separating platform, research, and company information. The hero uses a two-column composition: a bold, left-aligned headline and compact supporting copy sit opposite a floating market-chart interface. Inter handles navigation, body copy, labels, and interface text; the heavier Fraktion display face gives major headlines a distinctive editorial presence. Keep the measured hierarchy and comfortable spacing, with centered headings where sections introduce a system or company story. Use the blue-violet accent sparingly for links and highlighted data, and reserve the pale lavender band for the Vector feature. Thin gray borders define cards and controls; the interface remains mostly flat rather than heavily shadowed. Charts and product captures supply the detail, while simple card grids organize research and platform offerings.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Market Mist | `#edeff2` | `--color-market-mist` | surface | Primary pale-gray canvas for the hero and company-standard section. |
| Clean Paper | `#ffffff` | `--color-clean-paper` | surface | White canvas for the platform showcase and integrated-solutions cards. |
| Soft Periwinkle | `#8fa5f6` | `--color-soft-periwinkle` | accent | Muted blue-violet link and interface accent, including contact links. |
| Slate Copy | `#5a5a5a` | `--color-slate-copy` | neutral | Main muted body-copy tone on light backgrounds. |
| Divider Gray | `#dedfe1` | `--color-divider-gray` | neutral | Fine card, control, and footer borders; also appears on disabled controls. |
| Graphite Night | `#1a1a1a` | `--color-graphite-night` | brand | Dark feature and research bands, footer, and primary Launch Studio buttons. |
| Signal Indigo | `#4559dc` | `--color-signal-indigo` | accent | Blue-violet emphasis in links and the measured blue-to-periwinkle gradient. |
| Chart Blue | `#6888fb` | `--color-chart-blue` | accent | Brighter end of the measured blue gradient and data-interface accents. |
| Charcoal Ink | `#333333` | `--color-charcoal-ink` | neutral | Primary heading and text color on light sections. |
| Midtone Gray | `#666666` | `--color-midtone-gray` | neutral | Secondary muted copy and supporting labels. |
| Vector Lavender | `#e2e7fc` | `--color-vector-lavender` | surface | Distinct pale-lavender background for the Bitcoin Vector feature section. |
| Quiet Gray | `#6f6f6f` | `--color-quiet-gray` | neutral | Tertiary text and link tone, including subdued interface copy. |
| Signal Coral | `#ef5d4a` | `--color-signal-coral` | semantic | Small red-orange accent within measured heading and link text; use sparingly. |
| Cloud Tint | `#f7f8fa` | `--color-cloud-tint` | surface | Subtle tinted surfaces, including research-link cards and text areas. |
| Silver Caption | `#a0a0a0` | `--color-silver-caption` | neutral | Tertiary copy and footer links, especially on dark backgrounds. |

### Semantic aliases

`--color-canvas` → `#edeff2` (Market Mist) · `--color-surface` → `#ffffff` (Clean Paper) · `--color-surface-2` → `#1a1a1a` (Graphite Night) · `--color-surface-3` → `#e2e7fc` (Vector Lavender) · `--color-surface-4` → `#f7f8fa` (Cloud Tint) · `--color-text` → `#333333` (Charcoal Ink) · `--color-text-muted` → `#5a5a5a` (Slate Copy) · `--color-text-subtle` → `#666666` (Midtone Gray) · `--color-border` → `#dedfe1` (Divider Gray) · `--color-accent` → `#8fa5f6` (Soft Periwinkle) · `--color-accent-2` → `#4559dc` (Signal Indigo) · `--color-accent-3` → `#6888fb` (Chart Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#333333` | `#edeff2` | 10.97:1 | AAA |
| `#333333` | `#ffffff` | 12.63:1 | AAA |
| `#333333` | `#1a1a1a` | 1.38:1 | fail |
| `#333333` | `#e2e7fc` | 10.27:1 | AAA |
| `#5a5a5a` | `#edeff2` | 5.99:1 | AA |
| `#5a5a5a` | `#ffffff` | 6.9:1 | AA |
| `#5a5a5a` | `#1a1a1a` | 2.52:1 | fail |
| `#5a5a5a` | `#e2e7fc` | 5.61:1 | AA |
| `#666666` | `#edeff2` | 4.98:1 | AA |
| `#666666` | `#ffffff` | 5.74:1 | AA |

### Gradients

- `linear-gradient(90deg, rgb(69, 89, 220), rgb(104, 136, 251))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 700, 600 | Navigation, body copy, labels, controls, and secondary headings. | Inter |
| fraktion | `--font-display` | webfont | 700 | Display headlines and the primary hero heading. | Space Grotesk |

- **Inter:** Use mostly regular weights with 600 for emphasized links and 700 for secondary headings; sentence case and neutral tracking.
- **fraktion:** Bold display treatment with compact, strong forms; reserve for major headline levels and use natural casing.

### Type scale — Perfect Fourth (ratio ≈ 1.339, base 13px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 56px | 700 | 1.2 | 0 | — | fraktion | Large display headlines introducing major homepage stories. |
| h1 | 51px | 700 | 1.2 | 0 | — | fraktion | Primary hero headline and top-level page message. |
| h2 | 38.5px | 700 | 1.2 | 0 | — | fraktion | Section titles, including platform and research introductions. |
| h3 | 32px | 700 | 1.4 | 0 | — | Inter | Feature and product-category headings. |
| h4 | 24px | 700 | 1.4 | 0 | — | Inter | Card titles and supporting content headings. |
| body | 13px | 400 | 1.5 | 0 | — | Inter | Paragraph copy describing products, data, and research. |
| caption | 12px | 400 | 1.5 | 0 | — | Inter | Compact metadata, footnotes, and chart annotations. |
| button | 14px | 400 | 1.3 | 0 | — | Inter | Launch Studio and subscription form button labels. |
| nav | 14px | 400 | 1.5 | 0 | — | Inter | Header navigation and footer link groups. |
| link | 15px | 600 | 1.5 | 0 | — | Inter | Contact links, research actions, and inline calls to action. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 4, 8, 10, 12, 16, 19, 20, 24, 32, 40, 48, 56, 64, 72, 80 px.
- Section rhythm 72px · element gap 16px · card padding — · max content width 1208px.

The page uses a centered content area with a measured maximum width of 1208px and a comfortable density. The hero is a two-column split, while later sections shift between centered introductions, multi-column feature cards, and product-focused layouts. Eight substantial sections alternate light, dark, white, and lavender backgrounds; this color rhythm does much of the structural work. Keep section spacing generous and internal layouts aligned to a consistent grid. Dark research and data-layer sections balance text with card or media groups rather than filling the viewport with uninterrupted copy.

## Shape & elevation

- Radius: button `2px` · input `2px` · card `2px` · media `2px` · link `2px` · xs `2px`
- Shadow `sm` (link): `rgba(0, 0, 0, 0.04) 0px 2px 4px 0px`
- Shadow `lg` (link): `rgba(0, 0, 0, 0.04) 0px 2px 4px 0px, rgba(0, 0, 0, 0.08) 0px 8px 32px 0px`
- Shadow `hairline` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Motion: standard transition `0.2s ease` on interactive elements.

The page is predominantly flat, with thin gray borders defining cards, controls, and media frames. Use only restrained, soft shadows for raised interface previews or link cards; avoid heavy depth effects. Slightly rounded corners keep components crisp and technical rather than soft or playful.

## Imagery

Use product-interface captures, market charts, and research-cover previews rather than lifestyle photography. The hero chart is presented as a floating dashboard with overlapping controls; other product visuals sit beside explanatory text or inside cards. Keep screenshots crisp and lightly framed, with chart colors treated as data accents. Small brand and partner marks may support trust, but should remain secondary to the platform interface.

## Components

### Header navigation

White horizontal header with the Glassnode wordmark, compact Inter navigation, and a dark Launch Studio button.

### Hero split

Pale-gray two-column introduction pairing a bold display headline and muted copy with a layered market-chart interface.

### Data-layer panel

Near-black section with a centered introduction, compact metrics, and three white data-category columns.

### Platform feature

White product showcase with left-aligned copy and actions, a product illustration, and a row of bordered metric cards.

### Vector feature

Pale-lavender feature band with a text-and-interface split and compact risk-state cards.

### Research cards

Dark research section presenting collaboration previews as white, bordered cards with cover images and dense editorial copy.

### Newsletter form

Centered subscription block on the dark research background, pairing a short pitch with an email field and subdued submit control.

### Footer

Graphite footer with the brand mark, grouped link columns, social icons, and low-contrast legal details.

### Measured component styles

- **Primary button** (“Launch Studio”): background #1a1a1a · text #ffffff · border 1px solid #1a1a1a · radius 2px · padding 9.6px 16px · 400 14px Inter
- **Secondary button** (“Send me free research”): background #dedfe1 · text #808080 · border 1px solid #dedfe1 · radius 0px · padding 9.6px 16px · 400 14px Inter
- **Link** (“Partner Reports Coinbase + Glassnode: Ch”): background #f7f8fa · text #000000 · border 1px solid #dedfe1 · radius 2px · padding 16px · 400 16px Inter · shadow rgba(0, 0, 0, 0.04) 0px 2px 4px 0px
- **Input**: transparent background · text #a0a0a0 · border 1px solid #808080 · radius 2px · padding 0px 16px · 400 14px Inter
- **Card** (“Price Robust composite prices constructe”): transparent background · text #000000 · border 1px solid #dedfe1 · radius 2px · padding 0px · 400 16px Inter
- **Navigation item** (“Products Pricing DataAboutLaunch Studio”): transparent background · text #000000 · radius 0px · padding 0px · 400 14px Inter

## Do

- Alternate light surfaces with deliberate dark section bands.
- Use Fraktion for prominent display headlines and Inter for interface copy.
- Keep hero copy and product imagery in a clear two-column split.
- Use blue-violet accents selectively for links and data emphasis.
- Frame interface cards with fine borders and restrained depth.
- Keep research and platform content scannable in modular cards.

## Don't

- Do not replace the neutral palette with saturated backgrounds.
- Do not apply accent blue to large areas of the page.
- Do not add heavy shadows or pill-shaped components.
- Do not crowd the hero with extra navigation or decorative copy.
- Do not use lifestyle photography in place of product interfaces.
- Do not make every section a centered card grid.

## Agent prompt

Build a new Glassnode-style digital-asset intelligence page with a calm editorial feel and precise product detail. Use Market Mist (#edeff2), Clean Paper (#ffffff), and Graphite Night (#1a1a1a) to structure alternating sections; reserve Vector Lavender (#e2e7fc) for a highlighted feature. Set major headlines in a bold display face similar to Fraktion and all interface, navigation, and body text in Inter. Start with a spacious split hero: concise copy on one side, a layered chart or dashboard on the other. Organize later content into data-category columns, product showcases, and research cards with fine Divider Gray (#dedfe1) borders. Apply Soft Periwinkle (#8fa5f6) and Signal Indigo (#4559dc) sparingly to links and data accents. Keep corners crisp, shadows subtle, and section changes clear through background bands rather than decoration.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Pale-gray hero with left-aligned headline and copy opposite a chart interface; trust marks sit below. | Contact link, Industry trust cue | Two-column split, Layered chart preview, Muted link accent |
| 2 | feature-grid | Centered introduction and metrics above three white data-category columns on a dark band. | Category overview, Learn-more link | Dark section band, Three-column cards, Compact metrics |
| 3 | product-showcase | White section with product description beside interface artwork, followed by a horizontal metric-card row. | Launch action, Pricing link, Feature browsing | Split product feature, Dashboard illustration, Bordered data cards |
| 4 | feature-split | Lavender feature band with copy and action at left and risk-state interface at right. | Subscribe action, Risk-state comparison | Pale tinted background, Product preview, Compact state cards |
| 5 | content-feed | Dark research section combining an editorial lead, collaboration cards, and a centered email signup. | Research portal action, Newsletter signup, Partner content browsing | Dark editorial band, White report cards, Inline email form |
| 6 | feature-grid | Pale-gray section with centered headline and a centered grid of icon-led company principles. | Capability scanning | Centered section title, Small line icons, Multi-column text grid |
| 7 | feature-grid | White section with centered heading above three side-by-side product cards and interface previews. | Product discovery, Cross-product navigation | Three-card layout, Soft tinted card surfaces, Embedded product captures |
| 8 | footer | Full-width graphite footer with brand and social icons beside grouped navigation columns. | Resource navigation, Legal links, Social links | Dark footer band, Four-column link groups, Subdued legal line |

## Source CSS custom properties (selected)

```css
--font_size_base: 16px;
--accent_80: #16cc8c;
--light_bg_default: #fff;
--light_bg_disabled: #dedfe1;
--light_bg_tinted: #f7f8fa;
--light_border: #dedfe1;
--light_border_hover: #1a1a1a;
--light_text_primary: #333;
--light_text_secondary: #5a5a5a;
--light_text_tertiary: #6f6f6f;
--light-text-link: #333;
--light-text-link-hover: #6f6f6f;
--light_text_primary_on_dark: #f7f8fa;
--light_text_secondary_on_dark: #dedfe1;
--light_text_tertiary_on_dark: #a0a0a0;
--section-bg-dark: #1a1a1a;
--button-color: #eef0f0;
--button-text-color: #000;
--button-hover-color: #e1e1e1;
--button-border-color: #eef0f0;
--shadow-low: 0px 8px 32px #00000014, 0px 2px 4px #0000000a;
--space-0: 0;
--space-025: .125rem;
--space-050: .25rem;
--space-075: .375rem;
--space-100: .5rem;
--space-150: .75rem;
--space-200: 1rem;
--space-300: 1.5rem;
--space-400: 2rem;
--space-500: 2.5rem;
--space-600: 3rem;
--space-700: 3.5rem;
--space-800: 4rem;
```

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