A baseball intelligence
system of record.
An Observatory-grade structure, Almanac voice, and restrained Scouting-Desk energy — composed into one working visual system for Mithrandir Metrics. Built for density, readability, and Flask/Jinja realism.
Contents
01Final visual identity
The working identity — what we're calling Observatory · Almanac — blends all three earlier directions in specific, defensible ratios. Nothing in the system is decoration; every piece earns its place against the constraint of dense baseball information rendered on Flask/Jinja pages.
Observatory gives us the chassis. Almanac gives us the voice. Scouting Desk shows up for one specific moment — the Daily page — and nowhere else.
The blend, in one sentence
Observatory structure (top bar + contextual rail, 12-col grid, ruled tables, confidence-interval charts) · Almanac typography & voice (Source Serif 4 masthead, italic pull-quotes, mono numerals, warm ink-black surface) · Scouting-Desk accents (reserved daily yellow, exclusively for today-only / live callouts on the Daily page).
What this feels like to a user
- An observatory at 04:00 UTC — calm, instrumental, honest about uncertainty.
- A premium baseball almanac, printed nightly — editorial voice, proud of its tables.
- A scouting desk behind the broadcast booth — but only when Daily is open and something's live.
Mythic restraint
Mithrandir is the operator's name, not a theme. Signal color is staff-grey rather than any fantasy palette. There are no runic glyphs, no sword icons, no gradients that suggest "wizard." Model names (Palantir, Fangorn, Valinor) carry all the mythic load the product needs. The rest of the surface stays an instrument.
02Color tokens
A neutral ink-black surface system (slight warm cast at oklch(…0.006 70)) with two semantic accents and one reserved accent. Everything else is ink grey at graded opacity. This is the smallest palette that can carry the whole product.
Surface
Ink (text)
Accents
Daily yellow is reserved Do not use the reserved yellow outside the Daily page masthead or live-state indicators. Signal carries all other informational emphasis site-wide.
- Use Signal for links, selected rows, projection ranges, and "confidence" callouts.
- Use Warn for market edges > threshold, injury flags, data-staleness alerts.
- Let grey do the work. 90% of the UI is graded ink.
- Don't tint surfaces with accent color — accents belong to text, rules, and small fills.
- Don't combine Signal and Warn on the same element (pick one).
- Don't introduce a green for "positive" outside the Outcome scale.
03Typography rules
Three families, each with a specific job. Type hierarchy is the single strongest tool we have for making dense baseball data feel organized; we lean on it aggressively before reaching for color.
Mastheads, hub titles, player-card names, feature headlines, italic pull-quotes. Never used for UI chrome or numbers.
Buttons, nav, form labels, body copy in cards, row text in tables.
Every stat, every delta, every timestamp. Always tabular-nums. Eyebrow labels and folio tags also use mono at 10.5px / .22em letter-spacing / UPPERCASE.
Display 2 — 32px · hub title
H1 — 22px · card title
H2 — 17px · subsection
Body — 14px / 1.45 · default
Caption — 12px · table foot, helper
Micro — 10.5px / .22em UPPER · folios, eyebrows
Rules
- Italic only for voice. Pull-quotes, feature deks, dispatch numbers, team nicknames in prose. Never italicize labels or numbers.
- Numbers are always mono and tabular. Tokens enforce
font-variant-numeric: tabular-numson.mm-num,table, and[data-num]. - Eyebrows carry category. Uppercase 10.5px mono + letter-spacing .22em is the single pattern for folio / eyebrow / section-rule label. Don't improvise variants.
- One display face per screen. If a page uses
Display 1, don't also useDisplay 2— pick the larger and let the rest be H1/H2. - Line length 60–75ch for dek and prose. For column labels and card titles, no limit.
04Navigation rules
Hybrid: a sticky top bar for the seven hubs, a contextual left rail that appears on any hub (Analytics, Betting, Lab, Prospects) with sub-sections. Home and Daily have no rail.
 }})
