---
version: alpha
name: Glassnode
description: "A financial terminal wearing museum-grade restraint: near-square corners, ink-black actions, ultramarine data."
colors:
  on-surface-variant: "#A0A0A0"
  on-surface: "#1A1A1A"
  surface: "#EDEFF2"
  outline: "#DEDFE1"
  error: "#D30B0B"
  primary: "#16CC8C"
  white: "#FFFFFF"
  tinted-grey: "#F7F8FA"
  text-primary: "#333333"
  text-secondary: "#5A5A5A"
  text-tertiary: "#6F6F6F"
  fine-hairline: "#E1E1E1"
  pure-black: "#000000"
  ultramarine-15: "#E2E7FC"
  ultramarine-20: "#B8C6FA"
  ultramarine-30: "#8FA5F6"
  ultramarine-40: "#6888FB"
  ultramarine-50: "#4559DC"
  ultramarine-slate: "#3D414B"
  coral-wash: "#FDEEEB"
  coral-border: "#F4B3A8"
  coral: "#EF5D4A"
  risk-off-red: "#FF6363"
  error-on-dark: "#FEB5B5"
typography:
  display:
    fontFamily: Fraktion
    fontSize: 56px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: 0em
  heading:
    fontFamily: Inter
    fontSize: 38.4px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0em
  subheading:
    fontFamily: Inter
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0em
  body:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  body-small:
    fontFamily: Inter
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  caption:
    fontFamily: Inter
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  micro:
    fontFamily: Inter
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
rounded:
  buttons-inputs-cards-chips: 2px
spacing:
  "100": 0.5rem
  "150": 0.75rem
  "200": 1rem
  "300": 1.5rem
  "400": 2rem
  "500": 2.5rem
  "600": 3rem
  "700": 3.5rem
  "800": 4rem
  "025": 0.125rem
  "050": 0.25rem
  "075": 0.375rem
---
# Glassnode — Style Reference
> A financial terminal wearing museum-grade restraint: near-square corners, ink-black actions, ultramarine data.

**Theme:** light

Glassnode is an institutional digital-asset intelligence platform, and the design system reads exactly like that — a research terminal that has been edited down to nothing but signal. The canvas is a cool paper-grey (`#EDEFF2`) that pushes white cards and chart panels forward without a single decorative flourish. Two accent families carry all the meaning: an **ultramarine** ramp (`#8FA5F6` → `#4559DC`) for links, focus, and "risk-on," and a **coral** ramp (`#FDEEEB` → `#EF5D4A`) for editorial highlights and "risk-off." The signature move is the corner: a `2px` radius on *everything* — buttons, inputs, chips — so sharp it reads as a deliberate refusal of softness. Type pairs the geometric display face **Fraktion** for headlines against **Inter** at text sizes, and CTAs are never colored — the primary action is simply ink-black (`#1A1A1A`), letting the blue and coral stay reserved for data.

## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Canvas Grey | `#EDEFF2` | `--base_grey_15` | Page background; the cool paper the whole site floats on. |
| White | `#FFFFFF` | `--white` | Nav, cards, chart panels — every foreground surface. |
| Tinted Grey | `#F7F8FA` | `--base_grey_10` | Subtle fill for rows, wells, and secondary panels. |
| Ink Black | `#1A1A1A` | `--base_grey_90` | Primary buttons, dark sections, banner — the CTA color, never blue. |
| Text Primary | `#333333` | `--base_grey_80` | Headlines and body ink on light surfaces. |
| Text Secondary | `#5A5A5A` | `--base_grey_70` | Sub-copy and lead paragraphs beneath headings. |
| Text Tertiary | `#6F6F6F` | `--base_grey_60` | Captions, metadata, axis labels. |
| Muted Grey | `#A0A0A0` | `--base_grey_40` | Placeholder text and disabled states. |
| Border | `#DEDFE1` | `--base_grey_20` | Default hairline on cards, inputs, dividers. |
| Fine Hairline | `#E1E1E1` | `--grey_30` | The lightest rule, used for internal chart gridlines. |
| Pure Black | `#000000` | `--black` | Text-button ink and max-contrast strokes. |
| Ultramarine 15 | `#E2E7FC` | `--base_ultramarine_15` | Tinted info surface / selected-chip background. |
| Ultramarine 20 | `#B8C6FA` | `--base_ultramarine_20` | Hover tint on ultramarine surfaces. *(inferred ramp step)* |
| Ultramarine 30 | `#8FA5F6` | `--base_ultramarine_30` | Link color and the hero "Contact us →" accent. |
| Ultramarine 40 | `#6888FB` | `--base_ultramarine_40` | Mid-ramp for charts and focus rings. |
| Ultramarine 50 | `#4559DC` | `--base_ultramarine_50` | Deepest blue; "risk-on" data series and pressed links. |
| Ultramarine Slate | `#3D414B` | `--base_ultramarine_80` | Desaturated blue-grey for dense data chrome. |
| Coral Wash | `#FDEEEB` | — | "Risk-off" zone fill and soft alert background. |
| Coral Border | `#F4B3A8` | — | Hairline on coral/alert surfaces. |
| Coral | `#EF5D4A` | — | Editorial highlight and warning text. |
| Risk-Off Red | `#FF6363` | `--vector-risk-off` | The Vector framework's "risk-off" data series. |
| Positive Green | `#16CC8C` | `--accent_80` | Reserved positive/gain accent; data only, never chrome. |
| Error | `#D30B0B` | `--error` | Form validation and destructive states on light. |
| Error on Dark | `#FEB5B5` | `--error_on_dark` | Error text lifted for dark sections. |

