5.3 KiB
Competitive Visual Analysis — Raw Research Notes
Compiled February 2026 via text/HTML analysis of 14 competitor sites
Used as source material for design-brief.md
Batch 1: Infrastructure & Developer Tool Dashboards
Linear (linear.app)
CSS token system — Inter Variable, Berkeley Mono, Tiempos Headline. 9-level title scale. Quaternary text hierarchy.
Dark mode background: near-black #08090A. Panel bg: #0F1011. Brand accent: #7070FF.
Status colors: Blue #4EA7FC, Red #EB5757, Green #27A644, Orange #FC7840, Yellow #F0BF00.
Font weights: 300/400/510/590/680 (variable font, non-standard values).
Ground-truth values confirmed via Playwright CSS extraction — see design-brief.md.
Vercel (vercel.com)
Pure black/white: #000000 dark bg, #FAFAFA light bg. Zero saturation philosophy.
Geist + Geist Mono (proprietary typefaces). Status dots: colored circles inline with resource names.
Tone: Austere technical authority.
Railway (railway.app)
Multi-theme architecture. Signature dark: hsl(250, 24%, 9%) ≈ #13111C (dark desaturated purple).
Inter + Inter Tight + JetBrains Mono + IBM Plex Serif. Semantic palette: hsl(152) green, hsl(1) red.
Shadow: 0 0 30px hsla(0,0%,30%,.25) — diffuse ambient glow. Vaporwave Easter egg theme.
Tone: Playful sophistication.
Fly.io
Dark navy #0A0E27. Electric purple/magenta CTAs.
Fricolage Grotesque (quirky headline) + Mackinac (warm serif body) + Fragment Mono.
Most typographically adventurous stack in the group.
Tone: Confident and rebellious.
Inngest (inngest.com) — workflow orchestration
Stone-950 #0A0A0A warm black. "Inngest Lux" amber #CBB26A. Supplementary: green #2C9B63, rust #CB5C32.
Whyte + Whyte Inktrap (display), Circular (body). Top-border accent cards, rounded-xl 12px.
Grid background texture at 0.3 opacity. Stone-400 borders (rgba(white, 0.1)).
Tone: Warm enterprise dark mode.
Temporal (temporal.io) — workflow orchestration
Deep ultraviolet/indigo backdrop, star-grid hero pattern. Magenta ~#D946EF CTAs.
Rainbow gradients in testimonial sections. System sans-serif typography.
Tone: Cosmic reliability.
Grafana (grafana.com)
White background (the outlier). Orange #F46800 brand. Blue #0066FF CTAs.
Generous whitespace. High information density in actual product panels.
Tone: OSS pragmatism.
Weights & Biases / wandb.ai
#1A1C1F charcoal. Cards: #212429/#282A2F. Cyan #00AFC2 accent. Yellow-gold CTA gradient #FFCC33→#FFAD33.
Borders: 1px solid #34373C. Source Serif 4 (headings!), Source Sans 3, Source Code Pro.
Upward box shadow: 0px -1px 16px rgba(10,14,21,0.5). Border-radius 8–16px.
Tone: Scientific gravitas meets ML ambition.
Batch 2: LLM Observability, Internal Tools & Databases
LangSmith (smith.langchain.com) — LLM observability
#030710 near-black with blue cast. Electric blue #4D65FF interactive. JetBrains Mono as PRIMARY font.
Dense trace tree (left panel) + detail (right panel). Green ✓ / Red ✗ status icons.
Run types distinguished by icon + hierarchy position. Heat maps for evaluation results.
Tone: Analytical transparency. "Know what your agents are really doing."
Retool (retool.com)
Dark charcoal bg. Px Grotesk (display) + Saans variable font (body). Canvas + sidebar model.
Tone: Enterprise sophistication with approachability.
Render (render.com) — deployment dashboard
Purple-900 → orange gradient in announcement banner. Dark mode. Standard semantic status colors.
Service cards with inline status. Log explorer: terminal-style dark view.
Tone: Trustworthy speed and simplicity.
PlanetScale (planetscale.com) — database dashboard
OKLCH-based green scale. Both light and dark mode. Lato + Montserrat.
Schema diff: green additions, red deletions. 117 documented UI screens, 49 components.
Branch status badges, deploy request workflow panels.
Tone: Engineering credibility at scale.
Supabase (supabase.com)
Brand green: #3ECF8E / #34B27B. Background: #11181C. Inter font.
Built on Radix UI + Tailwind 3.4 + shadcn/ui. Table editor dense/spreadsheet-like.
Left sidebar: Table Editor / Database / Auth / Storage / Edge Functions / Realtime.
RLS enabled/disabled badge in table editor.
Tone: Radical developer empathy.
GitHub Copilot agent mode (VS Code)
Deep purple brand. VS Code dark background inherits. Sequential tool invocation list.
Each tool call: labeled step, collapsible details. Undo Last Edit control after edits.
Agent "thinking" state: animated ellipsis. No dramatic animations — UI recedes for code.
Tone: Capability amplification.
Cross-Cutting Patterns
Dark mode as default: LangSmith, Supabase, GitHub Copilot, Retool, WandB — all dark native.
Status color convergence: Green success / Red error / Amber warning universal. Differentiation in shape + animation.
Typography split: Monospace-forward (LangSmith with JetBrains Mono as primary) vs. clean sans (Supabase with Inter, Retool with Px Grotesk).
Semantic color as brand: Supabase #3ECF8E green = inseparable from identity. PlanetScale OKLCH green scale.
Progressive disclosure: All use expandable rows, tabs, collapsible sections to manage complexity.
AI activity representation: Copilot = inline step disclosure in dev environment. LangSmith = separate observability dashboard with trace trees. ao sits between these — a monitoring dashboard for the agent lifecycle.