acd-remix-mercury-x-linear-design

name	acd-remix-mercury-x-linear-design
description	Remix. Mercury's cream-canvas fintech warmth + Linear's surgical UI density. For B2B finance dashboards, billing consoles, and treasury tools that need Linear-grade information density without losing the trust-broadcasting warmth Mercury. Use when building UI components, applying design tokens, or implementing visual styles for remix mercury x linear.
license	CC-BY-NC-SA-4.0
metadata	{"risk":"unknown","source":"community","kind":"mode","category":"design-systems","tags":["design-system","ui","remix","claude-design"]}

Mercury × Linear — Surgical Density On Warm Paper Design Mode

You are an expert in the Mercury × Linear — Surgical Density On Warm Paper aesthetic from the awesome-claude-design library. Apply its visual vocabulary, palette, typography, and component patterns when building UI.

Source DESIGN.md

Remix. Mercury's cream-canvas fintech warmth + Linear's surgical UI density. For B2B finance dashboards, billing consoles, and treasury tools that need Linear-grade information density without losing the trust-broadcasting warmth Mercury earned.

Parent DNA: Mercury 55% · Linear 45%

1. Visual Theme & Atmosphere

Mercury sets the canvas — cream paper, warm gray ink, indigo as the only saturated voice. Linear sets the geometry — 4px base, dense tables, keyboard-first affordances, command-bar muscle memory, hairline borders.

The page reads like a financial broadsheet that opens into a Linear-grade dashboard. Editorial restraint above the fold; surgical density inside the app.

Mood: trustworthy, deliberate, fast, unhurried at rest, instant under fingers.

2. Color Palette & Roles

/* canvas from Mercury — warm fintech paper */
--bg:              #f6f5f2
--bg-alt:          #ebe8e0
--surface:         #ffffff
--surface-alt:     #fbfaf6
--text:            #2a2924
--text-muted:      #5a5548
--text-dim:        #8a8478
--border:          #ded9ca
--border-strong:   #c9c3b3

/* accent from Mercury — indigo holds (fintech trust) */
--accent:          #5266eb
--accent-hover:    #4255d4
--accent-soft:     #e2e6fb

/* signals from Mercury */
--success:         #2f7d57
--warning:         #c98a42
--danger:          #b54a3a

/* dark mode adopts Linear's discipline, warmer than pitch */
--bg-dark:         #15140f
--bg-dark-alt:     #1d1c16
--surface-dark:    #25241d
--text-dark:       #f6f5f2
--text-dark-muted: #a8a394
--border-dark:     #34322a

Arbitration: Mercury's cream wins all surfaces — Linear's pure white would kill the warmth. Mercury indigo wins over Linear purple — fintech trust signal cannot break. Linear's discipline shows in dark mode (warmer Mercury cream-on-coal, but Linear-tight contrast).

3. Typography Rules

• Display / h1 (marketing, statements): Arcadia Display (Mercury), fallback Tiempos Headline. Weight 400, letter-spacing -1%.
• App headings + body: Inter (Linear), weights 400 / 500 / 600. Body 14/22 in app, 16/26 in marketing.
• Numerals (every dollar, every row, every chart): Arcadia tabular variant (Mercury) — never proportional figures on money. Tabular fallback to font-variant-numeric: tabular-nums.
• Mono: Berkeley Mono (Linear) for transaction IDs, command-bar input, code.

Scale: Linear's tight ramp + Mercury's display top. 11 / 13 / 14 / 16 / 18 / 22 / 28 / 36 / 48 / 72.

Display serif fires above 36px only. App UI stays Inter for density. Tabular numerals are non-negotiable on money.

4. Component Stylings

Button (primary)

• Geometry: Linear-tight on app surfaces (radius 6, padding 8/14, weight 500). Mercury-pill on marketing (radius 999, padding 10/20, weight 500).
• Fill --accent, text #ffffff. No shadow. Hover: --accent-hover, no lift.

Button (secondary)

• App: --surface fill, 1px --border, --text color. Linear pattern.
• Marketing: --bg-alt fill, no border, pill radius. Mercury pattern.

Card / dashboard tile

• --surface (white) on --bg, 1px --border, radius 8, no shadow.
• Account tiles: balance in 36px Arcadia tabular, label in 12px uppercase eyebrow --text-muted, hairline --border separator above row data.

Input

• App: 1px --border, radius 6, padding 8/12. Linear geometry.
• Forms (signup, transfer): pill radius 999, padding 10/16. Mercury geometry.
• Focus on both: 2px --accent ring, 2px offset.

Tables (the centerpiece)

• Linear density: 14px Inter body, hairline --border between rows, 12px uppercase eyebrow header on --bg-alt, sticky header.
• Mercury discipline: tabular numerals on every money column, right-aligned. Account / category columns left-aligned. Currency symbol always present.
• Row height 36px. Hover row: --surface-alt. Selected row: 1px --accent left border.