## Tokens — Typography

### Fraktion — display face for headlines · `--font-fraktion`
- **Substitute:** Fraktion Sans, "Neue Haas Grotesk Display", Söhne, system-ui
- **Weights:** 400, 700 (headlines render at 700)
- **Sizes:** 56px, 51.2px, 38.4px, 32px, 24px, 20px
- **Line height:** ~1.05–1.15 (tight, display-set)
- **Letter spacing:** near-neutral; the geometry does the work, no extra tracking
- **Role:** Hero and section headlines ("Pioneering digital asset market intelligence"); the geometric, slightly humanist character that gives an otherwise-clinical system its voice.

### Inter — text and UI face · `--font-inter`
- **Substitute:** Inter, "SF Pro Text", system-ui, -apple-system, sans-serif
- **Weights:** 200, 300, 400, 500, 600, 700
- **Sizes:** 16px, 15px, 14px, 13px, 12px, 11px
- **Line height:** ~1.4–1.6 for body
- **Letter spacing:** default; small-caps labels sit at 12–14px 600
- **Role:** Body copy, navigation, buttons, inputs, table data — every readable surface below heading scale.

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Display | 56px / 51.2px | ~1.05 | neutral | `--text-display` |
| Heading | 38.4px / 32px | ~1.1 | neutral | `--text-heading` |
| Subheading | 24px / 20px | ~1.2 | neutral | `--text-subheading` |
| Body | 16px | ~1.5 | default | `--text-body` |
| Body Small | 15px / 14px | ~1.5 | default | `--text-sm` |
| Caption | 13px / 12px | ~1.4 | default | `--text-caption` |
| Micro | 11px | ~1.4 | default | `--text-micro` |

## Tokens — Spacing & Shapes
**Base unit:** 4px (`baseUnit: 4`; scale is authored in `rem` on a 0.5rem step)   **Density:** comfortable on marketing, compact in the data terminal

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| 025 | 0.125rem | `--space-025` |
| 050 | 0.25rem | `--space-050` |
| 075 | 0.375rem | `--space-075` |
| 100 | 0.5rem | `--space-100` |
| 150 | 0.75rem | `--space-150` |
| 200 | 1rem | `--space-200` |
| 300 | 1.5rem | `--space-300` |
| 400 | 2rem | `--space-400` |
| 500 | 2.5rem | `--space-500` |
| 600 | 3rem | `--space-600` |
| 700 | 3.5rem | `--space-700` |
| 800 | 4rem | `--space-800` |

### Border Radius
| Element | Value |
|---------|-------|
| Buttons, inputs, cards, chips | 2px |
| Avatars / icon buttons | 50% |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| Low | `0px 8px 32px rgba(0,0,0,.08), 0px 2px 4px rgba(0,0,0,.04)` | `--shadow-low` |
| Panel float | `rgba(0,0,0,0.04) 0px 2px 4px 0px, rgba(0,0,0,0.08) 0px 8px 32px 0px` | — |

### Layout
- **Page max-width:** 1208px (`--grid-width`)
- **Section gap:** 6rem desktop / 4rem mobile (`--section-py-*`)
- **Card padding:** 24px 16px 28px
- **Element gap:** 1rem–1.5rem (`--space-200`/`--space-300`)
- **Nav height:** 72px desktop / 70px mobile

## Components

### Primary Button ("Launch Studio")
**Role:** The single most important action on the page — launching the product.
Ink-black `#1A1A1A` fill, `#FFFFFF` label, `1px #1A1A1A` border, `2px` radius, `9.6px 16px` padding, Inter 14px / 400. No shadow. The action carries weight through pure contrast, not color.

