MoxieMetrx Chart & Data Visualization Style Guide

Research-grade visual design standards for blog posts, reports, and marketing materials. Based on analysis of chart styles used by Kaiko, Glassnode, Chainalysis, Messari, The Block, CoinGecko, and CoinMarketCap.

1. Provider-by-Provider Analysis

Kaiko Research

Chart style: Clean, institutional, data-dense. Charts are typically embedded as static images (.webp) within blog posts on white page backgrounds.

Brand palette: Deep midnight navy (#000046 / #181857) for hero sections and backgrounds; sunflower orange/gold (#FC9E21 / #FD6F1D) as primary accent; electric blue (#154EF3 / #2D60F4) for secondary CTAs
Typography: IBM Plex Sans (weights 300-700). Display text at 3.2rem, body at 0.8rem with 140-160% line height
Chart backgrounds: White chart area on white page, or navy-dark chart backgrounds in hero/feature sections
Chart types: Line charts (time series), area charts (market share), bar charts (volume comparisons), stacked area (market composition)
Presentation: Full-width images inside card components with subtle box shadows (4px 8px 40px rgba(0,0,0,0.16)). Tagged with metadata. Generous whitespace around charts
Overall: Professional institutional. The gold/orange-on-navy palette is distinctive. Feels like a Bloomberg terminal crossed with a consulting deck

Glassnode Insights

Chart style: Dark-background, data-rich, multi-layered. The definitive "institutional crypto analytics" aesthetic.

Brand palette: Deep navy/near-black background (#0D1421 to #131722), with data series in high-contrast colors: orange (#F7931A -- Bitcoin orange), green (#00C9A7), blue (#3861FB), red/pink (#E74C3C), purple (#8E44AD). White/light gray text
Typography: System sans-serif stack (-apple-system, BlinkMacSystemFont, Segoe UI, Roboto). Clean, no-nonsense
Chart backgrounds: Dark navy (#0D1421 to #131722) with very subtle grid lines in dark gray (#1E2A3A to #2A3A4A)
Chart types: Multi-layered line charts, area fills with transparency, heatmaps, oscillator bands, highlighted zones (colored rectangles marking cycles/phases)
Legend placement: Top-left or bottom of chart, inline with color swatches
Annotations: Vertical dashed lines marking events, shaded regions for market phases, inline text labels at key data points
Presentation: Full-width charts embedded in blog posts. Each chart links to "Live Chart" in Glassnode Studio for interactivity. Blog page is light mode, charts themselves are dark
Overall: The gold standard for on-chain analytics visualization. Dark backgrounds make data pop. Multi-metric overlays are their signature move

Chainalysis

Chart style: Clean, corporate, report-grade. Designed for policy-makers and compliance teams, not just traders.

Brand palette: Deep purple (#29225C) as brand primary; teal/blue-green accent; warm gradients for maps and geographic data. WordPress presets also include cyan-blue (#0693E3), vivid purple (#9B51E0)
Typography: Custom branded font (Chainalysis-Bold, Chainalysis-Regular). Clean geometric sans-serif
Chart backgrounds: Predominantly white with light gray grid. Some report sections use deep purple/dark backgrounds
Chart types: Choropleth maps (geography of crypto adoption), bar charts (regional comparisons), line charts (trend over time), bubble charts, treemaps
Data presentation: Large hero images (1800x844px), report-style full-page layouts. Heavy use of geographic/map visualizations with color gradients from light to saturated
Tables: Clean, minimal borders, alternating row shading, bold headers
Overall: Government-report meets tech-company. More conservative than Glassnode. Maps and geographic visualizations are their signature. PDF-heavy for gated reports

Messari

Chart style: Dark-mode-first, sleek, data-professional. Designed for crypto analysts and fund managers.

Brand palette: Dark backgrounds (near-black #0A0B0D to dark gray #1A1B23), with blue (#4C6FFF) and teal (#00D4AA) accents. Occasional purple highlights
Typography: Modern sans-serif (Inter or custom). Clean weight hierarchy
Chart backgrounds: Dark charcoal/near-black. Minimal grid lines
Chart types: Area charts, line charts, bar charts, pie/donut charts for sector allocations, treemaps for market composition
Presentation: Charts embedded in gated research reports (PDF and web). Clean card layouts with subtle borders. Reports use consistent header/footer branding
Overall: Bloomberg-terminal-meets-Notion. Dense but navigable. The Crypto Theses annual report is their flagship -- heavily chart-illustrated with consistent dark styling

The Block Research

Chart style: Clean, light-mode, data-journalism aesthetic. Bloomberg-meets-news.

Brand palette: Deep purple (#29225C) brand accent; light blue and white chart backgrounds; data series in blue (#3B82F6), green (#10B981), orange (#F59E0B), red (#EF4444)
Typography: Modern sans-serif (likely Inter or similar). Clean hierarchy
Chart backgrounds: White or very light gray (#F8F9FA). Clean gridlines in light gray (#E5E7EB)
Chart types: Line charts (price and volume time series), area charts (stacked market share), bar charts (comparative), occasionally stacked bar for composition data
Presentation: Charts integrated directly into article flow, often full-width (max ~720px content width). Clean captions below. Dashboard section has a different, more interactive style with filters
Tables: Minimal borders, clean alignment, alternating subtle shading
Overall: The most "data journalism" of the group. Light mode, clean, no dark gimmicks. Hundreds of proprietary charts in their dashboard. Feels credible and approachable

CoinGecko

Chart style: Consumer-friendly with professional undertones. Dual light/dark mode.

Brand palette: Gecko Green (#4BCC00) primary; Moon Night (#0D1217) dark mode; accent colors including Tongue (#FF7761), Lambo (#F7931A), Sky (#2FB3FC), Purple (#7A55FF), Lime (#B9DA38)
Neutral palette: Moon Dust series for light mode (#F8FAFC to #0F172A); Star Dust series for dark mode (#DFE5EC to #0D1217)
Typography: Tailwind-based system fonts with consistent weight hierarchy (semibold headers, regular body)
Chart backgrounds: White in light mode, dark (#0D1217) in dark mode. Charts within reports are static images in PDF slides
Chart types: Line charts, area charts, pie charts, bar charts. Reports delivered as 60-slide PDF decks
Presentation: Research delivered as downloadable PDF reports (gated with email). Blog uses card-based article layout. Charts are static images within reports
Overall: Consumer brand with a vibrant color palette. Reports are polished but more "infographic" than institutional. Good balance of accessible and data-rich

CoinMarketCap Alexandria

Chart style: Consumer-grade, educational focus. Part of the Binance ecosystem.

Brand palette: Blue primary, white backgrounds, minimal chart customization. Standard financial data chart styling
Typography: System sans-serif, clean
Chart types: Primarily line charts for price history with interactive date range selectors. Basic candlestick charts
Presentation: Charts embedded in educational articles. Straightforward, not heavily styled. Focus on content over visualization design
Overall: More educational/encyclopedia than research-grade. Not the benchmark for MoxieMetrx to follow. Their strength is content volume (50-70 articles/week), not visual design

2. Common Patterns Across All Providers

What every serious crypto research provider does:

Sans-serif fonts exclusively. No serif fonts in charts, ever. IBM Plex Sans, Inter, system fonts, or custom sans-serif
Minimal grid lines. Subtle, low-contrast gridlines that guide the eye without competing with data
Full-width chart embedding. Charts span the full content column width (typically 680-760px in blog layouts)
Consistent color coding. Bitcoin = orange (#F7931A). Ethereum = blue/purple. USD = green. This convention is universal
Source attribution. Every chart cites its data source ("Source: Kaiko", "Source: Glassnode")
White space. Generous padding around charts (24-40px top/bottom margin minimum)
Caption text below charts. Italic or muted gray, explaining what the chart shows
Two dominant aesthetics: Dark (Glassnode, Messari, Kaiko hero) or Light (The Block, Chainalysis, CoinGecko reports). Both work. The choice signals positioning: dark = trader/analyst; light = researcher/institution
Static images in blogs, interactive in dashboards. Blog posts use PNG/WebP; dedicated data pages use interactive JS charts
No matplotlib defaults. No provider uses default blue/orange/green matplotlib. All have custom palettes

3. Best Practices MoxieMetrx Should Adopt

Given MoxieMetrx's positioning (institutional-grade African crypto exchange rate data, targeting researchers, compliance teams, and fintech companies):

Use dark-mode charts on light blog backgrounds (the Glassnode/Kaiko model). This is the strongest visual signal of "serious data provider." The dark chart pops against the white blog page
Establish a fixed color palette for recurring data series (see below). NGN pairs get one color, KES another, ZAR another -- every time, consistently
Use IBM Plex Sans or Inter for chart typography. Both are free, both say "institutional data"
Add source attribution to every chart: "Source: MoxieMetrx | moxiemetrx.com"
Use annotations for market events (CBN policy changes, exchange outages, rate spikes) -- this is what Glassnode does brilliantly
Deliver charts as both static (blog PNG) and interactive (API docs)
Create a branded chart frame -- consistent border, logo placement, source line. Every chart should be instantly recognizable as MoxieMetrx even when shared out of context on Twitter/X
Maps for geographic content (a la Chainalysis). African country coverage maps would be powerful differentiators
Tables should be minimal -- thin borders or borderless, alternating row shading, bold headers, right-aligned numbers
Maintain a chart template library -- reusable Python (matplotlib/plotly) templates that enforce the style guide

4. MoxieMetrx Chart Style Guide -- Specification

4.1 Background & Canvas

Element	Value	Notes
Chart background	`#0F1419`	Deep charcoal-navy. Not pure black (too harsh). Matches institutional dark aesthetic
Plot area background	`#141B22`	Slightly lighter than chart frame for subtle depth
Page/blog background	`#FFFFFF` or `#F8FAFC`	Light page, dark chart = maximum contrast and professionalism
Chart border	`1px solid #1E2A3A`	Subtle, not prominent
Chart border-radius	`8px`	Slight rounding, modern feel
Chart shadow	`0 4px 24px rgba(0, 0, 0, 0.12)`	Subtle lift off the page
Chart padding (internal)	`24px top, 16px right, 12px bottom, 16px left`	Room for title and labels

4.2 Grid & Axes

Element	Value	Notes
Grid lines (horizontal)	`#1E2A3A`	Visible but recessive. Horizontal only by default
Grid lines (vertical)	None (or `#1E2A3A` dashed for time series)	Vertical grid only when useful
Grid line width	`0.5px`	Thin
Axis line color	`#2A3A4A`	Slightly more visible than grid
Axis line width	`1px`
Tick marks	None	Modern charts omit tick marks
Axis label color	`#8899AA`	Muted blue-gray

4.3 Typography

Element	Font	Size	Weight	Color
Chart title	Inter or IBM Plex Sans	16px	600 (semibold)	`#E8ECF0`
Chart subtitle	Inter or IBM Plex Sans	12px	400 (regular)	`#6B7D8E`
Axis labels	Inter or IBM Plex Sans	11px	400	`#8899AA`
Tick labels (values)	IBM Plex Mono or JetBrains Mono	10px	400	`#8899AA`
Legend text	Inter or IBM Plex Sans	11px	400	`#C0CCD8`
Annotation text	Inter or IBM Plex Sans	10px	500	`#E8ECF0`
Source attribution	Inter or IBM Plex Sans	9px	400	`#4A5A6A`

Font loading priority: Inter, 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif

Monospace for numbers in axes/tables: 'IBM Plex Mono', 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace

4.4 Color Palette -- Data Series

Primary data series colors (on dark background):

Purpose	Color	Hex	Usage
NGN pairs	Gold/Amber	`#F5A623`	All naira-denominated data
KES pairs	Teal	`#00BFA5`	All shilling-denominated data
ZAR pairs	Blue	`#4C8BF5`	All rand-denominated data
UGX pairs	Purple	`#AB7DF6`	All Uganda shilling data
GHS pairs	Orange-red	`#FF6B6B`	All Ghana cedi data
BTC reference	Bitcoin Orange	`#F7931A`	Industry standard Bitcoin color
USDT reference	Tether Green	`#26A17B`	Industry standard USDT color
Benchmark / global rate	White	`#E8ECF0`	The "true" rate for comparison

Secondary / supporting colors:

Purpose	Hex	Usage
Positive change / premium	`#00E676`	Green for gains/premium above benchmark
Negative change / discount	`#FF5252`	Red for losses/discount below benchmark
Neutral / flat	`#78909C`	Gray for flat/unchanged
Highlighted region	`#F5A623` at 10% opacity	Shaded zones for events
Confidence band / range	Series color at 15% opacity	Area fills around lines

Area fill rule: When using area charts, fill with the series color at 15-20% opacity. Never use solid fills.

4.5 Chart Dimensions & Aspect Ratio

Context	Width	Height	Aspect Ratio
Blog post (full-width)	760px	420px	~16:9
Blog post (half-width)	370px	280px	~4:3
Twitter/X share card	1200px	675px	16:9
Report PDF (full page)	1400px	800px	~16:9
Dashboard embed	Responsive	Min 320px height	16:9 preferred

Export at 2x resolution (1520px wide for 760px display) for Retina/HiDPI screens. Export as PNG with transparent or #0F1419 background.

4.6 Legend Placement

Default: Top-left, inside the chart area, with a semi-transparent dark background (#0F1419 at 85% opacity)
For 4+ series: Below the chart, horizontal, centered
Legend markers: Small filled circles (6px diameter), not squares or lines
Legend spacing: 16px between items

4.7 Annotations & Callouts

For marking market events (CBN policy changes, exchange outages, rate regime shifts):

Vertical event lines: Dashed, #4A5A6A, 1px width
Event label: Small text (9px) above the line, rotated 0 degrees (horizontal), color #8899AA
Highlighted zones (e.g., "CBN float period"): Rectangle fill with #F5A623 at 8% opacity, no border
Data point callouts: Small circle marker (4px) at the data point, with a leader line to a tooltip-style label (#141B22 background, #E8ECF0 text, 1px #2A3A4A border, 4px border-radius)

4.8 Source Attribution Bar

Every chart MUST include a source line at the bottom:

Source: MoxieMetrx  |  moxiemetrx.com  |  [date range]

Position: Bottom-right of chart, below the plot area
Font: 9px Inter, weight 400, color #4A5A6A
Logo: Small MoxieMetrx logo mark (16px height) at bottom-left, opacity 40%

4.9 Table Formatting (for blog posts)

Property	Value
Header background	`#141B22`
Header text	`#E8ECF0`, 12px, weight 600
Row background (odd)	`#0F1419`
Row background (even)	`#141B22`
Cell text	`#C0CCD8`, 12px, weight 400
Cell text (numbers)	`IBM Plex Mono`, right-aligned
Border	`1px solid #1E2A3A` horizontal only (no vertical borders)
Highlight row	`#F5A623` at 8% opacity background
Positive values	`#00E676`
Negative values	`#FF5252`
Cell padding	`10px 16px`

4.10 Line & Bar Styling

Lines:

Width: 2px for primary series, 1.5px for secondary, 1px dashed for benchmarks
No markers by default. Add 4px circle markers only at sparse data points (weekly/monthly)
Smooth interpolation (bezier curves) for daily+ data. Stepped lines for discrete categories

Bars:

Width: 60-70% of available space (no touching bars)
Border-radius on bars: 2px top corners only
For stacked bars: no gap between segments, 1px dark separator

Area:

Fill opacity: 15-20%
Border line on top of area fill: 2px, same color as fill but full opacity

5. Matplotlib/Plotly Implementation Reference

Matplotlib Theme Snippet

import matplotlib.pyplot as plt
import matplotlib as mpl

MOXIE_DARK = {
    'bg': '#0F1419',
    'plot_bg': '#141B22',
    'grid': '#1E2A3A',
    'axis': '#2A3A4A',
    'text_primary': '#E8ECF0',
    'text_secondary': '#8899AA',
    'text_muted': '#4A5A6A',
}

MOXIE_SERIES = {
    'ngn': '#F5A623',
    'kes': '#00BFA5',
    'zar': '#4C8BF5',
    'ugx': '#AB7DF6',
    'ghs': '#FF6B6B',
    'btc': '#F7931A',
    'usdt': '#26A17B',
    'benchmark': '#E8ECF0',
    'positive': '#00E676',
    'negative': '#FF5252',
}

def apply_moxie_theme():
    """Apply MoxieMetrx institutional chart theme."""
    plt.rcParams.update({
        'figure.facecolor': MOXIE_DARK['bg'],
        'axes.facecolor': MOXIE_DARK['plot_bg'],
        'axes.edgecolor': MOXIE_DARK['axis'],
        'axes.labelcolor': MOXIE_DARK['text_secondary'],
        'axes.grid': True,
        'grid.color': MOXIE_DARK['grid'],
        'grid.linewidth': 0.5,
        'grid.alpha': 1.0,
        'xtick.color': MOXIE_DARK['text_secondary'],
        'ytick.color': MOXIE_DARK['text_secondary'],
        'xtick.labelsize': 10,
        'ytick.labelsize': 10,
        'text.color': MOXIE_DARK['text_primary'],
        'font.family': 'sans-serif',
        'font.sans-serif': ['Inter', 'IBM Plex Sans', 'Segoe UI', 'Roboto', 'DejaVu Sans'],
        'font.size': 11,
        'axes.titlesize': 16,
        'axes.titleweight': 600,
        'axes.labelsize': 11,
        'legend.facecolor': '#0F1419',
        'legend.edgecolor': '#2A3A4A',
        'legend.fontsize': 11,
        'legend.framealpha': 0.85,
        'figure.figsize': (12.67, 7.0),  # ~760x420 at 60 DPI, export at 2x
        'savefig.dpi': 144,
        'savefig.facecolor': MOXIE_DARK['bg'],
        'savefig.bbox': 'tight',
        'savefig.pad_inches': 0.3,
    })


def add_source_attribution(fig, date_range=""):
    """Add MoxieMetrx source bar to bottom of chart."""
    source_text = f"Source: MoxieMetrx  |  moxiemetrx.com"
    if date_range:
        source_text += f"  |  {date_range}"
    fig.text(
        0.98, 0.02, source_text,
        ha='right', va='bottom',
        fontsize=9, color=MOXIE_DARK['text_muted'],
        transform=fig.transFigure,
    )

Plotly Theme Snippet

import plotly.graph_objects as go
import plotly.io as pio

moxie_template = go.layout.Template(
    layout=go.Layout(
        paper_bgcolor='#0F1419',
        plot_bgcolor='#141B22',
        font=dict(
            family='Inter, IBM Plex Sans, sans-serif',
            size=12,
            color='#E8ECF0',
        ),
        title=dict(
            font=dict(size=16, color='#E8ECF0'),
            x=0.02,
            xanchor='left',
        ),
        xaxis=dict(
            gridcolor='#1E2A3A',
            gridwidth=0.5,
            linecolor='#2A3A4A',
            tickfont=dict(size=10, color='#8899AA'),
            title_font=dict(size=11, color='#8899AA'),
        ),
        yaxis=dict(
            gridcolor='#1E2A3A',
            gridwidth=0.5,
            linecolor='#2A3A4A',
            tickfont=dict(size=10, color='#8899AA'),
            title_font=dict(size=11, color='#8899AA'),
        ),
        legend=dict(
            bgcolor='rgba(15, 20, 25, 0.85)',
            bordercolor='#2A3A4A',
            borderwidth=1,
            font=dict(size=11, color='#C0CCD8'),
        ),
        colorway=[
            '#F5A623',  # NGN gold
            '#00BFA5',  # KES teal
            '#4C8BF5',  # ZAR blue
            '#AB7DF6',  # UGX purple
            '#FF6B6B',  # GHS red
            '#F7931A',  # BTC orange
            '#26A17B',  # USDT green
            '#E8ECF0',  # benchmark white
        ],
    )
)

pio.templates['moxie_dark'] = moxie_template
pio.templates.default = 'moxie_dark'

6. Quick Reference Card

BACKGROUNDS:     Chart #0F1419  |  Plot #141B22  |  Page #FFFFFF
GRID:            #1E2A3A (0.5px)
AXIS:            #2A3A4A (1px)
TEXT:             Title #E8ECF0  |  Labels #8899AA  |  Source #4A5A6A
SERIES:          NGN #F5A623  |  KES #00BFA5  |  ZAR #4C8BF5  |  UGX #AB7DF6
                 GHS #FF6B6B  |  BTC #F7931A  |  USDT #26A17B
SIGNALS:         Up #00E676  |  Down #FF5252  |  Flat #78909C
FONT:            Inter / IBM Plex Sans / IBM Plex Mono
SIZE:            760x420 blog  |  1200x675 social  |  2x export
BORDER:          8px radius  |  shadow 0 4px 24px rgba(0,0,0,0.12)

1. Provider-by-Provider Analysis​

Kaiko Research​

Glassnode Insights​

Chainalysis​

Messari​

The Block Research​

CoinGecko​

CoinMarketCap Alexandria​

2. Common Patterns Across All Providers​

3. Best Practices MoxieMetrx Should Adopt​

4. MoxieMetrx Chart Style Guide -- Specification​

4.1 Background & Canvas​

4.2 Grid & Axes​

4.3 Typography​

4.4 Color Palette -- Data Series​

4.5 Chart Dimensions & Aspect Ratio​

4.6 Legend Placement​

4.7 Annotations & Callouts​

4.8 Source Attribution Bar​

4.9 Table Formatting (for blog posts)​

4.10 Line & Bar Styling​

5. Matplotlib/Plotly Implementation Reference​

Matplotlib Theme Snippet​

Plotly Theme Snippet​

6. Quick Reference Card​