Design System — Tugboat

01

Foundations

Background Surfaces

Page Background

slate-950 #020617

Surface / Nav

slate-900 #0f172a

Card Surface

slate-900/50

Borders

slate-800 #1e293b

Separators

slate-700 #334155

Brand Accent

Primary Accent

emerald-400 #34d399

Button / CTA

emerald-500 #10b981

Button Hover

emerald-600 #059669

Font

JetBrains Mono

Monospace. Used globally for the intelligence operations aesthetic.

Weights: 400 (regular) · 500 (medium) · 600 (semibold) · 700 (bold)

▶ Show code

body { font-family: 'JetBrains Mono', monospace; }

Scrollbar

Scroll to see the custom scrollbar. Width: 6px. Track: #0f172a. Thumb: #334155. Border-radius: 3px. Matches the dark surface palette.

The narrow scrollbar minimizes visual noise while remaining functional.

Additional content for scrolling demonstration.

02

Colors

Severity Palette

Used for event severity classification across the platform.

Critical

#ef4444

High

#f59e0b

Standard

#0ea5e9

Low

#6b7280

Signal Palette

Economic and threat signal levels for market indicators.

Calm

#34d399

Watch

#facc15

Alert

#f59e0b

Danger

#ef4444

03

Typography

All type classes are WCAG AA compliant against the slate-950 (#020617) background. Minimum contrast: 4.5:1 for normal text, 3:1 for large text (18px+ or 14px bold).

.t-heading

17:1 contrast

Page and section headings

.t-subheading

14:1 contrast

Card titles, form labels, subheadings

.t-body

14:1 contrast

Body text, descriptions, narratives

.t-label

7.5:1 contrast

Labels, table headers, metadata keys

.t-muted

7.5:1 contrast

Timestamps, secondary metadata

.t-caption

7.5:1 contrast

Footnotes, helper text, captions

.t-dim

4.6:1 — decorative only

Disabled state, decorative text only

▶ Show CSS

.t-heading    { color: #e2e8f0; }  /* 17:1 */
.t-subheading { color: #cbd5e1; }  /* 14:1 */
.t-body       { color: #cbd5e1; }  /* 14:1 */
.t-label      { color: #94a3b8; }  /* 7.5:1 */
.t-muted      { color: #94a3b8; }  /* 7.5:1 */
.t-caption    { color: #94a3b8; }  /* 7.5:1 */
.t-dim        { color: #64748b; }  /* 4.6:1 decorative */

04

Severity Badges

Event severity classification. Semi-transparent background with matching border and text. Applied with Tailwind sizing: px-2 py-0.5 rounded text-xs font-medium.

CRITICAL HIGH STANDARD LOW

Class	Text	Background	Border
`.badge-critical`	#f87171	rgba(239,68,68,0.2)	rgba(239,68,68,0.3)
`.badge-high`	#fbbf24	rgba(245,158,11,0.2)	rgba(245,158,11,0.3)
`.badge-standard`	#38bdf8	rgba(14,165,233,0.2)	rgba(14,165,233,0.3)
`.badge-low`	#9ca3af	rgba(107,114,128,0.2)	rgba(107,114,128,0.3)

▶ Show HTML

<span class="badge-critical px-2 py-0.5 rounded text-xs font-medium">CRITICAL</span>

05

Threat Level Badges

Conflict-wide threat assessment. Five-tier scale from LOW to CRITICAL, displayed in the status bar.

CRITICAL HIGH ELEVATED GUARDED LOW

Class	Text	Background
`.threat-critical`	#f87171	rgba(239,68,68,0.15)
`.threat-high`	#fbbf24	rgba(245,158,11,0.15)
`.threat-elevated`	#facc15	rgba(234,179,8,0.15)
`.threat-guarded`	#38bdf8	rgba(14,165,233,0.15)
`.threat-low`	#4ade80	rgba(34,197,94,0.15)

06

Actor Stance Badges

Classify an actor's posture toward a conflict. Each actor gets assigned a stance with its associated color.

AGGRESSOR DEFENDER MEDIATOR NEUTRAL OPPORTUNIST ALLY

Class	Text Color	Semantic Meaning
`.stance-aggressor`	#f87171 red	Active hostile actor
`.stance-defender`	#60a5fa blue	Defensive posture
`.stance-mediator`	#c084fc purple	Diplomatic intermediary
`.stance-neutral`	#9ca3af gray	Non-aligned
`.stance-opportunist`	#fbbf24 amber	Exploiting situation
`.stance-ally`	#4ade80 emerald	Coalition partner

07

Source Perspectives

Every RSS feed is tagged with a geopolitical perspective. These colors appear on feed badges and source attribution.

WESTERN US_GOV ISRAELI IRANIAN ARAB RUSSIAN CHINESE INDEPENDENT

Class	Color	Hex
`.perspective-western`	Western / Allied	#60a5fa
`.perspective-us_gov`	US Government	#3b82f6
`.perspective-israeli`	Israeli	#818cf8
`.perspective-iranian`	Iranian	#34d399
`.perspective-arab`	Arab	#fbbf24
`.perspective-russian`	Russian	#f87171
`.perspective-chinese`	Chinese	#fb7185
`.perspective-independent`	Independent / OSINT	#a78bfa

08

Source Reliability Tiers

Four-tier reliability scale for intelligence sources. Tier 1 is the most reliable. State-funded sources receive a 15-point penalty.

● TIER 1 — Primary (90) ● TIER 2 — Secondary (70) ● TIER 3 — Tertiary (50) ● TIER 4 — Unreliable (30)

▶ Show CSS

.tier-1 { color: #34d399; }  /* emerald */
.tier-2 { color: #60a5fa; }  /* blue */
.tier-3 { color: #fbbf24; }  /* amber */
.tier-4 { color: #f87171; }  /* red */

09

Signal Levels

Economic market signal assessment. Each level has a text color class and a background+border class for card-level styling.

Text Colors

● CALM ● WATCH ● ALERT ● DANGER

Background Cards

CALM

WATCH

ALERT

DANGER

▶ Show CSS

/* Text classes */
.signal-calm   { color: #34d399; }
.signal-watch  { color: #facc15; }
.signal-alert  { color: #f59e0b; }
.signal-danger { color: #ef4444; }

/* Background + border classes */
.signal-bg-calm   { background: rgba(16,185,129,0.1); border-color: rgba(16,185,129,0.25); }
.signal-bg-watch  { background: rgba(250,204,21,0.1);  border-color: rgba(250,204,21,0.25); }
.signal-bg-alert  { background: rgba(245,158,11,0.1); border-color: rgba(245,158,11,0.25); }
.signal-bg-danger { background: rgba(239,68,68,0.1);  border-color: rgba(239,68,68,0.25); }

10

Gauges

Multi-color gradient bar with a positioned needle. Used for escalation scores, procurement pulse, and stress indicators. Scale: 0 (green) to 100 (dark red).

Escalation Gauge Examples

LOW RISK (15%)

ELEVATED (50%)

CRITICAL (85%)

▶ Show HTML

<div class="stress-gauge">
    <div class="stress-gauge-needle" style="left: 50%;"></div>
</div>

11

Demand / Category Badges

GovCon procurement demand level indicators and category assessment badges.

SURGE HIGH ELEVATED MODERATE NORMAL LOW

12

Pipeline Status Badges

GovCon opportunity pipeline tracking. Represents the lifecycle from discovery through outcome.

NEW → REVIEWING → PURSUING → SUBMITTED → WON

Alternate outcomes: NO_BID LOST

Class	Text Color	Stage
`.pipeline-new`	#94a3b8	Discovered, not yet reviewed
`.pipeline-reviewing`	#38bdf8	Under evaluation
`.pipeline-pursuing`	#fbbf24	Actively pursuing
`.pipeline-submitted`	#a78bfa	Proposal submitted
`.pipeline-nobid`	#64748b	Decided not to bid
`.pipeline-won`	#34d399	Contract awarded
`.pipeline-lost`	#f87171	Not selected

13

Set-Aside Badges

Federal contract set-aside designations for small business programs.

SBA SDVOSB HUBZONE OPEN

14

Navigation

Intelligence Status Bar

Top navigation bar with operation info, nav links, and LIVE indicator. Sticky, z-50, bg-slate-900 with border-slate-800 bottom border.

TUGBOAT

IRAN-ISRAEL CONFLICT ACTIVE DAY 524

OVERVIEW BRIEF EVENTS ACTORS MAP

+ EVENT

LIVE

Status Bar Separator

Element A

Element B

Element C

▶ Show CSS

.status-sep {
    width: 1px;
    height: 20px;
    background: #334155;
}

Flash Messages

Error: Invalid username or password.

Success: Password changed successfully.

Info: Daily brief generated for March 9.

15

Cards

Standard card pattern used throughout the dashboard, briefs, and detail views.

TOTAL EVENTS

548

+17 today

THREAT LEVEL

ELEVATED

LATEST EVENT

HIGH

Iran launches retaliatory strike on Israeli military targets

Mar 9, 2026 09:42 PM CT · Tehran, Iran

▶ Show HTML

<div class="bg-slate-900/50 rounded border border-slate-800 p-4">
    <div class="t-label text-xs font-semibold tracking-wider mb-2">LABEL</div>
    <div class="t-heading text-2xl font-bold">Value</div>
</div>

16

Map Components

Dark Leaflet Popup

Custom dark popup theme for Leaflet map markers. Overrides the default white Leaflet popup.

Airstrike on Beirut southern suburbs

Mar 9 · 33.87, 35.50

CRITICAL MILITARY

View details →

▶ Show CSS

.leaflet-popup-content-wrapper {
    background: #1e293b;
    color: #e2e8f0;
    border: 1px solid #334155;
    border-radius: 8px;
}
.leaflet-popup-tip { background: #1e293b; }
.leaflet-popup-content a { color: #34d399; }

Causal Relationship Arc Colors

Bezier curve arcs drawn between geo-located events on the map. Color-coded by relationship type.

Type	Color	Hex	Meaning
CAUSED_BY	▬▬▬	#f87171	Direct cause
RETALIATION_FOR	▬▬▬	#fb923c	Retaliatory response
ESCALATION_OF	▬▬▬	#fbbf24	Escalation chain
LED_TO	▬▬▬	#38bdf8	Consequence
PARALLEL_TO	▬▬▬	#94a3b8	Concurrent event

Heatmap Gradient

Leaflet.heat layer gradient weighted by event severity. Green (low density) through amber to red (high density).

0.2 0.4 0.6 0.8 1.0

17

Animations

LIVE Indicator Pulse

LIVE

2s ease-in-out infinite, opacity 1 → 0.3 → 1

▶ Show CSS

@keyframes pulse-live {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.3; }
}
.live-dot {
    animation: pulse-live 2s ease-in-out infinite;
}

18

Forms

Standard form elements used in event creation, feed management, and settings.

Text Input

EVENT TITLE

▶ Show HTML

<input type="text"
  class="bg-slate-800 border border-slate-700 rounded
         px-3 py-2 text-sm text-slate-200
         focus:border-emerald-500 focus:outline-none"
  placeholder="Enter event title..."/>

Select Dropdown

SEVERITY

Textarea

SUMMARY

Radio Group (Severity)

CRITICAL HIGH STANDARD LOW

Checkbox Filter

MILITARY (142) DIPLOMATIC (89) ECONOMIC (54)

19

Tables

Data tables used in feeds, events, and GovCon views. Dark surface background, slate-800 border rows.

Standard Data Table

TIER ▲	SOURCE ▲▼	STATUS
T1	Reuters	● Active
T2	Al Jazeera	● Active
T3	TASS STATE	● Paused

Sortable column headers show ▲ for active sort, ▲▼ (50% opacity) for sortable but inactive.

Expandable Row

▶ HIGH Iran-Israel proxy engagement in southern Lebanon

Arrow rotates 90° on expand. Detail panel uses page background (#020617) to visually separate from the header row.

20

Audio Player

Custom dark audio player for daily intelligence briefs. Uses the emerald accent for the play head with a CSS filter overlay.

▶

Daily Brief — Iran-Israel Conflict

Day 524 · March 15, 2026

1:42 4:52

▶ Show HTML

<div class="flex items-center gap-3 bg-slate-900 border border-slate-800 rounded-lg p-3">
  <div class="w-8 h-8 rounded bg-emerald-500/15
       border border-emerald-500/30 flex items-center
       justify-center shrink-0">▶</div>
  <audio controls class="w-full h-8"
    style="filter: brightness(0.8) hue-rotate(120deg)">
    <source src="..." type="audio/mpeg"/>
  </audio>
</div>

21

Classification Banner

Appears at the top and bottom of intelligence briefs. Amber/yellow on dark background with wide letter-spacing.

UNCLASSIFIED // FOR OFFICIAL USE ONLY

▶ Show HTML

<div class="text-center py-1.5 px-4 text-amber-400
     border-t border-b border-amber-500/20
     text-[9px] font-semibold tracking-[0.3em]">
  UNCLASSIFIED // FOR OFFICIAL USE ONLY
</div>

22

Stats & Metrics

Compact stat displays used in brief headers, dashboard cards, and GovCon summaries.

Stats Strip

27

Events

3

Critical

8

High

78

Escalation

Escalation score color: ≥75 = red-400, ≥50 = amber-400, else sky-400. Uses .status-sep dividers.

Numbered Fact List

1

Iran vows response to Israeli airstrike on military advisor in Damascus.

2

Brent Crude surges 4.2% on supply disruption fears in the Strait of Hormuz.

3

UN Security Council emergency session scheduled for March 16.

Scenario Probability Card

Escalation scenario with probability bar and description. Moved from Future Components — now shipping in production briefs.

Regional Escalation 72%

Hezbollah and Houthi fronts activate in response to direct Iran-Israel exchange.

23

Market Indicators

Compact inline market metrics used in brief headers and the economic dashboard.

Inline Metric Row

Brent: $92.4 ▲4.2% | Gold: $2,184 ▲1.8% | VIX: 25.3 ▲2.4% | USD/ILS: 3.72 ▼0.3%

Color inherits from .signal-* classes. ▲ for increase, ▼ for decrease. Pipe separator in .t-dim.

Signal Badge with Score

DANGER 82/100

ALERT 65/100

WATCH 42/100

CALM 15/100

24

Range Selectors

Time range tabs used in economic charts and GovCon procurement views.

▶ Show HTML

<!-- Active state -->
<button class="bg-emerald-500/15 text-emerald-400
       border border-emerald-500/25
       px-3 py-1 rounded text-xs font-semibold">24H</button>

<!-- Inactive state -->
<button class="text-slate-400 hover:text-white
       bg-slate-800/50 border border-slate-700/50
       px-3 py-1 rounded text-xs font-medium">7D</button>

25

Escalation Score

Large bold escalation number with dynamic color thresholds and progress bar. Appears on dashboard and brief headers.

78

/ 100

≥75 = red-400

56

/ 100

≥50 = amber-400

32

/ 100

<50 = sky-400

26

Event Rows

Compact event display used in the dashboard timeline panel. Click focuses map, double-click navigates to detail.

09:42 CRIT Iran launches retaliatory strikes on Israeli military targets MILITARY

08:15 HIGH Brent crude spikes 4.2% as Strait of Hormuz transit concerns mount ECONOMIC

06:30 STD UN Secretary General calls for immediate de-escalation DIPLOMATIC

27

Future Components

Anticipated components based on the platform's architecture and roadmap. These will follow existing token patterns when implemented.

Component	Likely Tokens	Context
Confidence Score Bar	`stress-gauge` pattern	Intelligence assessment confidence visualization (0-100%)
Verification Status Badge	`badge-*` pattern	VERIFIED / UNVERIFIED / DISPUTED event states
Actor Relationship Matrix	`stance-*` colors	NxN grid showing inter-actor relationships
Timeline Density Sparkline	severity colors	Compact event frequency visualization for sidebar
Feed Health Monitor	`tier-` + `signal-`	Source uptime, last-polled, error rate dashboard
Bulk Action Toolbar	emerald CTA pattern	Multi-select events for batch severity/type changes
Conflict Comparison View	card + gauge patterns	Side-by-side metrics when tracking multiple conflicts

TUGBOAT DESIGN SYSTEM

Foundations

Background Surfaces

Brand Accent

Font

Scrollbar

Colors

Severity Palette

Signal Palette

Typography

Severity Badges

Threat Level Badges

Actor Stance Badges

Source Perspectives

Source Reliability Tiers

Signal Levels

Text Colors

Background Cards

Gauges

Escalation Gauge Examples

Demand / Category Badges

Pipeline Status Badges

Set-Aside Badges

Navigation

Intelligence Status Bar

Status Bar Separator

Flash Messages

Cards

Map Components

Dark Leaflet Popup

Causal Relationship Arc Colors

Heatmap Gradient

Animations

LIVE Indicator Pulse

Forms

Text Input

Select Dropdown

Textarea

Radio Group (Severity)

Checkbox Filter

Tables

Standard Data Table

Expandable Row

Audio Player

Classification Banner

Stats & Metrics

Stats Strip

Numbered Fact List

Scenario Probability Card

Market Indicators

Inline Metric Row

Signal Badge with Score

Range Selectors

Escalation Score

Event Rows

Future Components