### Secondary Button
**Role:** Supporting actions and lead-gen ("Send me free research").
Grey `#DEDFE1` fill, `#808080` label, matching border, `2px` radius. Quiet by design — it recedes behind the black primary.

### Text Button
**Role:** Inline, low-emphasis actions inside dense layouts.
No fill, `#000000` label, `2px` radius, `0px 4px` padding, Inter 14px. Effectively a link that respects button hit-targets.

### Icon Button
**Role:** Compact toolbar controls (screenshot, favorite, alert).
White fill, `#5A5A5A` glyph, `1px #DEDFE1` border, `50%` radius — the one place roundness is allowed, to read as a control chip.

### Link
**Role:** Navigational and editorial inline links.
Ultramarine `#8FA5F6` at 15px / 600, no underline; the hero "Contact us →" uses this exact treatment. On dark sections links flip to `#FFFFFF`.

### Input / Search
**Role:** Query fields in the data terminal.
Transparent fill, `#A0A0A0` placeholder, `1px #808080` border, `2px` radius, `0px 16px` padding. Asymmetric corner radii appear on grouped inputs (rounded outer edge, square inner seam).

### Card
**Role:** Feature and content containers on the grey canvas.
White `#FFFFFF` surface, `24px 16px 28px` padding, no border by default, `--shadow-low` on float. Title 20px / 700 `#333333`, body 14px / 400 `#5A5A5A` with 20px bottom padding.

### Chart Panel
**Role:** The hero artifact — a live analytics chart (e.g. "Ethereum: Percent supply in profit").
White panel floating on canvas with `--shadow-low`, `2px` radius. Data uses ultramarine and black series; "risk-on/off" bands wash the plot in coral `#FDEEEB` and a green zone. Fine gridlines in `#E1E1E1`.

### Top Banner
**Role:** Site-wide announcement rail ("Now live: The Vector framework").
Full-bleed ink-black `#1A1A1A`, white centered text, `#8FA5F6`/white inline "View our plans →" link. 38px desktop height.

### Nav Bar
**Role:** Persistent global navigation.
White background, lowercase `glassnode` wordmark in black, text links (Products, Pricing, Data, About) at 14px, black primary button pinned right. 72px tall, no bottom border until scroll.

### Logo Strip
**Role:** Institutional trust signal ("Trusted by industry leaders").
Greyscale partner logos (CME Group, Grayscale, ARK Invest, CoinShares) at low contrast on canvas — muted to `#6F6F6F`-range grey so they read as credentials, not brands.

### Dark Section
**Role:** Full-bleed narrative breaks ("The unified digital asset data layer").
`#1A1A1A` background, white 32px / 700 heading, `#DEDFE1`-range secondary text; error/alert text lifts to `#FEB5B5`.

## Do's and Don'ts

### Do
- Keep every corner at `2px` — it is the system's fingerprint. Inputs, buttons, cards, chips all share it.
- Use ink-black `#1A1A1A` for the primary action and let ultramarine/coral stay reserved for data.
- Reserve coral (`#EF5D4A`, `#FF6363`) for "risk-off" / warning semantics and ultramarine (`#4559DC`) for "risk-on" / links.
- Float white panels on the `#EDEFF2` canvas with the two-layer `--shadow-low`; never a heavy drop shadow.
- Set headlines in Fraktion, everything readable in Inter.

### Don't
- Don't color CTAs blue or green — the primary button is always black; blue is a link, green is a data gain.
- Don't round corners past `2px` (except `50%` icon buttons). Pill and 8px+ radii break the terminal feel.
- Don't let partner logos render in full color — they stay greyscale/muted.
- Don't introduce a third accent hue; ultramarine + coral (+ the single green gain) is the whole vocabulary.
- Don't add gradients or glow — depth comes from luminance steps and hairlines, not effects.

## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#EDEFF2` | The cool-grey page floor. |
| 1 | Tinted | `#F7F8FA` | Wells, alternating rows, secondary panels. |
| 2 | Surface | `#FFFFFF` | Cards, nav, chart panels — the primary reading plane. |
| 3 | Info Tint | `#E2E7FC` | Ultramarine selected / info surface. |
| 3 | Alert Tint | `#FDEEEB` | Coral "risk-off" / warning surface. |
| — | Inverse | `#1A1A1A` | Dark narrative sections and banner. |

