traderpublic

Overview

traderpublic is a regulatory-focused financial research platform that democratizes broker verification and market intelligence. It serves retail traders, institutional researchers, and compliance professionals who demand evidence-based analysis over marketing narratives. The design aesthetic is "Regulatory Clarity"—a fusion of professional financial UI conventions with approachable, human-centered information architecture. The interface evokes trust through systematic hierarchy, transparent data sourcing, and deliberate use of the brand's signature cobalt blue (#2c64eb) as a signal of verified, actionable intelligence. Every interaction reinforces the brand's core promise: no rankings, no endorsements, only published facts.

The voice is authoritative yet conversational, precise without jargon, and skeptical of hype. Sentences are direct and evidence-anchored. Example: "We checked the regulator's own register—here's what we found." The brand personality rejects both the breathless urgency of trading apps and the opacity of traditional financial institutions. It speaks to users as peers conducting due diligence, not as consumers being sold a product.

Colors

The color system balances regulatory authority with accessible clarity. Primary (#2c64eb) is a professional cobalt that signals verified information and interactive trust—used exclusively on CTAs, links, and focus states. It appears in 6% of the interface, ensuring it commands attention without overwhelming. Secondary green (#71b219) represents positive verification states and regulatory compliance checkmarks; it appears on success badges and confirmed broker records. The navy hero background (#111e32) creates a contained, authoritative space for the value proposition, contrasting sharply with the white surface (#ffffff) that dominates the rest of the page. Surface grays (#f7f8fa, #e9e9e9) establish a calm, scannable information hierarchy without the sterility of pure white. Error red (#c9

Typography

The type system pairs IBM Plex Sans (headlines, labels, UI) with Roboto (body copy), creating a hierarchy that balances authority with readability. IBM Plex Sans at 700 weight conveys regulatory confidence and institutional credibility; Roboto's 400 weight ensures body text remains approachable and scannable at 16px/24px line height. Display (56px, -0.02em tracking) is reserved for hero statements; headline-lg (43.52px, -0.015em) anchors major sections; body-md (16px, 0.005em) is the workhorse for research content and broker details. Labels use IBM Plex Sans 600 at 14px with 0.01em tracking to create visual separation in forms and navigation. On small labels over busy backgrounds (e.g., badge text on colored containers), apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) to ensure legibility.

Layout

The page uses a 12-column fluid grid with a 1200px max-width container, centering content on desktop while maintaining full-bleed hero sections. The hero spans the full viewport width with a navy background (#111e32), creating a contained, authoritative zone for the primary value proposition. Below the hero, the main content grid uses 24px gutters (md spacing) between columns and 40px (lg spacing) for section separation, creating a rhythm that guides users through research flows. The search bar and broker lookup form occupy a right-aligned card (40% width on desktop) within the hero, establishing a clear visual hierarchy: statement on the left, action on the right. Mobile breakpoints collapse to single-column layout at 768px, with 12px gutters (sm spacing) and 24px section margins. The con

Elevation & Depth

Depth is conveyed through a three-tier shadow system that reflects the regulatory transparency ethos—shadows are subtle and honest, never deceptive. Level 1 (cards, inputs): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), a soft 8px blur that lifts elements 2-3px off the surface. Level 2 (modals, dropdowns): box-shadow: 0 10px 30px rgba(20, 38, 69, 0.08), a 30px blur that creates clear separation without drama. Level 3 (reserved for future use): box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12). All shadows use rgba(0, 0, 0, ...) with opacity between 0.08–0.15, avoiding pure black which would feel harsh.

Shapes

The shape philosophy is "Regulatory Softness"—rounded corners are used strategically to humanize a formal interface without sacrificing professionalism. Buttons use 10px radius (md), a subtle curve that feels modern and approachable while maintaining clear clickability. Input fields and dropdowns use 6px radius (DEFAULT), a tighter curve that signals form-like precision. Cards use 18px radius (lg), creating a distinct container that feels like a contained research artifact. The full-radius (999px) is reserved for badges and pills, emphasizing their role as discrete, scannable labels. The hero

Components

Action Elements Buttons are the primary call-to-action mechanism. Primary buttons (button-primary) use #2c64eb background, white text, 11px vertical / 26px horizontal padding, and 10px border-radius. On hover, the background shifts to #1f4fc7 (a 20% darker blue), with a 150ms transition: background-color 150ms ease-out. The button height is 44px, accommodating touch targets on mobile. Secondary buttons (button-secondary) use a transparent background with a 1px solid #2c64eb border and #2c64eb text; on hover, they fill with #f2f6fe (primary-container) and maintain the border. Ghost buttons (button-ghost) have no border or background; on hover, they gain a #f4f5f7 background. All buttons use IBM Plex Sans 600 at 14px with 0.01em letter-spacing.

Containers & Surfaces Cards (card) are