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