Design System Documentation

Precision Editorial
Design System

The visual language of The Sovereign Analyst — an intelligence platform built on tonal depth, typographic gravity, and amber precision.

Theme: Dark-First Foundation: Deep Slate Accent: Amber Intelligence
01 — Creative Direction

The Sovereign Analyst

This system moves away from the "SaaS-blue dashboard" trope toward a high-end editorial intelligence platform — designed to feel like a premium financial broadsheet reimagined for the 22nd century: authoritative, dense with intelligence, but breathable through intentional white space and tonal depth.

We break the template look by pairing the brutalist geometry of display fonts with the intellectual warmth of serif body prose.

Asymmetry guides the eye toward the "Lead Story" — the primary data insight on any screen. Every layout decision serves that navigation instinct.
02 — Visual Reference

Color, Type & Components at a Glance

A single-panel reference covering the three foundational layers: the tonal palette, the typographic scale, and the core interactive components.

Palette
Primary#F0A500
Secondary#947534
Tertiary#42B8FF
Neutral#0A0B0D
Typography
Headline
Aa
Syne / Clash Display
Body
Aa
DM Serif Display · Source Serif 4
Label
Aa
Plus Jakarta Sans · JetBrains Mono
Components
Buttons
Input
Icon Actions & Labels
Label
03 — Tonal Architecture

Colors & Surface Hierarchy

A "Deep Slate" foundation punctuated by Amber Intelligence. Section boundaries are defined entirely through background tonal shifts — never explicit borders.

#121315
backgroundBase canvas
#0d0e10
surface_lowestRecessed inputs
#1b1c1e
surface_lowNav, sidebars
#1f2022
surfaceData containers
#292a2c
surface_highActive states
#343537
surface_highestRaised cards
#ffc56c
primaryAmber Intelligence
#81cfff
positiveGains / up data
#ffb4ab
negativeLosses / alerts
No-Line Rule — Tonal Layering Demo
surface_highest — Elevated / Modal#343537
surface_high — Active Cards#292a2c
surface — Data Containers#1f2022
surface_low — Sidebars / Nav#1b1c1e
background — Canvas#121315
surface_lowest — Recessed Inputs#0d0e10
04 — Typographic System

The Editorial Backbone

Five typeface roles, each with a clear function. Cold precision of data paired with the warmth of financial prose.

DisplaySyne / Clash Display
800 · −3% tracking
Hero, section titles
Qoinra
HeadingDM Serif Display
Regular · Editorial gravity
Article & insight titles
The Macro Intelligence Report
Body ProseSource Serif 4
300–400 · 1.75lh
Long-form analysis
Central bank liquidity operations continue to suppress volatility across risk assets, while the underlying credit impulse signals a potential reversal in the second half of the cycle.
UI / LabelsPlus Jakarta Sans
Medium · Functional
Buttons, nav, tags
Market Overview · Macro Briefing · Premium Report
Data / MonoJetBrains Mono
500 · tabular-nums
Tickers, tables
DXY +0.34% · 10Y 4.61% · BTC $84,210
05 — Depth & Elevation

Tonal Layering, Glass & Shadow

Standard drop shadows are prohibited. Hierarchy is achieved through background tonal shifts alone. Floating elements use glassmorphism with 12px backdrop blur and subtle amber border trace.

RecessedInput Fieldsurface_lowest (#0d0e10) — creates a sunken feel for editable areas.
BaseData Panelsurface (#1f2022) — primary container for charts and data.
RaisedActive Cardsurface_highest (#343537) — for hover states, modals, selections.
Glass Tooltip — Floating Element Treatment
Global Liquidity Index
$23.4T
↑ +2.1% MoM
The Intelligence Rail — a 2px amber vertical line placed left of high-priority insights — acts as a visual anchor in dense data environments. One rail per view maximum.
06 — Component Library

Buttons, Inputs & Data

Buttons
Primary: gradient amber · on-primary text
Secondary: ghost border · primary-dim text
Tertiary: no bg · label-md uppercase
Input Fields
Data Grid — JetBrains Mono · Tabular Nums · No Dividers
AssetPrice24hMkt Cap
Bitcoin$84,210↑ +2.34%$1.66T
Ethereum$3,180↓ −1.08%$382B
US Dollar Index104.32↑ +0.34%—
10Y Treasury4.61%↓ −0.05%—
07 — Principles

Do's & Don'ts

These rules protect the editorial integrity of the system. Non-negotiable.

✓
Do
  • Lean into asymmetry — align heading left while centering the visualization
  • Use Source Serif 4 for any text longer than two sentences
  • Apply the 8px grid religiously — precision is the "Intelligence" in the brand
  • Define boundaries through background shifts, never lines or borders
  • Use JetBrains Mono for all tabular numbers and tickers
  • Keep corner radii at or below 0.75rem — this system is Sharp
✕
Don't
  • Use decorative gradients, blobs, or mesh backgrounds — functional only
  • Use 100% white (#ffffff) — always use on_surface (#e3e2e5) instead
  • Use corner radii larger than 0.75rem — playful shapes contradict the brand
  • Separate list items with dividers — use 8px vertical whitespace instead
  • Apply standard drop shadows — use soft 4% opacity ambient glow only
  • Use 1px borders to define sections — rely solely on tonal layering