TheStreet Pro

Overview

TheStreet Pro is a premium financial intelligence platform designed for serious investors seeking expert-curated market analysis, actionable trade alerts, and portfolio management tools. The brand embodies a "Professional Clarity" aesthetic—combining the precision of financial data visualization with the accessibility of modern web design. The UI employs a clean, light-dominant palette anchored by a confident primary blue (#1a6dba) that signals trust and authority, supported by secondary accent blues and purples that create visual rhythm without overwhelming the content hierarchy. The emotional response is one of competence and calm: users feel they're accessing insider knowledge presented with journalistic rigor. Voice: authoritative yet conversational, data-driven but never jargon-heavy. Example sentence: "This morning's earnings surprise signals a potential reversal—here's what the chart tells us."

Colors

TheStreet Pro's color system prioritizes clarity and trust through a sophisticated blue-dominant palette. Primary (#1a6dba) is the signature accent used on all call-to-action buttons, active navigation states, and key interactive elements—it conveys financial authority and confidence. Secondary (#2f8ec6) provides a lighter, more approachable blue for hover states and supporting UI elements, creating a visual hierarchy that guides users through complex data. Tertiary (#633f8d) introduces a subtle purple accent for secondary actions and status indicators, adding visual sophistication without competing for attention. The surface stack is anchored in pure white (#ffffff) for maximum content legibility, with carefully calibrated grays (surface-container-high: #d1d5db, outline-variant: #d1d5db)

Typography

TheStreet Pro uses Rubik as its primary typeface across all scales, chosen for its geometric clarity and professional neutrality—essential for financial content where precision is paramount. The type hierarchy is built on a 4px baseline grid: display (60px, 700 weight) anchors hero sections with -0.04em letter-spacing for visual tightness; headline-lg (40px, 600 weight) introduces major sections; headline-md (28px, 600 weight) breaks up content into digestible chunks; body-md (16px, 400 weight) carries the primary reading experience with 24px line-height for comfortable scanning of market analysis; label-md (14px, 600 weight, 0.01em tracking) emphasizes UI labels and badge text. All headlines use -0.01em to -0.02em letter-spacing to create visual compression and authority. Body text mainta

Layout

TheStreet Pro employs a fluid 12-column grid with a fixed max-width of 1100px, centered on viewport. The gutter is consistently 24px (md spacing), creating breathing room around content blocks without introducing excessive whitespace. Section separation uses lg spacing (40px) vertically to establish clear content zones—hero section, featured articles, portfolio cards, and footer each occupy distinct visual territory. The container max-width of 1100px balances content width (optimal for reading financial tables and charts at 65-75 characters per line) with sidebar real estate for secondary navigation or watchlists. Horizontal padding scales responsively: 24px on tablet/desktop, 16px on mobile. Cards and content blocks use md spacing (24px) for internal padding, with sm spacing (12px) for ti

Elevation & Depth

Depth in TheStreet Pro is conveyed through a restrained shadow system that prioritizes content clarity over visual drama. Level 1 (Base/Cards): box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05)—a hairline shadow that defines card boundaries without drawing attention. Level 2 (Hover/Elevated): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08)—applied on card-hover and interactive elements to signal elevation and interactivity. Level 3 (Modals/Overlays): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12)—reserved for modals, dropdowns, and floating panels that must visually separate from the page. Navigation uses no sh

Shapes

TheStreet Pro employs a "Geometric Precision" shape philosophy—rounded corners are minimal and purposeful, reflecting the analytical nature of financial data. Buttons and badges use rounded.lg (0.75rem / 12px) for a modern, approachable feel while maintaining professional restraint. Cards and input fields use rounded.md (0.5rem / 8px) for subtle definition without softness. Navigation items and small UI elements use rounded.sm (0.125rem / 2px) or remain square (0px) to maintain visual hierarchy—the less interactive an element, the sharper its corners. The gradient accent bar beneath the header

Components

Action Elements Buttons follow a two-tier system: button-primary (background: #1a6dba, text: white, padding: 12px 24px, height: 44px, rounded: 12px) for primary CTAs like "Sign In" and "Become A Member"; button-secondary (transparent background, text: #1a6dba, 1px border: #1a6dba) for secondary actions. Both use label-md typography (14px, 600 weight) and transition to button-primary-hover (background: #2f8ec6) on hover with 200ms ease-in-out timing. Links use link-primary (text-color: #1a6dba, no underline by default) with link-primary-hover (text-color: #2f8ec6, underline) to signal interactivity. Badges appear in two variants: badge (background: #1a6dba, text: white, padding: 6px 10px, rounded: 2px, label-sm typography) for primary tags like "Daily Diary" and "Portfolio"; badge-secon

Do's and Don'ts

**Do**

• Do use primary blue (#1a6dba) exclusively on CTAs and active states—it signals financial authority and guides user attention through the interface.
• Do maintain 24px gutter spacing between major content sections to create visual breathing room and prevent cognitive overload when scanning market data.
• Do apply 200ms ease-in-out transitions on all interactive elements (buttons, cards, links) to signal responsiveness without feeling sluggish or jarring.
• Do use Rubik 600 weight for all labels and UI text (label-md, label-sm) to create visual hierarchy and distinguish interactive elements from body content.
• Do employ the gradient accent bar (8px height, linear-gradient 270deg) beneath the header on every page to reinforce brand identity and create visual continuity.

**Don't**

• Don't use secondary blue (#2f8ec6) or tertiary purple (#633f8d) as primary button backgrounds—reserve them for hover states and supporting UI to maintain visual clarity.
• Don't apply shadows stronger than 0 8px 24px rgba(0,0,0,0.12)—excessive depth obscures content and contradicts the platform's emphasis on data clarity.
• Don't round corners beyond 12px on any UI element—the brand's geometric precision demands sharp, intentional shapes that reflect financial rigor.
• Don't use body text smaller than 16px (body-md) for primary reading content—financial analysis requires comfortable line lengths and legible type sizes to prevent user fatigue.
• Don't mix typefaces—Rubik is the sole typeface family; avoid system-ui, sans-serif, or serif fallbacks that fragment the visual system.