terminal-product-design

name	terminal-product-design
description	Use when designing or implementing the web interface for this project, especially when the goal is a trading-terminal aesthetic that still feels welcoming, readable, and simple for everyday users, and when agent outputs must be presented clearly inside the product.

Terminal Product Design

Use this skill when shaping the UI, layout, or interaction model for the product.

Design target

The product should feel like a sharp sports intelligence terminal:

• dense but readable,
• dramatic but not gimmicky,
• technical-looking but easy to learn,
• fast to scan during live events.

UI principles

• Lead with the decision, not decoration.
• Make the most important recommendation obvious within seconds.
• Use panels, grids, status rails, and command-center typography.
• Keep navigation shallow and actions guided.
• Use motion sparingly to emphasize change, not distract.

Suggested visual language

• Dark control-room palette with strong contrast.
• Accent colors tied to state: confidence, risk, freshness, alert.
• Monospaced support typography plus a distinct display face.
• Card surfaces that resemble telemetry panels, not generic SaaS cards.

Required UX elements

• recommendation summary,
• evidence panel,
• confidence and risk indicators,
• last-updated freshness markers,
• change log or diff view,
• clear path to alternative squads or picks.

Anti-patterns

• Do not make users parse raw agent chatter by default.
• Do not overload the landing view with every metric.
• Do not sacrifice mobile usability for terminal aesthetics.
• Do not use "hacker" styling that lowers legibility.