Meridian — influences (ranked merge)
Research hub. Absorb discipline, never paste brand chrome. Do not label influences in product UI.
Companion specs:layout.md·architecture.md·ux.md·animations.md·color.md·typography.md·density.md·ai-surfaces.md
Method: inventory every published influence already in Meridian → score against product goals → deep-read primary docs → pick the best merge features per concern. Parallel CLI deep-research was unavailable (no auth); findings below cite primary sources fetched Aug 2026.
Product goals (scoring axes)
UX + DX are the highest-weight axes — visual/cinema craft serves them.
| Axis | Weight | Meaning |
|---|---|---|
| U — Operator UX | 6 | Usefulness, status, empty/error, density-by-task, keyboard |
| X — Developer / agent DX | 6 | Closed API, progressive complexity, verifiable gates |
| A — App operator density | 5 | Long sessions, indexes, quiet chrome |
| B — Agent-native | 5 | Object-bound AI, provenance, typed anti-drift |
| C — Material coherence | 4 | Tokens, radius/stroke/elevation as one family |
| E — A11y / contrast | 5 | WCAG AA, OKLCH, reduced motion |
| F — Implementability | 4 | Works with shadcn + Tailwind v4 + lint |
| D — Cinema / showcase | 2 | Full-bleed film for theme marketing only |
Score = weighted fit (1–5 per axis × weight). Higher = stronger claim on Meridian defaults.
Ranked inspirations
| Rank | Influence | Score | Primary lane | Role in Meridian |
|---|---|---|---|---|
| 1 | Cursor application (not Cursor.com) | 92 | App chrome + AI | Density, object-bound composer, quiet panes |
| 2 | Fluent 2 (fluent2.microsoft.design) | 90 | Material + layout | Tokens, control vs layer radius, 4px grid, thin stroke, motion tokens |
| 3 | Shopify Polaris Pro (pro design language) | 88 | Meaning + density | Semantic color, task density, predictable+juicy press |
| 4 | Linear UI refresh (Linear Now) | 86 | Chrome hierarchy | Less chrome noise, LCH/theme knobs, content contrast |
| 5 | AI design-system anti-drift (Superdesign, Pandya) | 85 | Agent contract | Frozen file + closed components + lint |
| 6 | Vercel Design Engineer (principles) | 80 | Process | Usefulness, whole experience, progressive complexity |
| 7 | Brad Frost atomic / parts+wholes | 78 | Structure | Tokens → atoms → wholes proven in product frames |
| 8 | Cinema staging (Apple-class product film) | 72 | Marketing film | One idea/frame, full-bleed subject, no scroll spectacle |
| 9 | OpenAI product simplicity | 70 | Disclosure | Provenance rhythm; hide complexity until needed |
| 10 | shadcn/ui | 68 | Primitives | Compose, don’t fork a parallel kit |
Explicit reject list (common traps)
| Temptation | Why rejected |
|---|---|
| FluentUI packages / Windows purple | Wrong brand gravity; we absorb tokens only |
| Cursor.com marketing collage | Spectacle ≠ app density |
| Polaris green-as-brand | Status meaning must stay semantic; accent is --brand |
| Linear purple + Inter Display mandate | Theme knobs own accent/type |
| Scroll-jacked cinema, grain, mix-blend chrome | Breaks focus + a11y |
| Floating chatbot | Violates object-bound AI |
| Influence labels in UI | Frankenstein pastiche |
Merge matrix — who wins each concern
| Concern | Winner | Runner-up | Meridian encoding |
|---|---|---|---|
| Spacing grid | Fluent 2 (4px ramp) | Polaris density-by-task | --surface-pad/gap + 4px multiples; see layout.md |
| Control height | Cursor app + Polaris | Fluent density | data-surface → --control-h* |
| Corner radius | Fluent (control vs layer) | Linear soft chrome | radiusFor control/panel/shell/pill |
| Stroke | Fluent thin 1px | Linear soften borders | edge + border-border |
| Elevation | Polaris soft ramp | Fluent elevation motion | edge → depth-soft → depth-raised |
| Color roles | Polaris meaning | Fluent neutrals/brand sparingly | OKLCH roles; status ≠ brand |
| Theme knobs | Linear (base/accent/contrast) | Fluent alias tokens | --brand + paper/dock; OKLCH |
| Selection | Linear / Cursor | Fluent selected wash | bg-brand/10 |
| Focus | Fluent thicker stroke | — | ring-ring / focus stroke, not fill alone |
| Motion | Fluent (functional, short) + Polaris juicy press | — | Micro only; see animations.md |
| AI surfaces | Cursor app | OpenAI provenance | ai-surfaces.md |
| Cinema | Apple-class film | — | cinematicLaws |
| Anti-drift | Superdesign / Pandya | Frost | design.md + lib/design + check:design |
| Process | Vercel DE principles | — | DNA in meridian.md |
| UX heuristics | NN/g 10 | Polaris | uxLaws · ux.md |
| DX / agent specs | Pandya + Osmani | Capozzi layers | dxLaws · dx.md |
| Agent disclosure | Nielsen progressive disclosure | Cursor app | outcome → trace (agentOutcomeThenTrace) |
Per-influence deep notes (compressed)
1. Cursor application — rank 1
Take: Dense inverted-L chrome; explorer + tabs + object rail; mono metadata; agent bound to selection; no marketing hero collage.
Leave: Dark-IDE-as-personality; unbound chat.
Proofs: workbench.tsx, composer-shell.tsx.
2. Fluent 2 — rank 2
From Shapes, Layout, Motion, Color, Tokens:
| Fluent concept | Value / rule | Meridian |
|---|---|---|
| Global → alias tokens | Context-agnostic globals, semantic aliases | OKLCH vars + colorRoles |
| Spacing base | 4px ramp (size40=4 … size400=40) | Snap pads/gaps/heights to 4 |
| Control radius | Medium 4px / Large 8px | --radius: 0.5rem (8px) → rounded-lg |
| Layer radius | X-Large 12px+ for sheets/popovers | rounded-2xl / rounded-3xl |
| Stroke thin | 1px web | edge inset 1px |
| Neutrals hierarchy | Lighter surfaces for focus | bg-muted/15–30, bg-card |
| Brand sparingly | CTA + selected, not large fills | --brand, bg-brand/10 |
| Semantic status | Danger/caution ≠ decoration | destructive / warning |
| Motion | Functional, natural, short; top-level = fade | Micro; prefers-reduced-motion |
| Breakpoints | small→xxx-large classes | Tailwind + surface lanes |
3. Polaris Pro — rank 3
From Pro design language:
- Assign meaning — color/icon/depth = role
- Increase density — high for data, low for focus
- Juicy interactions — hover quiet, press visceral
- Predictable — same look → same behavior
Meridian: semantic status, data-surface density, press feedback without novelty motion.
4. Linear refresh — rank 4
From How we redesigned the Linear UI (Mar 2024):
- Redesign chrome (sidebar/tabs/headers), don’t disassemble the product
- Align labels/icons on tiny surfaces
- Theme from few knobs (base, accent, contrast); LCH/perceptual uniformity
- Limit accent tint in chrome; darken/lighten content neutrals for contrast
- Environment stress: desktop + browser
Meridian: quiet chrome, OKLCH (stricter than LCH), --brand knob, content contrast pairs.
5. AI anti-drift — rank 5
From Why AI Breaks Your Design System:
Failure modes: token fabrication · within-session drift · between-session amnesia · silent breaking changes.
Fix: freeze tokens · constrain to real components · lock stable regions · validate output.
Meridian: design.md + agents.md + lib/design unions + npm run check:design / check:contrast.
6–10. Craft supports
| Source | Encode |
|---|---|
| Vercel DE | Usefulness; own states; complexity available not required |
| Brad Frost | Parts+wholes; tokens subatomic; prove in real frames |
| Cinema | One idea; full-bleed; svh; no stickers |
| OpenAI simplicity | Progressive disclosure; provenance without chatbot cliché |
| shadcn | Only primitive source |
Decision log (merge conflicts)
| Conflict | Resolution |
|---|---|
| Fluent Medium 4px controls vs Meridian softer app feel | Large 8px control base (--radius: 0.5rem) — Fluent Large, not Medium |
| Fluent elevation shadows vs Polaris bevel | Polaris-shaped edge/depth-*; ban Tailwind shadow-* |
| Linear Inter Display vs Geist | Keep Geist — type is a theme knob family, not Linear skin |
| Polaris green success vs one-accent | Success → brand; destructive/warning stay fixed |
| Cinema spectacle vs app density | Cinema only on marketing data-surface / theater stages |
| Juicy Polaris press vs Fluent restrained motion | Juicy local (button/checkbox); page transitions = fade/micro |
How agents use this file
- Read
design.md+agents.mdfirst. - Use this ranking when a PR proposes a new visual habit — higher rank wins ties.
- Encode wins into
lib/design/ CSS; update this table if rank changes. - Never name ranks 1–10 in product UI.
Sources
- Fluent 2 — Shapes
- Fluent 2 — Layout
- Fluent 2 — Motion
- Fluent 2 — Color
- Fluent 2 — Design tokens
- Shopify Polaris — Pro design language
- Linear — How we redesigned the Linear UI
- Vercel — Design Engineer Principles
- Superdesign — Why AI Breaks Your Design System
- Hardik Pandya — Expose your design system to LLMs