C4COMPARE | Market-Flow Visualization for Indian Traders

TERMINAL_HOME/

C4COMPARE Design Systemv1.0.0

SYS_SPEC: LIGHT TRADING TERMINAL

SPECIFICATION // 00

Design System & Component Showcase

Light, data-dense, high-precision aesthetic engineered for institutional Indian equity and F&O market intelligence.

01. Color Palette Tokens

13 Strict Palette Tokens

#EEF1F5

background

#EEF1F5

#FFFFFF

surface

#FFFFFF

#111111

foreground

#111111

#4B5563

muted

#4B5563

#D9DEE5

border

#D9DEE5

#15803D

bull

#15803D

#E3F3E9

bull-soft

#E3F3E9

#4CAF7A

bull-line

#4CAF7A

#B91C1C

bear

#B91C1C

#FBE3E1

bear-soft

#FBE3E1

#E5736E

bear-line

#E5736E

#3B5BDB

accent

#3B5BDB

#A16207

warn

#A16207

02. Typography Specimen (next/font)

Barlow Condensed + Inter + JetBrains Mono

Font 1 // Headings & Tickers

Barlow Condensed Bold

Used for primary display headings, tickers, index symbols, and terminal callouts.

NIFTY 50 // 22,485.40

BANKNIFTY // +480.20 (+1.01%)

SECTOR_FLOW ROTATION MATRIX

Font 2 // Body & UI Copy

Inter Sans Regular / Medium

Used for editorial descriptions, navigation items, tooltips, and informational copy.

Institutional market participants rotate capital between high-beta sectors during opening drive sessions.

Educational tool only. Trading in equity cash and F&O derivatives carries substantial risk.

Font 3 // Numbers & Labels

JetBrains Mono Tabular

Used for strict tabular alignment, price ladders, strikes, timestamps, and order deltas.

LATENCY:28.4ms

OI_TOTAL:14,892,100

DELTA_CUM:+184,200 LOTS

03. Tag Components (F&O Market States)

long-buildup, short-buildup, long-unwinding, short-covering

Core F&O Build-Up States

Long Build-Up (Price ↑ OI ↑)Short Build-Up (Price ↓ OI ↑)Long Unwinding (Price ↓ OI ↓)Short Covering (Price ↑ OI ↓)

Size Scale & Dot Indicators

XS BUILD-UPSM BUILD-UPMD BUILD-UPWITH DOTSHORT COVERHIGH VOLATILITYINSTITUTIONALFLAT // 0.0%

04. Button Components

Variants & Size Scale

Variants

Size Scale (xs, sm, md, lg)

05. StatCounter Components

Data-dense terminal metrics

Daily F&O Ticks

850M++14.2%vs avg

Put-Call Ratio (PCR)

0.82-0.08bearish

Tick Engine Latency

28.4ms< 50mstarget

Capital Rotation Delta

₹3,450 CrNET BUY

06. KeyValueRow Components

Mono label left, value right

NIFTY 22,500 CE // ORDER_BOOK

LONG BUILD-UP (+)

LTP / Strike Price

₹142.50(+12.4%)

Open Interest (OI)

8,420,150(+18.5%)

Change in OI

+1,315,500

Traded Volume

42.8M contracts

Implied Volatility (IV)

13.25%

Option Delta / Gamma

0.48 / 0.0034

BANKNIFTY 48,200 PE // ORDER_BOOK

SHORT BUILD-UP (-)

LTP / Strike Price

₹210.80(-18.2%)

Open Interest (OI)

5,940,200(+24.1%)

Change in OI

+1,154,200

Traded Volume

28.1M contracts

Implied Volatility (IV)

15.80%

Option Delta / Gamma

-0.42 / 0.0028

07. Composite Terminal Surface Card

Integrated components in a realistic panel

NIFTY IT SECTOR FLOWROTATION_ACTIVE

Live institutional money flow reconstruction across 10 top IT underlyings (TCS, INFY, HCLTECH).

Sector Delta

+₹1,240 Cr+2.8%

Aggressive Buyers

68.4%Dominant

Absorbed Volume

4.12M LotsHigh Liquidity

Top Long Build-up Contracts

TCS 4,100 CE

₹84.20(+28.4%)

INFY 1,840 CE

₹38.10(+31.2%)

HCLTECH 1,750 CE

₹24.50(+14.8%)

