Skip to content
TerminalK

Design system

Tokens, primitives, patterns and templates for every TerminalK dashboard. Dark-first, dense by default, accessible (WCAG AA), colour-blind-safe market semantics.

v1Geist · Tailwind v4 · Radix/shadcn · Lightweight Charts · TanStack Table

Principles

Dark-first, calm

Near-black canvas, graphite surfaces, one signal-violet accent. Colour is reserved for meaning: market direction, status, series.

Numbers are the interface

Geist with tabular figures everywhere numbers align; hero figures large and quiet; every value carries its unit and freshness.

Direction is never colour-only

▲/▼ glyph + sign + label accompany teal/red. A blue/orange scheme is one click away for colour-blind users.

Density on demand

Compact, comfortable and spacious modes change row height, padding and type size from three tokens — no per-page tweaks.

Colour

Semantic roles only — components never use raw hex. Values shown are live for the current theme; ratios are WCAG contrast on the surface colour.

Surfaces

--page
App canvas
--surface
Widgets, sidebar
--surface-2
Hover, headers, inputs
--surface-3
Selected, pressed

Text

Aa
--ink
Primary · 16.1 / 19.9:1
Aa
--ink-2
Secondary · 7.4 / 7.7:1
Aa
--muted
Tertiary, axes · 5.6 / 5.8:1
Aa
--accent
Signal violet · 6.9 / 6.3:1

Market

--up
Up / risk-on / greed
--down
Down / risk-off / fear
Aa
--up-fg
Up as text · ≥ 5.2:1
Aa
--down-fg
Down as text · ≥ 5.3:1
up +1.84% down −0.62% unchanged ±0.00%up +2.1 VIXColour-blind check: deutan ΔE 11.6 dark / 12.0 light (target ≥ 8). Switch schemes in the display menu.

Status (icon + label always)

LiveRecentStaleUnavailable

Series (validated order — never cycled)

1
2
3
4
5
6
7
8

Typography

Geist Sans for UI, Geist Mono for tickers, codes and the wordmark. Tabular figures wherever numbers stack.

44 / hero68 / 100
26 / stat₹2,01,910 Cr
20 / page titleIndia Market Sentiment
14 / body largeSentiment improved 3.9 points over 1 week.
13 / body (default)Breadth deteriorated while FII selling slowed.
12 / smallCoverage 100% · freshness 100%
11 / labelFactor contribution
mono 12NIFTY 25300 CE · 2026-10-06

Spacing, radius, elevation & density

4 px base grid. Radius: 4 controls-inner · 6 controls · 10 widgets · 12 dialogs. Elevation by border + subtle shadow; popovers use the pop shadow.

4
8
12
16
24
32
48
r4
r6
r10
r12
raised
pop
Density tokens — --row-h 26/32/38 · --control-h 28/32/36 · --widget-pad 12/16/20 · --text-body 12/13/14 px. Try it from the display menu (sliders icon) or ⌘K → “density”.

Motion

Short, functional, interruptible. Everything respects prefers-reduced-motion.

--dur-fast
120 ms
Hover, press, toggles
--dur-base
180 ms
Popovers, grid moves, sidebar
--dur-slow
260 ms
Page-level transitions
--motion-ease
cubic-bezier(.16,1,.3,1)
Ease-out-expo for entrances

Primitives

shadcn-style components on Radix: keyboard-complete, focus-visible rings, token-driven.

NeutralBeta▲ Greed▼ FearStaleSYNTHETIC
Tabs switch sub-views inside a widget; arrow keys move between tabs.

Patterns

The building blocks every dashboard composes: widgets, stats, charts, tables, filters, and their loading/empty states.

India Market Sentiment🟢 Greed
68/ 100
1W down −5.41W
India VIX
13.42
1D up +6.1%1D
FII cash (5D)
−₹7,877Cr
vs prior 5D down −2.3k Crvs prior 5D
Source: NSE / NSDL · 2026-09-30

Sentiment scale

Live
0203545556580100

Loading state

Empty state

No option-chain data

Connect a provider or ingest chains to see this widget.

Factor contribution

Score around neutral 50 · points

Market Breadth
61+1.6
Liquidity
81+2.1
Valuation
31−0.7
FII/DII Flows
47−0.3
Credit
n/a
← feargreed →

Top positive drivers

  • Liquidity+2.1 pts
  • Earnings+1.7 pts
  • Breadth+1.6 pts

NIFTY vs sentiment

Stacked panes share the time axis and crosshair — never dual y-axes

NIFTY 5023,551Sentiment72.92latest
Data table
TimeNIFTY 50Sentiment
2026-04-1923,96470.72
2026-04-2023,97372.17
2026-04-2123,94372.42
2026-04-2223,86171.86
2026-04-2323,94771.37
2026-04-2423,95370.2
2026-04-2523,87371.56
2026-04-2623,85770.8
2026-04-2723,80370.3
2026-04-2823,83569.07
2026-04-2923,79167.94
2026-04-3023,83868.44
2026-05-0123,80667.37
2026-05-0223,88367.03
2026-05-0323,90567.09
2026-05-0423,89067.17
2026-05-0523,95367.03
2026-05-0623,89866.49
2026-05-0723,87466.96
2026-05-0823,86367.69
2026-05-0923,93767.62
2026-05-1023,95368.98
2026-05-1123,88269.47
2026-05-1223,82569.2
2026-05-1323,82670.19
2026-05-1423,78470.62
2026-05-1523,77070.72
2026-05-1623,77671.33
2026-05-1723,74970.1
2026-05-1823,66769.4
2026-05-1923,59270.88
2026-05-2023,63970.65
2026-05-2123,63569.23
2026-05-2223,64868.06
2026-05-2323,72466.74
2026-05-2423,65665.93
2026-05-2523,64365.86
2026-05-2623,59665.61
2026-05-2723,58064.98
2026-05-2823,49965
2026-05-2923,43666.24
2026-05-3023,48166.61
2026-05-3123,54766.97
2026-06-0123,46668.35
2026-06-0223,47768.8
2026-06-0323,44067.99
2026-06-0423,41669.42
2026-06-0523,37170.28
2026-06-0623,41771.04
2026-06-0723,41970.68
2026-06-0823,37470.52
2026-06-0923,40170.86
2026-06-1023,47471.11
2026-06-1123,55869.77
2026-06-1223,54068.91
2026-06-1323,62470.44
2026-06-1423,68271.99
2026-06-1523,67073.43
2026-06-1623,59972.16
2026-06-1723,55172.92

Virtualised data table

1,000 rows · sortable · ↑/↓ to move · heat column

Instruments

Stat skeleton

Chart skeleton

Table skeleton

Empty state (standalone)

No alerts yet

Alerts are never created automatically. Start from a template.

Sample screens

Two India Sentiment screens composed entirely from system patterns (widget grid, virtualised chain table, stacked chart panes).

India Sentiment · Terminal

Widget grid (drag / resize / save), hero stats, factor contributions, NIFTY vs sentiment panes, 20 questions.

India Sentiment · Option Chain

Filter bar, stat row, virtualised chain table with heatmaps, intraday pressure panes, expiry structure.