PromptWatch · Full Page

PromptWatch

Agent-observability platform'ın chromatic-theatre dark canvas'i — ui-sans-serif body + AeonikPro Thin display + Geist Mono code, multi-accent rotation (red/cyan/blue/coral). Indie-velocity ethos.

promptwatch.com/Added 2026-05-17

PromptWatch Full Page — desktop screenshot

Editorial noteThis entry documents observable design-language patterns for educational transfer and AI-agent briefing. Screenshots and trademarks are property of their respective owners. AI2 Design is not affiliated with or endorsed by the featured brand. Inspiration here is about language and rhythm — do not reproduce brand identity, logo, product copy, or proprietary features.

Curator verdict

Why we catalogued it?

PromptWatch is the rare agent-observability landing that uses chromatic theatre on a black stage with the precision of a Pantone-conscious art director — a pure #000000 ground, ui-sans-serif body (deliberate system-stack choice signalling 'we ship fast'), Geist Mono for code, and a full color-wheel rotation of accents (red #ff492c, cyan #22b8cd, blue #3186ff, orange-coral #d97757) deployed one-per-section. We catalogued it because agent-observability is a category that nobody knew existed two years ago — and PromptWatch's marketing decided the visual identity should match the category's novelty: bold, chromatic, irreverent toward the corporate-blue defaults its peers reach for. If you are shipping a product whose category is still being defined and want the brand to carry the category-creation weight, this is the lodestar.

Design decisions observed

