GMT // Global Market Terminal

Overview

GMT // Global Market Terminal is a professional-grade financial data dashboard designed for traders, analysts, and market professionals who demand real-time precision and uncompromising visual clarity. The aesthetic is 'Terminal Maximalism'—a deliberate rejection of rounded corners and soft gradients in favor of hard-edge geometric windows, monospace typography, and a commanding amber command bar that evokes the authority of legacy trading floors and Unix terminals. The UI personality is terse, data-first, and unapologetically technical: every pixel serves information hierarchy, every color carries semantic weight (amber for commands, red for losses, green for gains, cyan for status), and every interaction is instantaneous. The brand voice is precise and imperative: 'SPX +1.20 · +0.02%' not 'The market moved slightly up today.' Users expect to scan data in milliseconds, not read prose.

Colors

The color system is built on a pure black canvas (#000000) with a carefully calibrated grayscale hierarchy: surface-dim (#050505), surface-bright (#0A0A0A), and outline-variant (#3A3A3A) create subtle depth without sacrificing contrast. Foreground text is a warm gray (#D7D7D7, 215 luma) chosen to reduce eye strain during extended terminal sessions; dimmed text (#8A8A8A) and faint text (#5A5A5A) provide secondary and tertiary information layers. The primary accent is amber (#F28C00), used exclusively for command bars, active states, focus indicators (2px solid outline at outline-offset: 1px), and interactive affordances—it commands attention without aggression. Secondary colors carry semantic meaning: green (#00C176) signals gains and positive status; red (#FF4D4F) signals losses and warnin

Typography

The type system is anchored in IBM Plex Mono, a monospace font optimized for tabular data and terminal aesthetics. All text is rendered with font-variant-numeric: tabular-nums to ensure consistent column alignment in price tables and ticker tapes—critical for rapid visual scanning. The hierarchy spans from display (32px, 700 weight, -0.02em tracking) for major section titles down to label-sm (9px, 500 weight, 0.5px tracking) for metadata and timestamps. Body text is set at 12px with 1.65 line-height to maximize readability on high-resolution displays while preserving the compact, dense aesthetic. Headline-lg (20px, 700 weight) is used for widget titles and command labels; headline-md (16px, 700 weight) for subsection headers. All labels use 0.5px letter-spacing to enhance legibility at sma

Layout

The layout is a fixed 12-column grid with a 1100px container max-width, using a 8px base unit (--gap: 8px) for all spacing decisions. The page is divided into sticky header zones: command bar (34px, z-index: 200), ticker tape (30px, z-index: 190), and toolbar (32px, z-index: 180), totaling 96px of fixed overhead. The main grid (#grid) uses absolute positioning for widgets, allowing freeform dashboard customization; each widget has a 1px border and 8px padding. Section separation uses lg spacing (16px) between major content blocks. The gutter is 8px on all sides; container padding is 8px. Horizontal scrolling is disabled on the body (overflow-x: hidden) to prevent layout shift. The toolbar uses overflow-x: auto with scrollbar-width: none to hide scrollbars on Firefox while allowing horizont

Elevation & Depth

Depth is achieved through layered borders and subtle shadows rather than blur or glassmorphism. Level 1 (Base): pure black background (#000000) with no shadow. Level 2 (Standard Card): 1px solid border at {colors.outline-variant} (#292929), background {colors.surface-dim} (#050505), box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15). Level 3 (Focused/Dragging Widget): 1px solid border at {colors.primary} (#F28C00), background {colors.surface-bright} (#0A0A0A), box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25). Modals and dropdowns use Level 3 elevation with z-index: 300. The command bar uses a linear gradient

Shapes

The shape philosophy is 'Architectural Sharpness'—a commitment to hard edges and minimal rounding that reinforces the terminal aesthetic and maximizes usable space. Border-radius is 0px (DEFAULT) for all standard elements: buttons, inputs, cards, and widgets. Exceptions are minimal: toolbar buttons use 4px (lg) for subtle affordance; the command bar uses 0px; the tape pause button uses 0px. The only fully rounded element is the badge (border-radius: 9999px / full) when used as a status indicator. This constraint is intentional: sharp corners reduce visual noise, improve scanning speed, and ali

Components

Action Elements Buttons are minimal and functional. The primary button uses background: {colors.primary} (#F28C00), color: {colors.on-primary} (#000000), padding: 6px 10px, height: 24px, border: 1px solid {colors.primary}, font-weight: 700, border-radius: 0px. On hover, transition to background: {colors.primary-container} (#B26A00) and border-color: {colors.primary-container} over 0.2s ease. On focus, apply outline: 2px solid {colors.primary} at outline-offset: 1px. Secondary buttons use background: transparent, color: {colors.on-surface}, border: 1px solid {colors.outline-variant}, padding: 2px 8px, height: 20px. Ghost buttons (toolbar, header) use background: transparent, color: {colors.on-surface-variant}, border: none, padding: 0px 5px, height: 18px; on hover, set background: {colo

Do's and Don'ts

**Do**

• Do use monospace typography (IBM Plex Mono) for all data, prices, and timestamps to ensure tabular alignment and rapid scanning.
• Do apply amber (#F28C00) exclusively to interactive affordances (buttons, focus states, active tabs) and command bar—never use it for passive content.
• Do use green (#00C176) for gains and positive status, red (#FF4D4F) for losses and warnings, cyan (#4DD0E1) for neutral status—maintain semantic consistency across all data visualizations.
• Do use hard edges (border-radius: 0px) for buttons, inputs, and cards to reinforce the terminal aesthetic and maximize usable space.
• Do apply 1px solid borders at {colors.outline-variant} to all containers and interactive elements in default state, transitioning to {colors.primary} on hover or focus.
• Do use font-variant-numeric: tabular-nums on all numeric content to ensure consistent column alignment in tables and price lists.
• Do apply 2px solid amber outline at outline-offset: 1px to all focused interactive elements (buttons, inputs, links, tabs).
• Do use sticky positioning (position: sticky) for the command bar, ticker tape, and toolbar to keep them visible during vertical scrolling.

**Don't**

• Don't use rounded corners (border-radius > 0px) on buttons, inputs, or standard cards—reserve rounding only for status badges (border-radius: 9999px).
• Don't apply shadows or blur to create depth; use layered borders and color contrast instead (e.g., 1px solid {colors.outline-variant} for Level 1, 1px solid {colors.primary} for Level 2).
• Don't mix semantic colors (green, red, cyan) for decorative effect—reserve them exclusively for price movement and system state indicators.
• Don't use opacity or transparency for interactive states; use solid color transitions (background-color, border-color) over 0.2s ease instead.
• Don't exceed 12px font size for body text or 10px for labels—maintain the dense, information-rich aesthetic.
• Don't use sans-serif or system fonts; always specify IBM Plex Mono with fallbacks to PingFang SC, Microsoft YaHei, Noto Sans CJK SC, Source Han Sans SC, Menlo, Consolas, monospace.
• Don't apply gradients outside the command bar (linear-gradient(180deg, #F28C00 0%, #E07F00 100%))—keep the rest of the UI flat and high-contrast.
• Don't hide scrollbars entirely; use scrollbar-width: thin and scrollbar-color: {colors.outline-variant} transparent to maintain visual consistency.