acd-remix-warp-x-sentry-design - SKILL.md Agent Skill

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

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