## Elevation
Depth is conveyed by **luminance step + soft two-layer shadow**, never by borders alone. White surfaces lift off the grey canvas with `--shadow-low` — a tight `2px 4px` contact shadow stacked under a wide `8px 32px` ambient at 4–8% black. Flat elements (rows, tinted wells) sit at zero elevation and rely purely on the `#F7F8FA` → `#FFFFFF` luminance jump. The dark sections invert the model: on `#1A1A1A`, separation comes from text-color steps (`#FFFFFF` → `#DEDFE1` → muted) rather than shadow.

## Imagery
Product-forward, not decorative. The hero art is a **live chart panel** — a real Glassnode analytics view (candles, on-chain series, risk bands) rendered as a floating white card, which doubles as the strongest possible proof-of-product. There is no stock photography and no illustration; the "imagery" is data visualization itself, using the ultramarine/coral/green data palette. Partner logos appear as a muted greyscale trust strip. Icons are thin-stroke, monochrome, and functional (screenshot, favorite, alert).

## Layout
Contained to a 1208px grid, generously gutted (`4.5rem` desktop side padding) so the grey canvas frames every section. The homepage rhythm alternates full-bleed color blocks — light canvas hero, then an ink-black `#1A1A1A` narrative section — with 6rem vertical breathing room between. The hero is a classic split: left-aligned Fraktion headline + Inter sub-copy + text-link CTA on the left, floating chart artifact on the right. Navigation is a persistent 72px white bar with a lowercase wordmark, center-right text links, and a black button pinned to the far right; a dark announcement rail can sit above it.

## Typography Signature
Two modes, cleanly split. **Fraktion** owns the display register: a geometric sans with just enough humanist warmth to keep a data-heavy brand from feeling cold, set tight (~1.05 line height) at 51–56px and always at 700. **Inter** owns everything a user reads or clicks, from 16px body down to 11px micro-labels, across a full 200–700 weight range. The move that makes it work is discipline about *color* in type, not just size: headlines are `#333333` (not pure black), secondary copy steps to `#5A5A5A`, captions to `#6F6F6F` — a three-stop grey ladder that creates hierarchy without a single weight or size change. Links are the only colored text, in ultramarine `#8FA5F6`.

## Agent Prompt Guide

## Quick Color Reference
- background: `#EDEFF2` / text: `#333333` / surface: `#FFFFFF` / border: `#DEDFE1` / accent: `#8FA5F6` (ultramarine link) / secondary accent: `#EF5D4A` (coral) / primary action: `#1A1A1A` (ink-black, no distinct CTA hue)

## Example Component Prompts
1. **Primary button**: Ink-black `#1A1A1A` background, `#FFFFFF` label, `1px solid #1A1A1A` border, `2px` border-radius, `9.6px 16px` padding, Inter 14px/400, no shadow.
2. **Floating chart card**: White `#FFFFFF` panel on `#EDEFF2` canvas, `2px` radius, shadow `0px 8px 32px rgba(0,0,0,.08), 0px 2px 4px rgba(0,0,0,.04)`; ultramarine `#4559DC` and black data series, coral `#FDEEEB` risk band, gridlines `#E1E1E1`.
3. **Hero block**: Left column — Fraktion 56px/700 headline in `#333333`, Inter 16px `#5A5A5A` sub-copy, ultramarine `#8FA5F6` 15px/600 "Contact us →" text link. Right column — floating chart card. 1208px grid, 6rem section padding.
4. **Search input**: Transparent fill, `1px solid #808080` border, `2px` radius, `0px 16px` padding, placeholder `#A0A0A0`, Inter 14px.
5. **Dark section**: Full-bleed `#1A1A1A` background, white Fraktion 32px/700 heading, `#DEDFE1` secondary text, 6rem vertical padding, centered.

## Similar Brands
- **Linear** — the same near-monochrome restraint, tiny radii, and "the product screenshot is the hero" instinct.
- **Stripe** — institutional trust conveyed through a cool-grey canvas, floating white cards, and reserved blue accents.
- **Bloomberg Terminal** — the data-first, signal-over-decoration DNA translated into a modern web register.
- **Mercury** — a fintech that pairs a geometric display face with a restrained neutral palette and a single confident accent.
- **Ramp** — black-primary actions, muted grey chrome, and color reserved almost entirely for data.

