Tidewatch

A mock-up of the homepage, drawn from this design’s layout, palette and typefaces. A build follows the full prompt below.

Start from this templateRead the build prompt

Typefaces

A semi-condensed humanist sans with mono data gives the air-traffic-control feel; JetBrains Mono stays because its tall, open digits carry the KPI numerals.

• Sofia Sans Semi CondensedHeadings: titles 15px 600 and panel headings
• Sofia Sans Semi CondensedBody: body 14-16px
• JetBrains MonoFigures and code: KPI numerals ~32px, uppercase labels, codes

Who it is for

• Supply chain and logistics leaders
• Sales engineers at logistics software vendors
• Consultants explaining tariff and congestion trade-offs
• Ops teams prototyping a control tower

Layout

1. Header bar: amber-outlined target icon, title and mono subline (company · region · DC count); right side network posture badge ('Degraded'), critical shipments counter, theme toggle
2. Caption row: one-line instruction to toggle scenarios + active scenario count
3. Four KPI cards with mono figures and thin amber progress bars: on-time delivery, cash due, landed cost, open exceptions
4. Main split: large 'Inbound Network' map panel (mode filter chips Ocean/Air/Rail/Road, legend Nominal/Caution/Critical, coastlines, dashed great-circle routes, moving dots, DC labels with days of cover, zoom controls, coordinate/scale footer)
5. Right 'Disruption Simulator' column: rocker-switch cards for port delays, supplier outages, demand spikes, lane closures, blank sailings; tariff cards with % chips; dashed 'recovery play' cards (air expedite, dual-source); Order book summary; Projected stockouts list by DC with days
6. Footer strip noting fictional demo dataset counts

Palette

Technical, tense, cinematic, precise, operational. A night-shift control tower where amber and red signal trouble.

• background (navy-black)#070e1c
• card#0f1827
• text#e1e9f1
• primary amber#f7a830
• accent cyan (coastlines)#3db6cf
• nominal green#3ecf8e
• critical red#f0616d

Every checked pair, measured again

As vibld’s tokens

The palette on the fifteen colour tokens vibld styles a project with, each text colour on the fill it is read on.

• background
• card
• muted
• primary
• secondary
• accent
• destructive

Type scale

Display

Sofia Sans Semi Condensed 600 at modest sizes (15px title) -- hierarchy carried by big JetBrains Mono KPI numerals (~32px)

Body

Sofia Sans Semi Condensed 400 14-16px; JetBrains Mono uppercase for labels, codes and captions

Condensed-leaning humanist sans with mono data creates an instrument-panel, air-traffic-control feel. Accessibility: body copy 16px or larger at 1.5+ line height with a ~70ch max measure; no text below 12px; weights under 400 only at 32px+; uppercase reserved for short labels with 0.05em+ tracking.

Spacing and imagery

Dense full-viewport dashboard, 12px gaps, 6px radius cards with 1px borders, compact mono captions; map takes ~70% width.

A custom vector map (Pacific-centred projection) with thin cyan coastlines, grid lines, dashed curved routes and glowing dots; no photos.

Components

• Header with posture badge and critical counter
• KPI cards with progress bars
• SVG map with projection, pan and zoom
• Animated shipment dots coloured by risk
• Hover card for shipment details
• Mode filter chips
• Legend
• Rocker-switch scenario cards
• Tariff scenario cards with rate chips
• Recovery play cards gated by state
• Order book summary
• Projected stockouts list
• Reset button
• Theme toggle (dark/light)

Interactions

• Toggle scenario switches; routes flash and DC nodes shift colour in a staggered ripple
• KPIs animate as scenarios stack
• Hover shipments for contents, supplier, ETA, risk driver
• Filter by transit mode
• Drag to pan, scroll to zoom at cursor, fit button
• Recovery plays enabled only for loads still actionable
• Reset clears all scenarios
• Reduced-motion stops dot animation

Data

