01 Typography

All text uses var(--fr-font) (Sora). Seven scale levels from display to caption.

.fr-text-display

Display Heading

.fr-text-h1

Heading 1 — 24px 700

.fr-text-h2

Heading 2 — 20px 700

.fr-text-body

Body text paragraph with enough words to show line-height and weight. The quick brown fox jumps over the lazy dog. This demonstrates the default reading experience.

.fr-text-small

Small text — 13px 500

.fr-text-caption

Caption text — 12px 400

.fr-text-eyebrow

Eyebrow Label — 11px 600 uppercase

02 Colors & Tokens

Every color is a --fr-* CSS variable. Toggle dark mode to see overrides.

Core Brand (Green / Red / Dark)

--fr-green Primary CTA, Bullish

--fr-green-light Gradient end

--fr-red Bearish, Error, Danger

--fr-text Primary text (dark)

Semantic (Signal / Status)

--fr-orange Warning

--fr-blue Info, Links

Surfaces

--fr-bg Page bg

--fr-card-bg Card bg

--fr-border Default border

--fr-border-hover Hover border

Text

--fr-text Primary text

--fr-text-secondary Secondary

--fr-text-muted Muted / Captions

SEC Filing Badges — Temperature Coding

--fr-cool-green 10-Q badge

--fr-slate-blue 13F badge

--fr-warm-stone S-1 badge

--fr-neutral-gray 6-K badge

03 Spacing Scale

Six-step scale from 4px to 48px. All layout spacing references these tokens.

--fr-space-xs

--fr-space-sm

--fr-space-md

--fr-space-lg

--fr-space-xl

--fr-space-2xl

04 Cards

Three variants: default (hover + green bar), static (no hover), compact (reduced padding).

.fr-card

Default Card

Hover for effect

Green top bar + lift on hover

.fr-card--static

Static Card

No hover effect

For forms, content, settings

.fr-card--compact

Compact Card

Reduced padding

For dense data layouts

05 Buttons

Six button types. Primary (CTA), secondary (outline), pill (toggle), danger (destructive), outline-danger, full-width modifier.

.fr-btn-full

06 Tabs

Click tabs to switch content. Default and compact variants. Scrollable on mobile via .fr-scroll-x.

.fr-tabs (interactive)

This is the Overview panel. Tab content switches without page reload.

This is the Details panel. Each tab maps to a panel via data-panel.

This is the Chart panel. In production, this would contain a Chart.js canvas.

This is the Settings panel. Used for configuration options.

.fr-tabs.fr-tabs--compact

07 Table

Standard data table with hover rows. Wrap in .fr-scroll-x for mobile overflow.

Ticker	Company	Price	Change	Signal
AAPL	Apple Inc.	$187.44	+2.3%	Bullish
TSLA	Tesla Inc.	$248.91	-1.8%	Bearish
NVDA	NVIDIA Corp.	$721.33	+4.1%	Neutral

08 Tags & Tokens

All inline labeling: signal badges, stat pills, filter chips, small badges, and selectable pills.

Signal Badges

Bullish Bearish Neutral

Stat Badges

1,247 Transactions 89 Clusters $2.4B Total Value

Filter Chips

Technology × Healthcare ×

Small Badges

Tab Label NEW Feature BETA

Selectable Pills

Click to toggle active state. .fr-pill

All Technology Healthcare Energy Financials Real Estate

09 Progress Bar

Animated shimmer gradient bar. Set width via inline style.

25%

60%

90%

10 Forms

Text input, select, compact variants, form groups, form rows, textarea, checkboxes, accent links.

.fr-input

.fr-select

.fr-input--compact

.fr-select--compact

Form Groups & Rows

First Name

Last Name

Message

Changes saved successfully.

Please fill in all required fields.

Checkboxes & Links

.fr-checkbox

Email notifications SMS alerts Weekly digest

.fr-link

Read our terms of service and privacy policy.

Input Nesting Rule (Mandatory)

Inputs inside rounded containers MUST have matching border-radius. Formula: inner-radius = container-radius − container-padding (min 4px). The CSS enforces this automatically for .fr-input and .fr-select inside .fr-filter-bar, .fr-card, .fr-card--static, and .fr-modal-content.

Correct

Wrong — border-radius: 0

11 Page Layouts

Three canonical page wrappers. Every page uses exactly one.

.fr-page--data

Header

Filter Bar

Data Table / Grid

insiders, screener, signals, sectors, news, SEC

.fr-page--centered

Title

Form Card

Actions

.fr-page--sidebar

Nav

Content

Form

account

12 Page Headers

Standard data page header (title + actions in flex row) and centered header.

.fr-page-header

.fr-page-header--centered

13 Filters

Filter bar with green left accent, grid rows of label+input pairs. Stacks on mobile.

.fr-filter-bar > .fr-filter-row > .fr-filter-group

14 Feedback & Alerts

Info bars, inline messages (error, success, muted), and toast notifications.

Info Bar

