Style Guide

Design and development reference for all LlamaGriffin digital products.

This guide covers the LlamaGriffin brand system as applied to software: the main site, the Play Money Index, research reports, and any future data products. It is the single source of truth for color, type, spacing, components, and editorial conventions. When in doubt, match what is here.

Color System

Warm, editorial, data-legible.

The palette is cream-based with a single gold accent and a semantic pairing of teal (positive/discount) and coral (negative/premium). The dark background is used only for high-contrast panels and the super-nav.

Base Palette

Brand Accents

Semantic Rules

These rules apply across all LlamaGriffin software and must not be reversed:

• Teal = discount, cheaper than baseline, positive delta for the buyer
• Coral = premium, more expensive than baseline, negative delta for the buyer
• Gold = the US baseline, brand identity, interactive elements
• Purple = count stats, neutral aggregate figures
• Green dot = live / active data (live indicator only)

Typography

Three fonts. One job each.

Rules

• Playfair Display for headings and hero display text only
• DM Sans for all body copy, descriptions, and prose
• IBM Plex Mono for labels, nav, badges, numbers, table cells, captions — everything that is data or metadata
• Never mix Mono into prose. Never mix Sans into data labels.
• Italic Playfair in gold = the kicker/tagline style. Used once per section maximum.

Spacing & Layout

One container. Consistent rhythm.

Page Container

All content is constrained to 960px max-width, centered, with 2rem (32px) horizontal padding. Never break out of this container except for full-bleed backgrounds.

Section Padding

Grid

No framework. CSS Grid is used directly:

• Index currency cards: grid-template-columns: repeat(3, 1fr)
• Stat grid: repeat(4, 1fr)
• Hero (main site): 1fr 1fr with 64px gap

UI Components

Small, consistent, reusable.

Confidence Badges

Every data point in any LlamaGriffin index carries a confidence badge. The badge determines the volatility threshold before a move is published.

Stat Grid

4-cell strip for headline KPIs. Values in Playfair Display bold, labels in Mono 8px. Color-coded by semantic role.

Accordion

Used for methodology, FAQs, and excluded market notes. Closed by default. Mono label, gold chevron on open.

Index Currency Card

Used on the Play Money Index hub and the LlamaGriffin main site widget. Icon top-left, currency and game name, live ±% value, green pill link.

Navigation

Two-tier nav on all software pages:

• Super-nav — dark background, Mono 9px, gold links, shows publication context (e.g. "THE ROBUX INDEX · THE PATTERN RECOGNITION")
• Main nav — cream, sticky, Playfair brand name + Mono nav links. Active link has 2px gold bottom border.

Charts & Tables

Data-ink ratio first. Every pixel earns its place.

Chart Color Sequence

For multi-series charts. Use in order. Teal is always series 1 (or the discount/positive series).

Heatmap Color Scale

Applied to market-vs-currency heatmaps. Linear from deep teal (large discount) through neutral to deep coral (large premium).

Data Table Conventions

Rules

• No gridlines inside chart bodies — only the axis lines
• All numeric values in IBM Plex Mono
• Flags always precede country names in tables
• Zero-border collapse on all tables; subtle row separators only
• Chart captions in Mono 8px, always include: what it shows, normalization method, FX source

Editorial Conventions

Written like The Economist, built like Bloomberg.

Voice

• Declarative. State what the data shows, not what you think about it.
• No hedging. "The gap is +21%" not "the gap appears to be around +21%".
• Short sentences in data sections. Longer sentences in editorial sections (Reframe, So What?).
• Never use em dashes — use commas, colons, or full stops instead.
• Active voice. "Riot sets prices by region." Not "Prices are set regionally by Riot."

Page Section Structure (Index Pages)

1. Implied Cost (bar chart) — the "what it costs" visual
2. The Index (data table) — the full market breakdown
3. Today's Interpretation — one auto-generated prose sentence
4. Drift Over Time — time series chart
5. Cross-Index Comparison — how this currency compares to others in 2 key markets
6. So What? — plain-English translation for non-analysts
7. Methodology — collapsible accordions
8. The Reframe — editorial closing section

Section Labels

Every section opens with a Mono 9px gold label (e.g. "SECTION 01", "COUNTRY LEADERBOARD", "FULL PICTURE"). This is the navigation anchor and the reader's orientation cue. Never skip it.

Disclaimer Rule

Every index page ends with a standard independence disclaimer in Mono 9px muted text. Mandatory on all pages. Format: "[Index name] is independent analysis by Llama & Griffin, not affiliated with or endorsed by [publisher]. The [currency] name refers to the product. Nothing on this page sells, resells, or advises on acquiring [currency]."

Source Citation

All data sources are cited in the methodology accordion with the confidence tier, source URL, and date last verified. Source links in the body = plain gold underlined text (never button-style). Never bury sources.

CSS Variables & Font Loading

Copy-paste to start any new LlamaGriffin software project.

Font Loading

<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=
  Playfair+Display:ital,wght@0,400;0,700;1,400;1,700
  &family=DM+Sans:wght@400;500;600
  &family=IBM+Plex+Mono:wght@400;500
  &display=swap" rel="stylesheet">

CSS Custom Properties

:root {
  /* Colors */
  --cream:       #f7f4ee;
  --cream-dark:  #eae7e0;
  --white:       #fdfcf9;
  --dark:        #232323;
  --mid:         #6b6660;
  --faint:       #bab9b4;
  --border:      #d2cdc3;
  --border-med:  #ccc9c0;
  --gold:        #c3a55f;
  --gold-dark:   #a8893a;
  --teal:        #2a8f76;
  --teal-light:  #6dc4ab;
  --coral:       #b85a3a;
  --coral-light: #e0a088;
  --purple:      #6b64b3;

  /* Fonts */
  --font-d:  'Playfair Display', serif;
  --font-s:  'DM Sans', sans-serif;
  --font-m:  'IBM Plex Mono', monospace;

  /* Layout */
  --max-w:   960px;
  --radius:  6px;
}

Confidence Badge CSS

.tag { display:inline-flex; align-items:center; padding:3px 7px; border-radius:3px;
       font-family:var(--font-m); font-size:9px; letter-spacing:0.08em;
       text-transform:uppercase; font-weight:500; }
.tag-gold   { background:rgba(195,165,95,0.15); color:#7a5e1a; }
.tag-teal   { background:rgba(42,143,118,0.15); color:#1a6e5a; }
.tag-blue   { background:rgba(27,140,255,0.12); color:#1460b8; }
.tag-coral  { background:rgba(184,90,58,0.15);  color:#8b3a22; }
.tag-purple { background:rgba(107,100,179,0.15);color:#3d3680; }
.tag-dim    { background:rgba(107,102,96,0.12); color:var(--mid); }

FX Data Source

/* Live FX — mid-market, 84 central banks, daily */
const FX_URL = 'https://api.frankfurter.app/latest?base=USD';

/* Hardcoded pegs (Frankfurter does not cover Gulf currencies) */
const PEGGED = { SAR: 3.75, AED: 3.6725 };

Normalization Formula (JS)

function computeRow(localPrice, fxRate, bundleSize, baselineUSD) {
  const impliedUSD    = localPrice / fxRate;
  const perUnit       = impliedUSD / bundleSize;
  const per100        = perUnit * 100;
  const baselinePer100 = baselineUSD / bundleSize * 100;
  const premiumDiscount = (per100 / baselinePer100 - 1) * 100;
  const impliedFX     = localPrice / baselineUSD;
  return { impliedUSD, per100, premiumDiscount, impliedFX };
}