name: cockpit-design
version: alpha
description: >
  Cockpit is a dense, dark-navy trading terminal built entirely in monospace. The
  surface is a near-black navy (#0A0F1C) split into hairline-gridded panels (#0E1424 /
  #111A2E) divided by 1px slate lines (#1B2538) over a pure-black gutter. Two market
  "voltages" carry all signal: bid-green (#26D07C) and ask-red (#FF4D4D), with an
  amber-gold (#F5C451) reserved for focus, selection, the active tab, and the equity
  badge. Type is JetBrains Mono everywhere (Inter is loaded but never applied), set in
  three fixed micro sizes (10/12/16px). Nothing is rounded, nothing casts a shadow —
  depth is built purely from hairlines, panel-fill contrast, depth-bar tints, and
  brief green/red flash animations on every price tick.
colors:
  # Surface
  navy: '#0A0F1C'        # page background + inverted text on gold fills
  panel-1: '#0E1424'     # primary panel fill (order book, chart, blotter, tape)
  panel-2: '#111A2E'     # chrome bars (top status strip, bottom command bar)
  gutter: '#000000'      # 1px grid gaps between panels (grid gap background)
  # Brand / Voltages
  bid: '#26D07C'         # bid green — up ticks, longs, positive P&L, live status
  ask: '#FF4D4D'         # ask red — down ticks, shorts, negative P&L
  gold: '#F5C451'        # amber — focus outline, active tab, selection, equity badge, cursor
  # Text
  text-white: '#FFFFFF'  # symbols, headers, key values
  text-bright: '#CDD6E4' # secondary numerics (size, avg, fill price)
  fog: '#8B97A8'         # muted body / labels / axis text (default text color)
  # Hairlines
  line: '#1B2538'        # panel borders, dividers, the active-tab box
  row-line: '#11182B'    # per-row bottom border in ladder/blotter
  # Tints (overlays)
  bid-depth: 'rgba(38,208,124,.10)'   # bid depth bar background
  ask-depth: 'rgba(255,77,77,.10)'    # ask depth bar background
  gold-spread: 'rgba(245,196,81,.14)' # order-book spread row fill
typography:
  display:
    fontFamily: "'JetBrains Mono', monospace"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 19px
  label:
    fontFamily: "'JetBrains Mono', monospace"
    fontSize: 10px
    fontWeight: 400
    lineHeight: 13px
  data:
    fontFamily: "'JetBrains Mono', monospace"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 15px
  brand:
    fontFamily: "'JetBrains Mono', monospace"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 15px
    letterSpacing: 1.6px
    textTransform: uppercase
rounded:                  # no radius anywhere — every edge is sharp
  none: 0px
spacing:                  # base unit 4px; expressed via Tailwind px-/py-/gap-
  px: 1px
  xs: 4px
  sm: 8px
  md: 12px
components:
  status-strip:
    backgroundColor: '{colors.panel-2}'
    textColor: '{colors.fog}'
    typography: '{typography.label}'
    rounded: '{rounded.none}'
    padding: 'px-3 py-2 per cell; cells split by 1px {colors.line} dividers'
  equity-badge:
    backgroundColor: '{colors.gold}'
    textColor: '{colors.navy}'
    typography: '{typography.label}'
    rounded: '{rounded.none}'
    padding: 'px-2 py-px, font-bold, prefixed with ⚑'
  panel:
    backgroundColor: '{colors.panel-1}'
    textColor: '{colors.fog}'
    rounded: '{rounded.none}'
    padding: 'header px-3 py-2 with 1px {colors.line} bottom border'
  panel-header:
    backgroundColor: '{colors.panel-1}'
    textColor: '{colors.text-white}'
    typography: '{typography.brand}'
    rounded: '{rounded.none}'
    padding: 'px-3 py-2, font-bold tracking-widest, gold accent on right'
  ladder-row:
    backgroundColor: '{colors.panel-1}'
    textColor: '{colors.text-bright}'
    typography: '{typography.data}'
    rounded: '{rounded.none}'
    padding: 'px-3, height 24px, 1px {colors.row-line} bottom; price in bid/ask color; depth bar tint behind'
  spread-row:
    backgroundColor: '{colors.gold-spread}'
    textColor: '{colors.gold}'
    typography: '{typography.data}'
    rounded: '{rounded.none}'
    padding: 'px-3, height 24px, top+bottom 1px {colors.gold} border'
  tab:
    backgroundColor: 'transparent (active: {colors.gold})'
    textColor: '{colors.fog} (active: {colors.navy})'
    typography: '{typography.label}'
    rounded: '{rounded.none}'
    padding: 'px-2 py-1, group boxed in 1px {colors.line}, dividers between'
  command-bar:
    backgroundColor: '{colors.panel-2}'
    textColor: '{colors.text-white}'
    typography: '{typography.data}'
    rounded: '{rounded.none}'
    padding: 'px-3 py-2, top 1px {colors.line}; gold prompt + blinking gold cursor; F-key hints in gold'
  focus-ring:
    backgroundColor: 'transparent'
    textColor: 'inherit'
    rounded: '{rounded.none}'
    padding: 'outline 1px solid {colors.gold}, outline-offset -1px'
motion:
  flash-up: 'fu .3s ease-out — bg fades from rgba(38,208,124,.45) to transparent on up ticks'
  flash-dn: 'fd .3s ease-out — bg fades from rgba(255,77,77,.45) to transparent on down ticks'
  ladder-shift: 'anime.js translateY snap of one 24px row, duration 90ms, outQuad, every 1.3s'
  cursor-blink: 'fu 1s infinite on the gold block caret in the command bar'
  equity-spark: 'anime.js draw-on of the equity sparkline, duration 1100ms, outCubic'
  ticks: 'setInterval-driven updates: ladder 1.3s, blotter 1.1s, net P&L 1.4s, fills 1.7s, chart drift 2s, clock 1s'
icons:
  library: unicode glyphs (no icon font)
  style: 'inline characters — ▣ logo, ⚑ equity flag, ● feed dot, > prompt; latency rendered as colored bar divs'
  sizes: { sm: 10px, md: 12px, lg: 16px }
  color: '{colors.gold}'

Cockpit

cockpit-design · alpha

Design spec — version alpha. Source: static HTML (index.html); tokens read from inline styles + class rules. Fictional/sample product; described factually.

Overview

Cockpit is a single-screen, full-bleed trading terminal that reads like a Bloomberg-era DOM rig restyled for a dark room. The entire app lives on a near-black navy (#0A0F1C), carved into a fixed 300px / 1fr two-column grid: a full-height order-book ladder on the left, and on the right a stacked layout of price chart, positions blotter, and a P&L tape. Panels are filled with a slightly lifted navy (#0E1424) and separated not by margins but by a literal 1px black gutter (gap:1px over a #000 grid background), so the whole thing looks etched. Top and bottom chrome bars use a cooler panel fill (#111A2E) and hold a stream of micro status cells split by vertical hairlines (#1B2538). Color is strictly functional: green (#26D07C) is bid/long/up, red (#FF4D4D) is ask/short/down, and amber-gold (#F5C451) is the operator's color — focus outlines, the active timeframe tab, the spread row, the equity badge, F-key hints, and the blinking command cursor. Everything is JetBrains Mono at 10, 12, or 16px; nothing has a radius; nothing has a shadow. Depth and life come instead from hairline grids, translucent depth bars, and sub-second green/red flash animations firing on every simulated tick.

Colors

Surface. The page and the scroll container are painted --navy #0A0F1C, which doubles as the inverted text color on gold fills (equity badge, last-price tag, active tab). Two panel fills layer on top: --p1 #0E1424 for content panels (order book, chart, blotter, tape) and --p2 #111A2E for the top status strip and bottom command bar. Between panels sits a pure-black gutter (#000) exposed through 1px grid gaps.

Voltages (brand). Three signal colors do all the work. --bid #26D07C (green) marks bids, long positions, positive P&L, the LIVE session, and the feed dot. --ask #FF4D4D (red) marks asks, shorts, and negative P&L. --gold #F5C451 (amber) is the operator accent: focus rings (.row-focus:focus), the active tab (.tab-active), the spread row border, the equity badge, the > prompt, F-key labels, and the blinking caret.

Text. Default text is muted --fog #8B97A8. Headers, symbols, and key values jump to #FFFFFF; secondary numerics (order size, average price, fill price) use a softer #CDD6E4.

Hairlines. --line #1B2538 draws all panel borders, the status-cell dividers, the tab box, and the chart timeframe selector. Table rows use a darker #11182B bottom border.

Tints. Depth bars behind ladder rows use rgba(38,208,124,.10) (bid) and rgba(255,77,77,.10) (ask); the spread row fills with rgba(245,196,81,.14). Flash animations briefly hit 45% opacity green/red.

Typography

The whole UI is set in JetBrains Mono (weights 400/500/700), loaded from Google Fonts. Inter is imported in the same @import but is never actually applied — .inter exists as a class and goes unused, so the rendered design is 100% monospace. There is no bespoke face to substitute; JetBrains Mono is itself open-source. Sizing is a tight three-step ladder defined as .t10 / .t12 / .t16, with tracking only on the brand/header text (tracking-widest ≈ 0.1em).

Token	Size	Weight	Line-height	Tracking	Usage
display	16px	700	19px	—	NQ symbol, chart price, net P&L headline
data	12px	400	15px	—	ladder cells, blotter rows, command line
label	10px	13px →	400	—	status cells, column headers, fills, hints
brand	12px	700	15px	widest	panel titles, ▣ COCKPIT logo

Layout

Base unit is 4px, applied through Tailwind utilities (px-3=12, py-2=8, gap-2/3/4, py-px=1). The app is a fixed full-viewport (fixed inset-0) flex column with a minimum width of 1024px, so it behaves like a desktop terminal, not a responsive site. From top to bottom: (1) a status strip, (2) the main body grid of 300px 1fr with a 1px black gutter, and (3) a command bar. The right column is itself a grid of rows 1.45fr / 1fr, and its lower row splits again into 1.3fr / 1fr (blotter / P&L tape). Charts render to <canvas> elements pinned absolute inset-0. Whitespace is deliberately minimal — information density is the aesthetic; every panel is gridded edge-to-edge with hairline column rules.

Elevation & Depth

There are no box-shadows and no border-radius anywhere. Depth is constructed entirely from (a) the two-step panel-fill contrast (#0E1424 panels over a #0A0F1C/#000 ground), (b) 1px hairline borders (#1B2538 between panels, #11182B between rows), (c) translucent horizontal depth bars inside ladder rows, and (d) motion — flash backgrounds that decay to transparent. No glass/backdrop-filter, no glow. Custom scrollbars are 6px with a --line-colored thumb on a transparent track.

Shapes

Uniformly sharp. Every panel, badge, tab, button, and row is a perfect rectangle (rounded: none / 0px). The pill, the soft card, and the circle are all absent — the only non-rectangular elements are unicode glyphs (▣ ⚑ ● >). This squared geometry is core to the "hardware terminal" read.

Components

• Status strip — --p2 bar, t10 muted text, cells separated by 1px --line vertical rules, px-3 py-2 each. Left: ▣ COCKPIT logo (gold, bold), v2.1, SESSION RTH·LIVE (green), LATENCY bar-graph + 4ms, FEED ● CME·ICE·COMEX. Right: EQUITY badge, BP, clock.
• Equity badge — solid gold (#F5C451) fill, navy text, px-2 py-px, bold, ⚑ $248,412.50.
• Panel header — white font-bold tracking-widest title (e.g. ORDER BOOK · NQ), 1px --line bottom border, a gold or muted accent on the right (DOM, 4 OPEN, RTH).
• Ladder row — 24px tall, 3-col grid (size / price / depth), price colored bid/ask, #CDD6E4 size, fog depth %, a translucent depth bar pinned left (bid) or right (ask), row-focus gold outline on focus.
• Spread row — gold-tinted fill (rgba(245,196,81,.14)) with top+bottom gold borders, all-gold text: SPREAD / mid price / 0.25.
• Timeframe tabs — boxed in 1px --line, items px-2 py-1; active tab (5m) inverts to gold fill + navy text via .tab-active.
• Blotter row — 30px tall, 7-col grid (SYM SIDE QTY AVG LAST uPnL %CHG), white symbol, green/red side + P&L, focused row carries a gold outline.
• P&L tape — NET P&L headline (t16 green/red), REALIZED sub, an equity <canvas> sparkline, then a scrolling FILLS list (t10, time / side+qty+sym / price).
• Command bar — --p2 bar, gold > prompt, red SELL, white order text, a blinking gold block cursor, and F-key hint chips (F1 BUY, F2 SELL, F3 FLATTEN, ESC CANCEL) with gold key labels.

Motion

Motion is constant and micro, simulating a live feed. Two keyframe animations, fu (flash-up) and fd (flash-down), fade a 45%-opacity green/red background to transparent over 300ms and fire on every changed price cell. The order-book ladder snaps with an anime.js translateY of ~10px over 90ms (outQuad) on each 1.3s tick. The command-bar caret uses fu 1s infinite as a blink. The equity sparkline draws on via anime.js over 1100ms (outCubic), with a setInterval fallback. Update cadences: ladder 1.3s, blotter 1.1s, net P&L 1.4s, fills 1.7s, chart drift 2s, clock 1s. Canvas charts (candles + volume + last-price line, equity spark) are hand-drawn to <canvas> and redrawn on resize.

Iconography

No icon font. Iconography is unicode glyphs: ▣ (logo), ⚑ (equity flag), ● (feed status dot), > (command prompt), plus directional +/- prefixes on numbers. The latency indicator is a tiny bar chart built from five colored <i> divs (green/gold/line). Glyph accents are gold or green depending on role. Logical sizes track the type scale (10/12/16px). Icons are decorative-functional — they reinforce status, never act as standalone clickable controls.

Do's and Don'ts

• Do keep everything in JetBrains Mono and on the 10/12/16px scale.
• Do reserve gold strictly for operator state: focus, selection, active tab, equity, command cursor, F-keys.
• Do separate panels with the 1px black gutter and --line hairlines, not margins.
• Do color every number by direction — green up/long, red down/short.
• Do flash cells green/red on change to signal liveness.
• Don't introduce border-radius, drop shadows, or glass — the system is sharp and flat.
• Don't apply Inter or any non-mono face; the imported Inter is intentionally unused.
• Don't add a fourth type size or use gold as a generic accent.
• Don't let the layout reflow responsively below 1024px — it is a fixed terminal.

Known Gaps

• Inter is loaded via @import but never applied; documented as unused. The realized font is entirely JetBrains Mono.
• Brand-text tracking-widest is Tailwind's 0.1em; expressed as ~1.6px on the 16px display and approximate elsewhere since it scales with font size.
• Several values live only in JS-generated inline styles (row heights 24/30px, depth-bar tints, the #11182B row border, the ~10px = 0.4×24 ladder translate) rather than CSS rules; read from the script.
• Canvas grid/axis colors (#141d30, #8B97A8 axis text) are drawn in JS, not tokenized in CSS; noted but not promoted to first-class tokens.
• --line-height for label shown as 13px per .t10; weight inferred 400 (no explicit weight on .t10).