Insider transactions are sourced from SEC Form 4 filings. Data is updated daily at 6:00 PM ET. Cluster detection uses a proprietary algorithm that identifies coordinated buying patterns within a 14-day window.

Inline Messages

Your watchlist has been saved successfully.

Failed to load data. Please try again.

Loading transactions...

Toast Notification

.fr-toast

15 Modals

Modal overlay with backdrop blur. Actions stack on mobile.

16 Navigation

Sidebar nav links with active state, and breadcrumb trail.

.fr-sidebar-nav

.fr-breadcrumb

17 Mobile Patterns

Three mobile strategies: horizontal-scrolling tables (sectors pattern), horizontal pill scrolling, and card view replacing table rows.

Scrollable Data Table (Sectors Pattern)

Wrap .fr-table inside .fr-scroll-x. On mobile, columns scroll horizontally while the first column stays readable. This is the primary mobile table pattern used on sectors, screener, and insiders pages.

Sector	Price	1D %	1W %	1M %	3M %	YTD %	1Y %	Stocks	Signal
Technology	$412.87	+1.2%	+3.4%	+7.1%	+12.3%	+18.6%	+29.4%	387	Bullish
Healthcare	$298.45	-0.3%	+1.1%	-2.4%	+4.2%	+6.8%	+11.2%	412	Neutral
Energy	$156.22	-1.8%	-3.2%	-5.6%	-8.1%	-12.4%	-7.3%	198	Bearish
Financials	$334.19	+0.8%	+2.1%	+5.3%	+9.7%	+14.2%	+22.8%	356	Bullish

Scrollable Pills

.fr-scroll-x

All Sectors

Technology

Healthcare

Energy

Financials

Consumer Discretionary

Industrials

Materials

Utilities

Real Estate

Communication Services

Mobile Card View (Table Replacement)

.fr-mobile-card

AAPL Bullish

Price $187.44

Change +2.3%

Volume 64.2M

TSLA Bearish

Price $248.91

Change -1.8%

Volume 38.1M

18 Charts

Standard chart containers at three height presets. Responsive height on mobile.

--short

200px / 160px mobile

.fr-chart-container

300px / 240px mobile

--tall

400px / 300px mobile

19 Loading States

Spinner loading indicator and skeleton content placeholders.

.fr-loading

Loading data...

.fr-skeleton

20 Premium Gate

Upsell container shown when premium content is locked.

Premium Feature

Upgrade to FinRadar Pro to unlock advanced insider tracking, real-time alerts, and cluster detection.

21 FAQ

Accordion-style FAQ with toggle animation. Click to expand.

FinRadar aggregates data from SEC EDGAR filings (Form 4, 13F), real-time market feeds, and proprietary signal algorithms to deliver actionable insights.

Insider transaction data is updated daily at 6:00 PM ET, within hours of SEC filing publication.

Yes. All data tables support CSV export via the download button in the table header. Premium users can export up to 10,000 rows per download.

22 Shadows

Four-tier shadow system. Glow uses green accent for hover states.

.fr-shadow-sm

.fr-shadow-md

.fr-shadow-lg

.fr-shadow-glow

23 Animations

Built-in animation utilities. Shimmer visible on progress bars and skeletons above.

cardReveal

Slide Up + Fade

.fr-animate-card-reveal

contentFade

Subtle Fade

.fr-animate-content-fade

meshFloat

24 Utilities

Visual separators and in-card section headings.

Account Details

Email: user@example.com

Subscription

Plan: Pro (Monthly)

25 Breakpoint Reference

Canonical breakpoints. No other values permitted.

Token	Value	Purpose
--mobile	max-width: 480px	Small phones
--tablet	max-width: 768px	Tablet / mobile boundary
--desktop	min-width: 769px	Desktop starts here
--desktop-lg	min-width: 1024px	Wide desktop layouts
--desktop-xl	min-width: 1600px	Ultra-wide

FinRadar Design System v2.0 · Phase 20 · 60 Components · 5 Canonical Breakpoints

Deep analytics tools for smart investing

Stock Research Hub with live charts and financials
Stock Screener with advanced filters
Daily, Weekly, and Monthly stock signals
Signal Pulse sector rotation heat map
13F analytics for 8,000+ hedge funds
13F aggregation with sector, industry, dollar flow, and share change filters
Per-stock historical fund trends
Custom hedge fund baskets
Grouped hedge fund analysis (complete and ongoing quarters)
Custom fund basket builder with personalized aggregations
Live insider trading tracker
Saved insider filter presets with notifications
Live SEC filings feed
Real-time news aggregator
Macro economy dashboard with ETF signals
ETF analytics and interactive charts
ETF pairs correlation dashboard
Sector and industry heatmaps with daily analytics
Retirement planner with rebalancing, tracking, and reporting
Multi-client retirement plans with exportable reports
Watchlist with favorites tracking

Get free access to FinRadar

Create your free account

First Name*

Last Name*

Work Nature*

Username*

Email*

Password* (min 8 characters)