Rules
- Top bar is permanent and sticky. Seven hubs. No more. If a new area arrives, it becomes a sub-section of an existing hub.
- Rail appears on hubs that have sub-sections: Analytics, Betting, Lab, Prospects, Methods. Home and Daily do not show a rail.
- Active state is Signal-colored — underline under topbar link, 2px left-border on rail link with signal tint gradient.
- Breadcrumbs go in the masthead folio, not above the title. Example:
ANALYTICS / PROJECTIONS · W 15. - Section counts (e.g. "142 players") appear as small mono tags on rail links — this is one of Mithrandir's signatures.
05Table rules
Box-score almanac: ruled hairlines between rows, no vertical rules, mono tabular numbers right-aligned, text left-aligned, uppercase mono headers. Tables carry more informational weight than cards do — they are the primary medium.
| # | Player | Pos | Proj WAR | 90% CI | wRC+ | Δ 7d | Tier |
|---|---|---|---|---|---|---|---|
| 01 | Aaron Judge NYY | RF | 7.4 | 5.8 · 8.9 | 178 | +0.3 | Elite |
| 02 | Shohei Ohtani LAD | DH | 6.9 | 5.2 · 8.4 | 169 | −0.1 | Elite |
| 03 | Bobby Witt Jr. KCR | SS | 6.2 | 4.7 · 7.6 | 152 | +0.4 | Elite |
| 04 | Gunnar Henderson BAL | SS | 5.8 | 4.3 · 7.2 | 144 | — | Star |
| 05 | Juan Soto NYM | RF | 5.6 | 4.1 · 7.0 | 163 | +0.2 | Star |
| As of W 15 · 2026 · Model: Palantir v 4.2 | |||||||
Rules
- Hairline row rules only. No vertical rules. Use
--mm-rule-1between rows and--mm-rule-2under the header. - Headers: uppercase mono 10.5px,
--mm-text-3. Sticky to--mm-topbar-h. - Numerals: always mono, right-aligned, tabular. Add
.numclass tothandtd. - Name column carries secondary team-code in smaller mono (
<small>). - Selected row uses
--mm-signal-tint. Hover uses--mm-ink-750. - Footer is the audit trail: model + as-of date. Always present on analytics tables.
- Density: default
10pxrow-padding..mm-table--compactdrops to 6px for data-heavy lists. - Deltas:
.delta-up/.delta-downfor +/−. Zero/flat renders as em-dash, never "0.0".
06Card rules
Cards are containers for content that isn't tabular — summaries, player profiles, market snapshots, lab experiments. They use ruled borders, small radii (4px), and generous internal padding. Cards never float or stack shadows; the rule-line is the container.
Top movers · last 7 days
Players whose 2026 projection shifted by more than 0.3 WAR over the past seven days. Witt, Skenes, and Crow-Armstrong lead the climb; Acuña and Strider slide on injury news.
Rules
- Border, not shadow. Cards use
1px solid --mm-rule-2and--mm-ink-850background. No drop shadows except popovers. - Head / body / foot is the canonical structure. Head carries eyebrow + title + one status affordance. Foot carries audit trail + action.
- Eyebrows are mandatory on hub-level cards — they tell the user where the data lives:
ANALYTICS · SCORECARD,LAB · UNLOCK CANDIDATES. - Card grids: 12-col, typical widths are 4/4/4, 6/6, 8/4, or 12. Never 3-col on desktop — density wants wider cards with more internal structure.
- Player cards use three zones: portrait (96px), identity block, projection block with leading stat. The projection zone is the brightest thing on the card.
07Data-visual rules
Data is our imagery. We don't put stock photos on the site; we put spray charts, strike zones, park outlines, and distribution plots. Every chart is built in the same drawing vocabulary.
Lines are always 1.25px, filled area is --mm-signal-tint. Final point is a filled dot.
Tinted bar = 80–90% CI. Dot = point estimate. Every projection carries a CI — uncertainty is a first-class citizen.
Signal at alpha 0.10 → 0.90
Rule-frame always visible
Neutral ink bars. Signal-colored dashed line for median/reference value, with a mono label.
Rules
- Data is the imagery. No hero photos of stadiums. A player portrait is a 96px diagonal-stripe placeholder unless real artwork is provided.
- One chart color per panel. If you need two series, use Signal + graded Ink — never Signal + Warn.
- Uncertainty is drawn. Projections always show a CI. Tails, whiskers, or tinted ranges — never a single number alone on a summary card.
- Axes are minimum viable. Mono labels at 10px,
--mm-text-3. Gridlines only where mandatory for reading. - No 3D, no glow, no gradient fills other than
--mm-signal-tintfor area under a line.
08Mobile rules
Mobile is not a shrunk desktop. The rail collapses, the top bar becomes a section switcher, and tables reflow to card-per-row with the most informative columns kept visible.
Pattern: chip section-switcher
The seven hubs become a horizontally-scrollable chip rail below a compact top bar. Active chip uses the Signal underline pattern translated to a tinted pill. Sub-sections of a hub appear as a second chip row below when the hub is deep (Analytics, Lab).
Pattern: table → card list
Tables reflow to row-cards with: primary identity on the left, the single most-important number on the right, and two supporting stats revealed on tap. No horizontal scrolling.
Reach & hit targets
44px minimum hit target. Primary actions move to the bottom half of the screen. A single sticky footer appears on Daily for the "Today's edge" shortcut.
Rules
- Top bar collapses to brand + week folio + menu. The 7-hub nav moves into the chip rail.
- No left rail on mobile. Sub-sections appear as a second chip row (only when a hub is selected).
- Tables always reflow. Never allow horizontal scrolling on a table. Pick the two most-informative columns for mobile.
- Player cards stack: portrait + identity on row 1, projection zone as row 2 full-width.
- Typography shrinks one step: Display 1 becomes 28px; H1 becomes 18px; body stays 14px for readability.
09Page-specific guidance
Each of the seven hubs gets a distinct compositional job, but all share the same system. This is where architecture meets identity.
Home is the front page of the almanac, not a marketing landing. It answers three questions in this order: what's new tonight?, what changed this week?, where should I go?
Composition- Masthead: "Mithrandir Metrics" + date folio + one dek sentence ("Nightly baseball intelligence · W 15 · 2026").
- Hero row: a single wide Daily-preview card (links to Daily) + a 3-column KPI strip (leaderboard movers, market edges, new prospects).
- Three hub-entry cards below: Analytics, Lab, Prospects. Each card shows a sparkline/chart thumbnail, a one-line summary, and a "go" affordance.
- Footer strip: Methods identities (Palantir, Fangorn, Valinor) as mono chips linking to the Methods hub.
- No rotating hero carousel. No "Sign up today" CTA. No testimonials or feature lists.
The flagship page. Feels like a newspaper front printed for tonight. This is the only place the reserved yellow appears.
Composition- Full-bleed masthead:
DISPATCH № 112 · 23 APR 2026folio, Display-1 dek ("Palantir sees a narrow AL West"), byline row with author + model version. - Below masthead: scoreboard-style stat block (C · Scouting-Desk borrow) — 4–5 big mono numbers with reserved-yellow labels — the only reserved-yellow usage.
- Lead report: serif long-form column, 62ch max. Pull-quote in italic Display-2 with left-border signal.
- Right rail (desktop): today's cards — a stack of compact player/game cards.
- Footer: archive drawer ("Yesterday · № 111 · → dispatch") as a horizontal list of the last 7 dispatches.
- No reserved-yellow accent anywhere except the masthead stat block and live-state dots. No "read time" labels. No social share bar at top.
Analytics is the densest hub. Contextual left rail with Projections · Standings · Player forecasts · Awards · Leaders · Scorecard.
Composition- Sub-page header: folio (ANALYTICS / PROJECTIONS · W 15) + Display-2 title + filter bar (team, position, model, as-of).
- Primary region is always a table (see §05). Tables are the content.
- Above the table: one full-width summary card with a sparkline/histogram answering "what's the headline?"
- Right side of table row: on hover, a Signal-colored "→" reveals the player-forecast page.
- Each sub-section is a Jinja template extending
_hub.jinjawith masthead/folio blocks and a{% block table %}. Filters are simple form GETs.
Distinct lane: market analysis, never touting. Warn-amber is Betting's working color.
Composition- Rail: Market watch · Futures gaps · Prop boards · Parlay calculator.
- Masthead carries a persistent disclaimer micro-strip ("Analysis, not advice · Mithrandir Metrics does not accept wagers.").
- Prop boards and market-watch tables use the standard table pattern; edges above threshold are tagged with
mm-tag--warn, not highlighted rows. - Parlay calculator is a compact form card (8-col) beside a results card (4-col). Pure utility, no gambling-site chrome.
- No odds-flash green. No "pick of the day" hero. No bookmaker logos larger than 16px. No flashing/live-odds ticker.
The research back-room. Tonal-only — no accent colors except for active-experiment state.
Composition- Rail: Unlock candidates · Optimization runs · Backtests · Archive.
- Each experiment renders as a long card with a header (experiment name + version + as-of), a methodology note (serif italic 62ch), a result block (mono KPIs), and a "reproduce" footer linking to Methods.
- Backtest archive is a dense zebra-free table with a mono run-id column and a signal-tinted row for "canonical" runs.
- No marketing framing ("Unlock alpha!"). Experiment names are literal:
CS-2026-04-23 · Palantir v 4.2 · AL-West.
Prospects get the most visual breathing room because users compare across hundreds. Tiers are the organizing principle.
Composition- Rail: Universe · Tiers · Profiles · Archive.
- Universe view is a virtualized long table with a fixed leftmost identity column and tier swatches (signal at graded alpha).
- Profile page uses the Player Card pattern, plus a four-panel projection-vs-comparable grid and a serif "scout's note" column.
- Tier legend sits persistently in the page masthead ("Tier 1 · 2 · 3 · 4 — Palantir confidence").
The credibility anchor of the whole site. Methods is where Palantir, Fangorn, and Valinor live. Mythic names carry the atmosphere so nothing else has to.
Composition- Rail: Palantir · Fangorn · Valinor · Changelog.
- Each model page leads with a serif masthead (the model's name in Display-1), a one-paragraph italic description, a version matrix table, and an Observatory-style operational strip (status, last-updated, sample size, error rate).
- Methods pages are the one place a quote from the scientific/observatory tradition is welcome ("All models are wrong; some are useful.") — serif, italic, 60ch, as a pull-quote not a banner.
- No sigils, runes, sword imagery, or stylized fonts. No gradient backgrounds on model cards. Mithrandir influence stays in naming, not graphics.
10Things to avoid
A living list. Every item has killed a dense analytics product we respect. Keep this list close.
- Neon green "Win!" highlights
- Bookmaker logos sized as brand partners
- Live-odds scroll tickers
- "Pick of the day" hero cards
- Parlay-builder in the primary nav
- Purple → blue gradient hero
- Filled rounded-20px cards with soft shadows
- "Good morning, Jordan ✨" greeting rows
- Welcome-tour onboarding modals
- Lucide-icon soup beside every label
- Runic typography or sword icons
- Parchment textures or glowing orbs
- Tolkien-named UI chrome (never "Rivendell sidebar")
- Fantasy-novel pull-quotes unrelated to baseball
- Purple/gold "wizard" palettes
- More than 4 cards in a row on desktop
- Cards with 6+ stats and no hierarchy
- Nested cards (card-in-card)
- Accent-colored card backgrounds
- Shadowed floating cards on dark surfaces
- Testimonials, "trusted by" logo bars, feature grids
- Hero copy promising alpha / edges
- Rotating carousels
- Animated background gradients
- Stock photos of stadiums or generic players
- Proportional numerals in tables
- Serif labels in UI chrome
- Multiple italic weights on one screen
- Centered body copy over 40ch
- Long prose at 14px without 1.6 leading
End of document · Mithrandir Metrics Design System v 1.0 · 23 April 2026