ePlanet TV Design System

A living reference generated from styles/tokens.css and the current component library — every color, gradient, spacing step, and control below is driven by the same CSS custom properties the real app uses, so this page re-themes exactly like the site does. Use the switch in the sidebar to flip between dark (the canonical streaming mode) and light (the editorial mode).

Color

Backgrounds and text roles flip between themes; the brand, orange, navy, and neutral palettes underneath are fixed reference swatches used to build every role above them.

Backgrounds
--color-bg-pagePage canvas
--color-bg-cardCard fill
--color-bg-card-altRaised / recessed
--color-bg-card-hi-2Input fields
--color-bg-card-hi-3Hover fill
Text roles
--color-text-primary
--color-text-muted
--color-text-faint
--color-text-accentKicker / eyebrow
--color-link
Semantic
--color-up
--color-down
--color-live
--color-danger
--color-brandPumpkin
Chrome (header / footer / persistent controls)
--color-chrome-bg-solid
--color-chrome-text
--color-chrome-active-bgSelected pill
--color-chrome-control-bg
Navy palette (theme-invariant)
--color-navy-900#070c18
--color-navy-800#0f1c35
--color-navy-primary#152242
--color-navy-500#2f5091
--color-navy-300#6e90c6
--color-navy-100#c3d2ea
Orange / brand palette (theme-invariant)
--color-orange-700Vermilion · #e54024
--color-orange-500Pumpkin · #f17629
--color-orange-300#f5a05a
--color-orange-100#fde8d5
--color-amber-500#f3b33d
Neutral scale (theme-invariant)
neutral-0#ffffff
neutral-200#e4e4e4
neutral-400#a8a8a8
neutral-600#575757
neutral-800#262626
neutral-900#141414

Gradients

Decorative fills reused across CTAs, avatars, dividers, and full-bleed section backgrounds. Every one is theme-aware except the CTA and avatar-glow recipes, which v2 defines as brand-invariant.

--gradient-cta
Button fills · theme-invariant
--gradient-people
Analyst headshot fallback avatars
--gradient-divider
Section-divider accent bar
--gradient-breaking-strip-accent
Breaking-news strip base
--gradient-academy-section
Academy / Markets full-bleed band
--gradient-card-surface
Primary card surface
--gradient-article-card-surface
ArticleCard thumbnail base
MobileMenu .panel
2026-08-17 · subtle page→card-alt wash, today's addition

Typography

--font-heading (Plus Jakarta Sans) for titles, --font-body (IBM Plex Sans) for everything else, --font-mono (IBM Plex Mono) for numerals/code. Scale follows a 1.25 Major-Third ratio off a 16px base, with the top 2 steps pinned smaller than a strict ratio would give.

--fs-eyebrow · 10.25px
Section label
--fs-sm / --fs-xs · 12.5px
Body caption text
--fs-base · 16px
Paragraph copy
--fs-md · 20px
Card title
--fs-lg · 25px
Section heading
--fs-xl · 27px
Page block title
--fs-xl-2 · 33px
Feature heading
--fs-xl-3 · 48.75px
Page title
--fs-display · 61px
Hero
Weights
Medium 500  Semibold 600  Bold 700  Black 900

Spacing

A 4px base grid. --space-1 = 4px, --space-4 = 16px, --space-6 = 32px, and --space-10 = 96px are the documented anchors; every other step preserves those.

--space-1 · 4px
--space-2 · 8px
--space-3 · 12px
--space-4 · 16px
--space-5 · 24px
--space-6 · 32px
--space-7 · 40px
--space-8 · 48px
--space-9 · 64px
--space-10 · 96px
--space-11 · 128px
--space-12 · 160px

Radius

--radius-card/--radius-feature step down to 14px/20px under 768px — the only viewport-aware radii in the system.

xs · 4px
sm · 6px
md · 8px
lg · 12px
xl · 16px
2xl · 24px
card · 20px
feature · 28px
round · 50%
pill · 999px

Shadow & elevation

Dark theme uses deep black shadows; light theme swaps to a soft navy-tinted shadow so elevation still reads against a pale page.

--shadow-sm
--shadow-md
--shadow-lg
--shadow-card
--shadow-card-hover
--shadow-play-glow

Motion

Every duration below is the real token value — the dots animate at that literal speed.

--motion-fadeup-duration · 0.3s
--motion-livepulse-duration · 1.4s
--motion-breathe-duration · 2.4s
--motion-breathe-hover-duration · 1.1s
--motion-skeleton-shimmer-duration · 1.8s

Buttons

One shared Button component. .primary/.secondary/.live sit on ordinary theme-flipping content; .chromePrimary/.chromeSecondary are scoped to the header/footer's always-dark chrome background, shown on its own dark strip below regardless of page theme.

.primary / .secondary / .live — theme-flipping content
.chromePrimary / .chromeSecondary — always-dark header/footer chrome

Badges & tags

Default ● Live Market Brief Outline

Toggles & selects

The segmented-pill toggle is this app's default "tab"/filter shape (Articles/News, Markets, Grid/List). The select control renders a native <select> under 901px and this custom dropdown above it.

All markets

Theme, language & social controls

Shared by SiteFooter and the mobile hamburger menu's own Appearance/Language/Follow sections (redesigned 2026-08-17).

Theme switcher
System · Light · Dark — icon-only, sr-only labels (the mobile menu's own "just use icons" version, 2026-08-17)
Language switcher
compact — SiteHeader
full — SiteFooter & mobile menu's own Language section
Social action
Subscribe Telegram YouTube

Avatar

JD
JD
SA
flat fill · flat fill (large) · .gradient variant (--gradient-people)

Cards

Market Brief
Gold steadies above key support as dollar softens
4 min read · Aug 17

Mobile navigation — hamburger menu ★

Today's redesign, in full: a subtle top-to-bottom gradient panel background, centered Live Account / Demo CTAs (Live Account on top), the About / Saved / Following nav links, then Language (with a globe icon, since its own pills have no icon of their own), Follow (labelled, wrapping social pills), and Appearance last — back to a compact icon-only segmented toggle, sized to its own content rather than stretching full width. Each group is separated by a plain hairline divider.

Language

Follow

Appearance

Page surfaces

Distinctive full-bleed and card treatments used on specific pages across the site.

Academy / Markets section band
Top-lit radial glow, full-bleed
Article thumbnail signal
Fallback thumbnail treatment
Section divider
Used between major home-page sections
Breaking news strip accent
Bottom border of the ticker strip