• Node{id, code, name, type: port|dc|supplier, lon, lat, days_cover}
• Lane{id, from_node, to_node, mode: ocean|air|rail|road, transit_days}
• Shipment{id, lane_id, supplier_id, contents, value, departed_at, eta, status: in_transit|booked|planned, risk}
• Sku{id, name, dc_id, on_hand, daily_demand}
• Scenario{id, kind: delay|outage|closure|blank_sailing|demand|tariff|recovery, params, effective_in_days}
• KpiSnapshot{on_time_pct, cash_due, landed_cost_delta, exceptions} (derived)

Build prompt

The baseline every prompt in the catalog assumes, then this design’s own ten sections, from goal to guardrails.

Copy the baseline and build prompt

### How to use these prompts
Paste a template's build prompt into your coding agent as the first message. Each prompt names its own stack, tokens and acceptance criteria; the rules below apply to all of them and can be prepended once per project.

### Engineering baseline
- TypeScript strict mode, no `any`, small typed components, feature folders, and one source of truth for design tokens (CSS variables consumed by Tailwind).
- Validate every input with a shared zod schema on the client and again on the server or edge function. Never trust client-side checks alone.
- Show loading, empty and error states for every async view. Surface errors in plain language with a retry, and log details to the console in development only.
- Keep secrets out of the bundle. Only publishable keys (for example a Supabase anon key) belong in client code; service-role keys, API keys and webhooks live in server or edge-function environment variables.

### Data and auth baseline (full-stack templates)
- Enable Row Level Security on every table before inserting data. Default-deny, then add owner-scoped policies (`auth.uid() = user_id`) and explicit role checks for admin views.
- Store roles in a separate table checked by a security-definer function, never in a user-editable profile field.
- Upload files to private storage buckets with size and MIME limits, and serve them through signed URLs.
- Rate-limit public endpoints (forms, auth, AI calls) and add a honeypot field or captcha to anonymous forms.
- Take payments through a hosted checkout and verify webhooks by signature. Never handle raw card data.

### Accessibility and UX baseline
- Target WCAG 2.2 AA: 4.5:1 contrast for normal text and 3:1 for large text, input borders, focus rings and meaningful icons or chart lines. Every palette in this catalog lists its verified pairs; re-check with a contrast tool after any colour change.
- Keep body text at 16px or larger with 1.5 line height, nothing below 12px, no light weights under 24px, and uppercase only for short labels.
- Give every interactive element a visible focus ring, full keyboard support, semantic landmarks, labelled form fields, and alt text on meaningful images.
- Respect `prefers-reduced-motion` for every animation. Give drag-and-drop and carousels keyboard and button alternatives.
- Build mobile-first and test at 375px, 768px and 1280px.

### Content guardrails
- Use original copy, fictional sample data and placeholder or licensed imagery. Do not reuse another product's name, logo, screenshots or marketing text.
- Label demo testimonials and metrics as samples. Collect the minimum personal data the feature needs.

### Goal
Build **Tidewatch**, an interactive inbound-logistics simulator for a fictional distributor with four western distribution centers. Leaders, consultants and sales engineers flip disruption switches (port delay, supplier shutdown, lane closure, blank sailing, demand spike, tariff changes) and watch the effect cascade across a live map, KPIs and projected stockouts. It is a teaching and demo tool, not an operational system.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix: Switch, Tooltip, HoverCard, Toggle), lucide-react. d3-geo for projection and a TopoJSON coastline file, d3-zoom for pan/zoom, Framer Motion for staggered ripples and KPI tweens, requestAnimationFrame for moving shipment dots. A pure TypeScript simulation engine in its own module. No backend; everything runs in the browser.

