1. Status Color Palette

Six semantic color channels, each shown as badge, dot, background tint, border accent, and text. With colorblind-safe icons and text labels alongside every color.

Active / Success
Badge
Active
Dot
Confirmed
BG Tint
+$2.4M MTM
Border
Trade confirmed
Text
+$412,000
Colorblind
Checkmark + "Active"
Warning
Badge
Warning
Dot
Pending
BG Tint
Credit 78%
Border
Approaching limit
Text
78% utilization
Colorblind
Triangle + "Warning"
Error / Critical
Badge
Critical
Dot
Breached
BG Tint
-$1.8M P&L
Border
Limit breached
Text
-$1,812,000
Colorblind
Square-X + "Error"
Info / Pending
Badge
Info
Dot
Pending
BG Tint
3 updates
Border
Curve updated
Text
Awaiting approval
Colorblind
Circle-i + "Info"
Draft / Neutral
Badge
Draft
Dot
Inactive
BG Tint
No data
Border
Disabled
Text
$0.00
Colorblind
Dashed + "N/A"
AI / Insight
Badge
AI Insight
Dot
Claude
BG Tint
AI reasoning
Border
Suggested action
Text
High confidence
Colorblind
Star + "AI"
Color
vs Dark (#09090b)
vs Light (#ffffff)
Ratio
Green #22c55e
AA Pass
Fail (use #16a34a)
8.2 : 1
Amber #f59e0b
AA Pass
AA Pass (large)
10.1 : 1
Red #ef4444
AA Pass
Fail (use #dc2626)
5.1 : 1
Blue #3b82f6
AA Pass
Fail (use #2563eb)
4.6 : 1
Gray #71717a
AA Pass
AA Pass
4.8 : 1
Purple #7c3aed
AA Pass
Fail (use #6d28d9)
5.3 : 1

2. Data Freshness Indicators

Four tiers of data age, from live to outdated. Animation, color, and text labels combine to communicate currency at a glance.

JKM Front Month
$14.25
Live < 1 min
TTF M+1
$12.80
Recent 7m ago
HH Spot
$3.42
Stale 43m ago
Brent Crude
$82.15
Outdated 2h 14m ago
Price may be unreliable
Price Ticker (Live)
JKM $14.25 ▲ 0.35
Position Cell (Recent)
1,200,000 7m
KPI Card (Stale)
43m ago
$3.42
KPI Card (Outdated)
2h 14m ago
$82.15
Unreliable

3. Severity Escalation

Four alert levels from informational to critical. Each level adds visual urgency: icon, color, and animation.

TTF forward curve updated
M+1 through M+12 refreshed from ICE at 14:32 UTC. No material change (< 0.5% shift).
INFO
Shell credit utilization at 78%
Credit limit: $400M. Current exposure: $312M. Threshold warning at 75%.
WARNING
Nomination deadline in 24 hours
GLNG ADP window closes 2026-04-12 14:00 UTC. 2 cargoes still unnominated (May-03 and May-17 loadings).
ERROR
CREDIT LIMIT BREACHED: Shell $412M / $400M
Exposure exceeds approved credit by $12M. Trading desk notified. New trades blocked until resolved. Contact Risk Management immediately.
CRITICAL

4. P&L Intensity Encoding

Color intensity scales with profit/loss magnitude. Darker = larger exposure. Four levels per side plus neutral.

Counterparty
Net Position (MMBtu)
Avg Cost
MTM Price
Unrealized P&L
Intensity
Shell Energy
3,200,000
$12.40
$14.25
+$5,920,000
Level 4
TotalEnergies
1,800,000
$13.10
$14.25
+$2,070,000
Level 3
JERA
600,000
$13.80
$14.25
+$270,000
Level 2
KOGAS
200,000
$14.15
$14.25
+$20,000
Level 1
Gunvor
0
-
-
$0
Flat
Cheniere
-150,000
$14.60
$14.25
-$52,500
Level 1
Vitol
-800,000
$15.20
$14.25
-$760,000
Level 2
Trafigura
-1,500,000
$16.10
$14.25
-$2,775,000
Level 3
Glencore
-2,800,000
$16.80
$14.25
-$7,140,000
Level 4

5. Toast / Notification Gallery

Consistent notification patterns. Colored left accent, icon, message, and optional action. All follow the same semantic color system.

Trade BUY-0411 confirmed
1.2M MMBtu JKM-indexed, FOB Gladstone
Hedge ratio below 70%
Q3 2026 portfolio hedge coverage dropped to 64%
Failed to save nomination
Server returned 503. Changes preserved locally.
Morning briefing generated
Claude analyzed 14 market events, 3 vessel updates
Trade captured
SELL-0411 added to blotter

6. Form Validation States

Input states from default through loading. Each state uses consistent semantic colors, icons, and helper text.

Default
Volume in MMBtu
Focus
Volume in MMBtu
Valid
Valid volume
Warning
Unusual volume -- exceeds 10M threshold
Error
Required field
Disabled
Locked by admin
Loading
Loading counterparty data...