## Quick Start
### CSS Custom Properties
```css
:root {
  /* Colors — Neutrals */
  --color-canvas: #EDEFF2;
  --color-white: #FFFFFF;
  --color-tinted: #F7F8FA;
  --color-ink: #1A1A1A;
  --color-black: #000000;
  --color-text-primary: #333333;
  --color-text-secondary: #5A5A5A;
  --color-text-tertiary: #6F6F6F;
  --color-muted: #A0A0A0;
  --color-grey-mid: #808080;
  --color-border: #DEDFE1;
  --color-hairline: #E1E1E1;

  /* Colors — Ultramarine (links / risk-on) */
  --color-ultramarine-15: #E2E7FC;
  --color-ultramarine-20: #B8C6FA;
  --color-ultramarine-30: #8FA5F6;
  --color-ultramarine-40: #6888FB;
  --color-ultramarine-50: #4559DC;
  --color-ultramarine-slate: #3D414B;

  /* Colors — Coral (risk-off / editorial) */
  --color-coral-wash: #FDEEEB;
  --color-coral-border: #F4B3A8;
  --color-coral: #EF5D4A;
  --color-risk-off: #FF6363;

  /* Colors — Signal */
  --color-positive: #16CC8C;
  --color-error: #D30B0B;
  --color-error-on-dark: #FEB5B5;

  /* Typography — Families */
  --font-fraktion: 'Fraktion', 'Neue Haas Grotesk Display', Söhne, system-ui, sans-serif;
  --font-inter: 'Inter', 'SF Pro Text', system-ui, -apple-system, sans-serif;

  /* Typography — Scale */
  --text-display: 56px;
  --text-display-alt: 51.2px;
  --text-heading: 38.4px;
  --text-heading-alt: 32px;
  --text-subheading: 24px;
  --text-subheading-alt: 20px;
  --text-body: 16px;
  --text-sm: 15px;
  --text-sm-alt: 14px;
  --text-caption: 13px;
  --text-caption-alt: 12px;
  --text-micro: 11px;
  --leading-display: 1.05;
  --leading-body: 1.5;

  /* Spacing */
  --space-025: 0.125rem;
  --space-050: 0.25rem;
  --space-075: 0.375rem;
  --space-100: 0.5rem;
  --space-150: 0.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;

  /* Border Radius */
  --radius-sharp: 2px;
  --radius-round: 50%;

  /* Shadows */
  --shadow-low: 0px 8px 32px rgba(0,0,0,.08), 0px 2px 4px rgba(0,0,0,.04);

  /* Layout */
  --grid-width: 1208px;
  --nav-height: 72px;
}
```
### Tailwind v4
```css
@theme {
  /* Colors — Neutrals */
  --color-canvas: #EDEFF2;
  --color-white: #FFFFFF;
  --color-tinted: #F7F8FA;
  --color-ink: #1A1A1A;
  --color-black: #000000;
  --color-text-primary: #333333;
  --color-text-secondary: #5A5A5A;
  --color-text-tertiary: #6F6F6F;
  --color-muted: #A0A0A0;
  --color-grey-mid: #808080;
  --color-border: #DEDFE1;
  --color-hairline: #E1E1E1;

  /* Colors — Ultramarine */
  --color-ultramarine-15: #E2E7FC;
  --color-ultramarine-20: #B8C6FA;
  --color-ultramarine-30: #8FA5F6;
  --color-ultramarine-40: #6888FB;
  --color-ultramarine-50: #4559DC;
  --color-ultramarine-slate: #3D414B;

  /* Colors — Coral */
  --color-coral-wash: #FDEEEB;
  --color-coral-border: #F4B3A8;
  --color-coral: #EF5D4A;
  --color-risk-off: #FF6363;

  /* Colors — Signal */
  --color-positive: #16CC8C;
  --color-error: #D30B0B;
  --color-error-on-dark: #FEB5B5;

  /* Typography — Families */
  --font-fraktion: 'Fraktion', 'Neue Haas Grotesk Display', Söhne, system-ui, sans-serif;
  --font-inter: 'Inter', 'SF Pro Text', system-ui, -apple-system, sans-serif;

  /* Typography — Scale */
  --text-display: 56px;
  --text-heading: 38.4px;
  --text-subheading: 24px;
  --text-body: 16px;
  --text-sm: 14px;
  --text-caption: 12px;
  --text-micro: 11px;
  --leading-display: 1.05;
  --leading-body: 1.5;

  /* Spacing */
  --spacing-025: 0.125rem;
  --spacing-050: 0.25rem;
  --spacing-075: 0.375rem;
  --spacing-100: 0.5rem;
  --spacing-150: 0.75rem;
  --spacing-200: 1rem;
  --spacing-300: 1.5rem;
  --spacing-400: 2rem;
  --spacing-500: 2.5rem;
  --spacing-600: 3rem;
  --spacing-700: 3.5rem;
  --spacing-800: 4rem;

  /* Border Radius */
  --radius-sharp: 2px;
  --radius-round: 50%;

  /* Shadows */
  --shadow-low: 0px 8px 32px rgba(0,0,0,.08), 0px 2px 4px rgba(0,0,0,.04);
}
```