Back to ShipLog
🚀 Feature DropMarch 1, 20263 min read

YCharts-Inspired UI Overhaul: 110 Files, One Unified Design System

A comprehensive visual refresh across News Analysis, Products hub, email client, and every country page — adopting a clean YCharts-inspired theme with refined typography, spacing, and component polish.

By TradeStance Engineering
uidesign-systemychartstailwind

What Changed

Every public-facing page, the email client, drive components, stream feed, product pages, and all 8 country-specific pages received a unified visual refresh. The design system now follows a YCharts-inspired aesthetic: clean whites, precise spacing, subtle borders, and professional typography throughout.

Scope of Changes

110 files touched across the dashboard:

  • globals.css: Overhauled color palette, spacing tokens, and component defaults
  • tailwind.config.ts: Updated theme extensions for the new design system
  • News Analysis: Redesigned layout, report pages, and filter controls
  • Products Hub: Refreshed hero, feature grid, FAQ, testimonials, CTA sections, and interactive demos
  • Email Client: Updated compose modal, AI scan panel, attachment intelligence, and nav sidebar
  • Drive: Revised file explorer, folder picker, upload manager, and auto-archive rules
  • Stream: Polished post cards, comment threads, DM panel, polls, and group sidebar
  • Country Pages: All 8 localized pages (BR, CN, ID, IN, JP, TH, TR, VN) updated to match
  • Legal & Info: Privacy, terms, cookies, disclaimer, methodology pages refreshed

Design Principles

The new theme follows these principles:

  • Clean backgrounds with precise border hierarchy (gray-100/200/300 scale)
  • Professional typography: system font stack with tighter tracking on headings
  • Consistent component patterns: cards, badges, buttons follow a single design language
  • Subtle hover states and transitions for interactive elements

Was this update useful?

#ui#design-system#ycharts#tailwind#theme