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