### Pages & layout
One full-viewport screen:
1. **Header**: icon tile, title, mono subline; network posture badge (Nominal / Degraded / Critical), critical-shipments counter, theme toggle.
2. **KPI strip**: on-time delivery vs target, cash due at entry (duty and fees), landed cost change vs baseline, open exceptions -- each with a thin progress bar and mono caption.
3. **Map panel** (~70% width): mode chips with counts, status legend, projected coastlines and graticule, curved dashed routes from overseas ports, animated dots coloured by risk, DC labels with days of cover, zoom +/−/fit, coordinate readout.
4. **Simulator column**: disruption switch cards; tariff cards with rate chips and effective dates; recovery-play cards (dashed border) that enable only when eligible loads exist; order book totals; projected stockouts sorted by days remaining.
5. **Footer**: dataset summary.

### Design system
Dark default with light alternative. Tokens: `--background: #070e1c`, `--card: #0f1827`, `--foreground: #e1e9f1`, `--muted-foreground: #95a7b6`, `--primary: #f7a830`, `--accent: #3db6cf`, `--ok: #3ecf8e`, `--warn: #f7a830`, `--crit: #f0616d`, `--border: #273445`. Fonts: Sofia Sans Semi Condensed 400/600 for UI, JetBrains Mono for numbers and uppercase captions (0.12em tracking). Scale 12/14/16/32 (captions never below 12px). Radius 6px, 4px for chips. No shadows; 1px borders. Motion: ripple steps 80ms apart, total under 1.2s; KPI tween 500ms; dots move continuously. Add `--input-border: #5a6b80` for switch tracks, chips and zoom controls (the `#273445` border is for panel dividers). Light alternative: `--background: #f5f7fa`, `--card: #ffffff`, `--foreground: #0f1827`, `--muted-foreground: #4b5a6b`, `--primary-text: #8f5600` for amber text, `--input-border: #8492a3`.

### Components & interactions
Switch cards: off, on (amber border), disabled (not applicable). Hover cards show contents, supplier, ETA, risk driver. Reset appears once any scenario is on. Map interactions: drag pan, wheel zoom around cursor, keyboard +/−/arrow keys. Stockout rows colour by severity.

### Data & state
Node, Lane, Shipment, Sku, Scenario -- typed seed data in `data/`. The engine is a pure function `simulate(baseline, activeScenarios) → {shipments, nodes, kpis, stockouts}`; keep it deterministic and unit-tested (e.g. tariffs only apply to loads entering after their effective date; recovery plays skip loads already unloading). Active scenarios live in state and the URL so a scenario combination can be shared. Seed ~40 in-transit loads, ~70 forward bookings, a dozen suppliers, 200 SKUs -- all fictional.

### Accessibility
Provide a "Network table" toggle listing shipments and statuses for screen-reader users; the map SVG gets `role="img"` with a summary. Status uses shape (circle/diamond) and text in addition to colour. Switches are real Radix switches with labels. Under reduced motion, freeze dots and apply ripple changes instantly. Amber and mono captions are verified at 4.5:1 or better on navy. Type: body 16px+, line height 1.5+, max ~70ch, nothing under 12px. Verified contrast: body text #e1e9f1 on #070e1c = 15.73:1; body text #e1e9f1 on #0f1827 = 14.51:1; muted mono caption #95a7b6 on #0f1827 = 7.19:1; amber primary text #f7a830 on #0f1827 = 8.98:1.

### Security
Static app with no secrets or user data. If a future "upload your network" feature is added, parse JSON/CSV client-side with zod and size limits. External links use `rel="noopener noreferrer"`. Avoid `dangerouslySetInnerHTML`.

### Performance & SEO
Render dots on a single canvas layer over the SVG map if counts grow; memoise projections; pause animation when the tab is hidden. Title, description and OG image for sharing. Target 60fps on a mid-range laptop.

### Guardrails
- Fictional company, suppliers and loads; avoid real carrier or port-operator branding.
- Label tariff scenarios as illustrative, not legal or trade advice.
- Typed components, no `any`, visible errors.
- Done when: each switch changes KPIs and at least one map element with a visible ripple; stacking scenarios compounds correctly per unit tests; recovery plays toggle eligibility; pan/zoom and filters work by mouse and keyboard; reset restores baseline exactly.

Open the builderAll templatesThis palette on its own