103 lines
5.3 KiB
Markdown
103 lines
5.3 KiB
Markdown
# 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.
|