Institutional Absorption Metrics

Block Orders (> ₹1 Cr)

42 Transactions

Passive Limit Absorbed

84% of ask depth

Current VWAP Spread

+0.45% above VWAP

FEED: LIVE NSE TICK (28ms)SESSION: 11:45:20 IST // NORMAL_TRADING

08. FlowChartHero (Inline SVG & Framer Motion)

12s Loop Sequence: Curves → Tiles → Selected Stock → Sell-off

NSE_INSTITUTIONAL_FLOW

WINDOW: 09:15 - 10:30 IST

CYCLE_ACTIVE (12s)

SECTORCHG%

+1.62%

PSU BANK

+0.85%

AUTO

+0.42%

PHARMA

+0.18%

FMCG

-0.38%

TELECOM

-0.53%

CEMENT

-0.57%

BANK

-0.75%

OIL & GAS

-1.32%

REALTY

-1.44%

METAL

-1.88%

POWER

-2.16%

ADV: +4DEC: -8

ROTATION_DELTA:NET BEARISH (-75)

BULLISH (+69)

BEARISH (-144)

Upper: F&O Long Build-Up (+ Bull) Lower: F&O Short Build-Up (- Bear) Selected Track: OMEGA (- Short)

TICK_RATE: 120 FPS

F&O STOCKS SCANNERCLICK / HOVER FOR DETAIL

ALPHA[14]

+2.85%LONG BUILD-UP (+)

LIVE

BETA[09]

+1.94%LONG BUILD-UP (+)

LIVE

GAMMA[18]

+1.42%SHORT COVERING (+)

LIVE

DELTA[12]

+0.95%LONG BUILD-UP (+)

LIVE

EPSILON[06]

+0.64%SHORT COVERING (+)

LIVE

ZETA[15]

+0.38%LONG BUILD-UP (+)

LIVE

THETA[11]

-0.85%LONG UNWINDING (-)

LIVE

SIGMA[16]

-1.42%SHORT BUILD-UP (-)

LIVE

KAPPA[08]

-2.15%SHORT BUILD-UP (-)

LIVE

NEXUS[21]

-2.84%LONG UNWINDING (-)

LIVE

VERTEX[05]

-3.45%SHORT BUILD-UP (-)

LIVE

OMEGA[02]

-5.08%SHORT BUILD-UP (-)

SEL

6 LONG (+ BULL) // 6 SHORT (- BEAR)SORT: RELATIVE_STR

09. Shimmer Skeletons (/components/skeletons)

HeroSkeleton, FeaturesSkeleton, StepsSkeleton, FaqSkeleton, FooterSkeleton

HeroSkeleton (Left Bar List, Center Blob, Right Tile Grid)

FeaturesSkeleton (2x2 Cards Grid)

StepsSkeleton (3-Phase Flow)

FaqSkeleton (2-Column FAQ Items)

FooterSkeleton (Brand & Links)

10. StockDetailCard (/components/hero)

Pop-over card on hover & auto-cycle: Bear & Bull States

Displays real-time tick metrics, F&O build-up classification, conviction meters, and an inline SVG candlestick sequence with shaded supply and order block zones, VWAP curves, and horizontal support/resistance levels.

Bearish F&O Setup (OMEGA · -5.08%)Short Build-Up

OMEGA[Short (-)]

OMEGA · POWER & ENERGY

₹1,273.30-5.08% · -68.10[Loss (-)]

RANK

p0.7 · #2/144 ex-ø

+15.8% · SHORT BUILD-UP

VWAP

1,298.87

Z/R1

1,299.00 · 1,309.90

R:R

1:3.7

CONV

-1.26L · ▼ below VWAP

1,303.80 - 1,308.00

S1/S2

1,270.00 · 1,259.10

RULE

PICK · BEARISH #2

Bullish F&O Setup (ALPHA · +2.85%)Long Build-Up

ALPHA[Long (+)]

ALPHA · IT & TECH

₹3,842.50+2.85% · +106.40[Gain (+)]

RANK

p0.9 · #1/69 ex-ø

+24.2% · LONG BUILD-UP

VWAP

3,794.10

Z/R1

3,810.00 · 3,880.00

R:R

1:4.2

CONV

+3.45L · ▲ above VWAP

3,805.00 - 3,812.00

S1/S2

3,790.00 · 3,775.00

RULE

PICK · BULLISH #1