Command bar

• Linear pattern. Trigger ⌘K. Floating panel, --surface fill, 1px --border-strong, radius 12, max-width 640px. Mono input. Result rows in 14px Inter with 12px mono shortcut hints right-aligned.

Keyboard hints

• Linear kbd style: mono characters, 11px, --bg-alt background, 4px radius, 1px --border.

Statement / receipt surface

• Mercury editorial mode: 720px max width, Arcadia Display heading, 16px body, generous vertical rhythm (96px section breaks).

5. Layout Principles

Two modes. Page-type dictates.

App / dashboard mode (Linear discipline)

• 1280px max app shell, 240px persistent sidebar, content right of it.
• 24px gutter, 12-column.
• 4px base. 4 / 8 / 12 / 16 / 24 / 32 / 48.
• Dense. Tables breathe through hairlines, not padding.

Marketing / statement mode (Mercury restraint)

• 1080px max, 24px gutter.
• Reading column 720px on long-form (statements, agreements, blog).
• 96px section breaks. Vertical rhythm earns the trust.

6. Depth & Elevation

Flat. Depth comes from cream surface tone shifts (--bg-alt lift from --bg, --surface white over both) and 1px hairline borders. Both parents agree here.

Shadows reserved for floating affordances only:

• Modals / command bar: 0 12px 32px rgba(42,41,36,0.10) (Mercury warmth).
• Popovers / dropdowns: 0 4px 12px rgba(42,41,36,0.06).

Never on cards, tiles, buttons, or table rows.

7. Do's and Don'ts

Do

• Tabular numerals on every money figure, every chart label, every table cell.
• Use indigo for one CTA per viewport — pair with cream secondary, never two saturated buttons.
• Pick app-mode or marketing-mode per page; don't blend within a page.
• Use Linear's command bar pattern (⌘K) on every app surface — muscle memory matters.
• Cream-on-coal for dark mode, never pitch black.

Don't

• Use Linear purple — replaced by Mercury indigo for fintech trust.
• Set transaction tables in proportional figures.
• Apply pill-radius buttons inside dashboard tables.
• Add card shadows or hover lift.
• Use Arcadia Display below 36px (reads decorative, not functional).
• Introduce a second saturated accent for "balance up" or "alerts" — use warm-gray hierarchy + signal colors only.

8. Responsive Behavior

• App shell: sidebar collapses to icon rail at 1024px, full drawer at 768px.
• Dashboard tables become stacked cards below 768px, balance + label + delta per card.
• Marketing display serif scales 72 → 48 → 36.
• Statement reading column padding-only below 720px, body holds at 16px.
• Command bar full-width sheet on mobile.

9. Agent Prompt Guide

Bias: cream warm canvas, Mercury indigo as the only saturated color, Linear-tight 4px base + 14px Inter body in app surfaces, Arcadia tabular numerals on every money figure, hairline 1px borders for depth, command bar (⌘K) on every app screen, dual-mode layout (app vs marketing), pill buttons in marketing only, sharp-radius buttons in app.

Reject: Linear purple, pill radius inside tables, proportional figures on money, drop shadows on cards or tiles, second saturated accent, Arcadia in app UI controls, pure white surfaces, glass / blur, hover lift, gradients of any kind.

Creative Tensions (documented for team)

• Density vs warmth. Linear wants every pixel earning; Mercury wants the page to breathe. Resolution: app-mode picks Linear, marketing-mode picks Mercury, never one inside the other on the same surface.
• Button radius mismatch. Mercury's pill CTAs feel premium in marketing but wrong inside a dashboard table. Sharp radius wins inside the app shell; pill wins in marketing — enforce by surface, not by component.
• Indigo vs purple. Indigo and Linear purple sit close on the wheel. Designers will reach for purple from muscle memory. Token-lock indigo and remove purple from the swatch library.
• Tabular numerals everywhere. Even non-money tables (counts, percentages) must use tabular. The discipline reads as fintech-grade — break it and the trust drops.

Parent-brand DNA

Tokens traced:

• From Mercury: 26 (cream surface palette, warm-gray ink ramp, indigo accent + hover + soft, signal palette, Arcadia Display, Arcadia tabular numerals, pill button radius for marketing, sidebar persistent at 240px, account tile pattern, statement reading column 720px, modal shadow tone, dark-mode warmth, hairline borders on cream)
• From Linear: 21 (Inter UI body, Berkeley Mono, 4px base scale, tight 36px row height, command bar ⌘K pattern, kbd hint style, sharp 6px button radius, app shell 1280px, 12-column 24px gutter, hover row pattern, sticky table headers, dark-mode density, eyebrow header treatment)

Net DNA: Mercury 55% · Linear 45%.

When to Use This Mode

• When user references mercury-x-linear or the remix family as inspiration
• When building UI in the remix aesthetic
• When applying this brand's color palette, typography, or layout patterns
• When critiquing UI for adherence to this aesthetic