Pure #000000 ground (~576 surface refs) — absolute dominant, no off-black tint.
Multi-accent rotation: red #ff492c, cyan #22b8cd, blue #3186ff, coral-orange #d97757, green #34a853 — each accent paired with a specific section/feature.
ui-sans-serif as the entire body typeface — deliberate system-stack choice, signals indie-velocity over premium-grotesque licensing.
Geist Mono at 12px for code inline + metadata — Vercel-adjacent technical signal.
AeonikPro Thin webfont preloaded for headline moments — premium display typeface inside a system-body stack (the duet creates the brand's editorial tension).
12 gradients catalogued — compositional texture, accent-tinted depth zones per section.
Container ladder 320/576/672/768/1104 — multiple nested editorial widths.
Framer Motion + tight 4px spacing — fast, signal-grade motion.

What to study

How to ship a multi-accent palette with discipline — PromptWatch rotates accents the way an album cover sequences chromatic moods, never letting two accents fight in the same viewport.
System-sans + premium-display duet — `ui-sans-serif` for body (no licensing, no preload) + AeonikPro Thin for hero headlines creates a brand that's both fast and editorial.
Geist Mono as the technical signal — Vercel-pioneered, peer-cohort-recognised. Steal the discipline of using mono only where mono earns its frame.

What to avoid

Don't lift the multi-accent rotation without compositional discipline — without one-accent-per-section, the page becomes a kaleidoscope mess.
Don't paint surfaces in any accent — colour belongs on text, illustration spots, and gradient overlays. The moment you fill a button background in #ff492c, you've broken the rotation rule.
Don't substitute Inter for ui-sans-serif — PromptWatch's deliberate system-stack signals fast-shipping indie ethos. Custom font flattens that.

Taste notes

The page feels like the cover of a quarterly print magazine about AI agents — every section has its own chromatic mood, and yet the whole thing holds together because the typography never wavers. PromptWatch understood that observability is invisible work, and the brand needs to make itself visible through chromatic theatre. The 12 gradients are not decorative — they're each carrying a section's specific feature mood.

Lineage & references

Direct heir to the Liveblocks chromatic-discipline school — but PromptWatch picks system-sans where Liveblocks picks Suisse Intl.
Standing shoulder-to-shoulder with the modern AI-observability peer cohort (LangSmith, Helicone, Braintrust) — but PromptWatch's chromatic theatre is the most committed.
Part of the Vercel-adjacent typographic wave (Geist Mono + system stack) that runs through v0.dev, Resend, PlanetScale — but with chromatic intensity none of them attempt.

Design language brief

Paste-ready for your agent.

A typed design system transfer brief — philosophy, tokens, rules, techniques, and fitness checks. Your agent reads the whole language, not just the pixels.

Philosophy

PromptWatch's design language is chromatic theatre on a system-stack body. Pure #000000 ground; ui-sans-serif for body and UI (deliberate system choice); Geist Mono for code; AeonikPro Thin webfont for hero display only; multi-accent rotation (red/cyan/blue/coral/green) gives each section its own chromatic mood. Brand works because typography never wavers — the colour can be theatrical only because nothing else is.

Main prompt

Use this capture as a design language transfer brief for my project. Adopt the palette (pure #000000 ground dominant, #ffffff secondary surface, multi-accent rotation #ff492c red / #22b8cd cyan / #3186ff blue / #d97757 coral-orange / #34a853 green used one-per-section), typography stack (ui-sans-serif system-stack for all body 12-16px, Geist Mono 12px for code inline, AeonikPro Thin webfont for hero display moments only), tight 4px spacing scale 1/4/6/8/10/12/14/16, container ladder 320/576/672/768/1104, Tailwind-standard breakpoints, Framer Motion + 12 catalogued gradients (compositional texture, accent-tinted atmospheric depth). Treat accents as rotation system — one accent dominant per 100vh viewport. Apply the language, not the source brand's copy.

Overview

Layout: Vertically stacked tight content frames (320-1104px) on black canvas; each section has chromatic mood + accent rotation.
Content width: Container ladder 320/576/672/768/1104.
Framing: Quarterly print magazine for AI agents — black stage, multi-accent rotation, system-sans body.
Grid strength: Implicit — 4px base, rhythm from typography + accent rotation + gradient zones.

Color philosophy

Pure #000000 ground; rotating multi-accent (red/cyan/blue/coral/green); white text and surfaces.

Mode strategyDark-only — the multi-accent rotation depends on black ground.

#000000 dominant ground
#ffffff primary text and surfaces
#ff492c red accent (rotation A)
#22b8cd cyan accent (rotation B)
#3186ff blue accent (rotation C)
#d97757 coral-orange accent (rotation D)
#34a853 green accent (rare confirmation/status)

Gradients (paste-ready)

12 catalogued — compositional accent-tinted depth zones per section

Typography rules

ui-sans-serif system-stack for body and all UI (no webfont)
Geist Mono 12px for code inline and metadata
AeonikPro Thin/ThinItalic webfont reserved for hero display 48-72px
Weight ladder 400 body, 500 emphasis
Letter-spacing 0
Line-height 1.5 body, 1.05 display

Spacing rules

4px base unit, scale 1/4/6/8/10/12/14/16
Section vertical rhythm 96-160px
Card padding 24-32px

Design tokens

Palette, type, and space — all agent-readable.

7 colors · hex / rgb / hsl / oklch

Save PNG

foreground
70%
- HEX#000000
- RGBrgb(0, 0, 0)
- HSLhsl(0, 0%, 0%)
- OKLCHoklch(0.00% 0.0000 0.00)
background
21%
- HEX#FFFFFF
- RGBrgb(255, 255, 255)
- HSLhsl(0, 0%, 100%)
- OKLCHoklch(100.00% 0.0000 89.76)
brand
4%
- HEX#FF492C
- RGBrgb(255, 73, 44)
- HSLhsl(8, 100%, 59%)
- OKLCHoklch(66.57% 0.2224 31.83)
accent
2%
- HEX#22B8CD
- RGBrgb(34, 184, 205)
- HSLhsl(187, 72%, 47%)
- OKLCHoklch(71.92% 0.1186 209.86)
accent
1%
- HEX#3186FF
- RGBrgb(49, 134, 255)
- HSLhsl(215, 100%, 60%)
- OKLCHoklch(63.46% 0.1975 258.17)
accent
1%
- HEX#D97757
- RGBrgb(217, 119, 87)
- HSLhsl(15, 63%, 60%)
- OKLCHoklch(67.24% 0.1308 38.76)
accent
0%
- HEX#34A853
- RGBrgb(52, 168, 83)
- HSLhsl(136, 53%, 43%)
- OKLCHoklch(64.75% 0.1603 148.50)

Inspector

Tab through the captured artifacts.

Six observable layers — page structure, fonts, breakpoints, z-index, gradients, motion — kept paste-ready alongside the tokens above.

Page structure

Semantic hierarchy at a glance.

Depth-first walk of meaningful sections — header, navigation, main regions, articles, footer. 11 nodes captured; depth capped at 6 for readability.

body
├─ div
│ └─ Main
│ ├─ div
│ │ ├─ Header
│ │ ├─ Main
│ │ │ ├─ Section (×10)
│ │ │ └─ [+2 more]
│ │ └─ Footercontentinfo
│ └─ Section
└─ span

Accessibility

22 combinations · 12 pass AA · 4 pass AAA · APCA Lc shown alongside WCAG 2.1 ratio for draft WCAG 3 awareness.

Preview	fg	bg	Ratio	Normal	Large	APCA Lc	Context
Aa	`#000000`	`#FFFFFF`	21.00	AAA	AAA	+106	foreground on background
Aa	`#FFFFFF`	`#000000`	21.00	AAA	AAA	-108	background on foreground
Aa	`#000000`	`#22B8CD`	8.81	AAA	AAA	+57	foreground on accent
Aa	`#22B8CD`	`#000000`	8.81	AAA	AAA	-56	accent on foreground
Aa	`#000000`	`#34A853`	6.87	AA	AAA	+47	foreground on accent
Aa	`#34A853`	`#000000`	6.87	AA	AAA	-45	accent on foreground
Aa	`#000000`	`#D97757`	6.73	AA	AAA	+46	foreground on accent
Aa	`#D97757`	`#000000`	6.73	AA	AAA	-44	accent on foreground
Aa	`#000000`	`#FF492C`	6.24	AA	AAA	+44	foreground on brand
Aa	`#FF492C`	`#000000`	6.24	AA	AAA	-42	brand on foreground

Image strategy

Asset loading & format policy.

Observable image posture — total count, lazy-loading ratio, and format mix. Hero image is measured above the fold.

Total30Lazy loaded8%unknown67webp3532

Hero image

https://promptwatch.com/_next/image?url=%2Fbackgrounds%2Fbackground-image-1.png&w=1920&q=50

Format: UNKNOWN
Dimensions: 1232×928
Loading: eager
srcset: yes
srcset descriptor: /_next/image?url=%2Fbackgrounds%2Fbackground-image-1.png&w=640&q=50 640w, /_next/image?url=%2Fbackgrounds%2Fbackground-image-1.png&w=750&q=50 750w, /_next/image?url=%2Fbackgrounds%2Fbackground-image-1.png&w=828&q=50 828w, /_next/image?url=%2Fbackgrounds%2Fbackground-image-1.png&w=1080&q=50 1080w, /_next/image?url=%2Fbackgrounds%2Fbackground-image-1.png&w=1200&q=50 1200w, /_next/image?url=%2Fbackgrounds%2Fbackground-image-1.png&w=1920&q=50 1920w, /_next/image?url=%2Fbackgrounds%2Fbackground-image-1.png&w=2048&q=50 2048w, /_next/image?url=%2Fbackgrounds%2Fbackground-image-1.png&w=3840&q=50 3840w

Page type

Full Page

Industry

developer-tools
ai

Theme

dark

Editorial disclaimer