Acd Remix Warp X Sentry Design

---
name: acd-remix-warp-x-sentry-design
description: "Remix. Warp's mono grid + Sentry's lilac purple. Dashboards that don't read as funeral parlors. Use when building UI components, applying design tokens, or implementing visual styles for remix warp x sentry."
license: CC-BY-NC-SA-4.0
metadata:
  risk: unknown
  source: community
  kind: mode
  category: design-systems
  tags: [design-system, ui, remix, claude-design]
---

# Warp × Sentry — Developer Dashboard With Warmth Design Mode

You are an expert in the Warp × Sentry — Developer Dashboard With Warmth aesthetic from the awesome-claude-design library. Apply its visual vocabulary, palette, typography, and component patterns when building UI.

## Source DESIGN.md

Remix. Warp's mono grid + Sentry's lilac purple. Dashboards that don't read as funeral parlors.

## Parent DNA: Warp 60% · Sentry 40%

## 1. Visual Theme & Atmosphere

Pro-tool density meets emotional color. Warp's deep navy surface stack stays — it's where engineers live. Sentry's lilac replaces Warp's teal at the action layer because lilac softens severity without losing technical seriousness. Coral remains as warning.

Mood: technical, calm, persistent.

## 2. Color Palette & Roles

```
/* surfaces from Warp */
--bg:              #0b0d14
--bg-alt:          #11141d
--surface:         #161a25
--surface-2:       #1e2331
--text:            #f1f1f4
--text-muted:      #9aa1b3
--text-dim:        #5f6580
--border:          #232838
--border-strong:   #2e3447

/* accent from Sentry — replaces Warp's teal */
--accent:          #7553f6   /* Sentry-adjacent lilac, brighter for dark bg */
--accent-hover:    #8967ff
--accent-soft:     #584774   /* used for empty-state illustrations */

/* state */
--warning:         #ff7a59   /* Warp coral retained */
--danger:          #f6827d   /* Sentry pink-coral for alerts */
--success:         #5ee78a   /* Warp green retained */
```

Arbitration: Warp's teal lost — too cold next to Sentry's pink-warning state, the two clashed at error/action proximity. Sentry lilac wins because it harmonizes with Warp's coral instead of fighting it. Sentry's `#362d59` background lost to Warp's deeper `#0b0d14` for terminal-feel preservation.

## 3. Typography Rules

- **UI:** `Roobert` (from Warp).
- **Headlines:** `Rubik` weight 600 (from Sentry) — used at 24px+ only, gives marketing pages personality without dominating dashboards.
- **Code + numerals:** `JetBrains Mono` (Warp).

Scale: Warp's tight ramp. 11 / 12 / 13 / 15 / 17 / 20 / 26 / 34 / 44 / 56.

Tabular numerals globally on metrics.

Arbitration: Sentry's Rubik would feel rounded-soft if used at small UI sizes. Cap Rubik to display-only.

## 4. Component Stylings

**Buttons**
- Primary: `--accent` (lilac) fill, `#0b0d14` text, radius 8, padding 8/14, weight 500.
- Secondary: `--surface-2` fill, `--text` color, `--border-strong` outline.
- Destructive: `--danger` fill, `#0b0d14` text.

**Cards / blocks**
- Warp pattern preserved: `--surface` fill, 1px `--border`, radius 10.
- Empty states use `--accent-soft` (Sentry lilac-grey) illustration tint — Sentry's signature move.

**Inputs**
- Warp geometry: `--bg-alt` fill, 1px `--border-strong`, radius 8.
- Focus: 2px `--accent` lilac ring.

**Alert / issue rows**
- Borrow Sentry's pattern: 4px left border in `--warning` or `--danger`, `--surface` fill.
- Severity icon left, title middle, count right (mono, tabular).

## 5. Layout Principles

Warp's full-width app shell with persistent sidebar wins — Sentry's narrower 1280 marketing layout reserved for landing page only.

- App: full-width, sidebar 240px, main content fluid.
- Marketing: 1280 max, 24px gutter, 12-col.
- 4px base. 4/8/12/16/24/32/48 scale.

## 6. Depth & Elevation

Warp's layered surfaces stay. `bg → surface → surface-2 → modal`. Modals add `0 24px 48px rgba(0,0,0,0.55)`.

No conflict with Sentry — both rejected drop shadows on cards.

## 7. Do's and Don'ts

**Do**
- Use lilac as the only chromatic action color.
- Use Sentry's left-border alert-row pattern wherever a list of issues/incidents appears.
- Render numbers in JetBrains Mono tabular.

**Don't**
- Re-introduce Warp's teal. Lilac won; honor it.
- Use Rubik below 24px — kills technical density.
- Add a third chromatic accent.
- Use `--accent-soft` for action — it's reserved for illustration/empty-state only.

## 8. Responsive Behavior

- Sidebar collapses to icon rail at 1024px, full overlay at 768px.
- Issue rows stack severity-icon + title at 640px, count moves to row two.
- Marketing hero scales 56 → 34 → 26.

## 9. Agent Prompt Guide

Bias: Warp navy surface stack, Sentry lilac for action only, Rubik display 24px+, JetBrains Mono tabular numerals, left-border alert pattern, no teal anywhere.

Reject: Warp's teal accent, Rubik in UI controls, drop shadows, light themes, mixing lilac with a second chromatic accent.

## Creative Tensions (documented for team)

- **Action-color identity loss.** Warp users associate the brand with teal. Removing it for lilac is a real cost — the dashboard no longer reads "Warp." Net: marketing pages should still use Warp teal in hero illustration so brand recognition survives; product chrome stays lilac.
- **Severity adjacency.** Sentry's pink-coral danger and Warp's coral warning sit close on the wheel. Always order danger > warning in lists so the warmer hue dominates upward visual flow.

## Parent-brand DNA

Tokens traced:
- From Warp: 28 (surface stack, Roobert, JetBrains Mono, button geometry, kbd, sidebar layout, dark-only discipline, tabular numerals)
- From Sentry: 18 (lilac accent, Rubik display, alert-row left-border pattern, lilac-grey empty-state illustration tint, pink-coral danger, marketing 1280 max-width)

Net DNA: Warp 60% · Sentry 40%.

## When to Use This Mode

- When user references **warp-x-sentry** 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