Inspired by Raycast's keyboard-first launcher UX. A polished command palette item card featuring a left icon, title with subtle description, and right-aligned keyboard shortcut badges. Hover reveals a smooth highlight with a left accent indicator.
Export Snippets
Switch formats without compressing the preview layout.
AI Prompt
Natural-language design direction for AI coding tools.
Create a Raycast-style command palette item card. The layout is a single horizontal row: a 20x20 icon on the left (muted #A78BFA), then a vertical stack of title (#F5F3FF, font-weight 500, 14px) and optional description (#A78BFA, 12px), and right-aligned keyboard shortcut badges. Each badge is a small rounded rect (bg #16131E, border 1px solid #2E2546, text #A78BFA, font-mono 11px, px-1.5 py-0.5, letter-spacing 0.02em). The card has no background by default. On hover, it gains a subtle fill with gradient hint (linear-gradient to right from #16131E to #2E2546)), a thin left-side accent bar (2px wide, #8B5CF6 warm purple), and the icon brightens to #A78BFA. On focus-visible, show a 1px ring in #8B5CF6 at 40% opacity. Border radius is 8px. Transition is 120ms ease. This card conveys developer precision, speed, and keyboard-first design.Inspired by Raycast's keyboard-first launcher UX. A polished command palette item card featuring a left icon, title with subtle description, and right-aligned keyboard shortcut badges. Hover reveals a smooth highlight with a left accent indicator.