Name: ui-design
Author: wpuipress

Prompt file imported from wpuipress/uipress-lite (.cursor/commands/ui-design.md). Copyright stays with the author.

UI Design Language: Modern Dark Minimalist

Core Principles

Dark-first design with zinc color palette (950-300 scale)
Content-focused with generous whitespace
Subtle, purposeful interactions
Professional and premium aesthetic
High contrast for accessibility

Color Palette

Background: bg-zinc-950 (primary), bg-zinc-900 (cards/surfaces)
Borders: border-zinc-800/50 with transparency for depth
Text: White (primary), text-zinc-400 (secondary), text-zinc-500 (tertiary)
Interactive hover: hover:bg-zinc-800, hover:border-zinc-700
Opacity modifiers: /50, /70 for layering

Typography

Headings: Large and bold (text-4xl-text-5xl, font-bold)
Body: text-zinc-400 with leading-relaxed
Labels: text-sm, font-medium
Clear hierarchy with size and weight variations

Layout & Spacing

Centered content: max-w-4xl mx-auto
Consistent padding: px-6 lg:px-8, py-16 md:py-24
Vertical rhythm: space-y-6, space-y-8
Responsive breakpoints: md, lg

Components

Rounded corners: rounded-xl (cards), rounded-lg (buttons)
Cards: bg-zinc-900/50 with subtle borders and hover states
Buttons: bg-zinc-800 with hover lift effects
Loading states: Spinner animations with zinc colors

Interactions

All transitions: transition-all duration-200
Hover states: Color shifts + micro-animations (translate-x-1)
Group hover: Parent-child coordinated effects
Disabled states: disabled:opacity-50 disabled:cursor-not-allowed

Visual Effects

Grayscale images with low opacity (opacity-20 grayscale)
Gradient overlays: bg-gradient-to-br from-zinc-800 to-zinc-900
Subtle shadows on featured content
Background patterns at low opacity for texture

Do's

Use zinc palette exclusively for neutrals
Maintain 50/70 opacity for layering depth
Add smooth transitions to all interactive elements
Use group-hover for coordinated animations
Keep borders subtle with transparency

Don'ts

Mix other neutral palettes (slate, gray, stone)
Use sharp transitions or jarring animations
Overcomplicate with too many colors
Forget disabled/loading states

Install ui-design and it becomes one more candidate the router can pick - when it fits.

A listing is a routing target with a manifest: what it does, which domains it covers, what it costs and who publishes it. Once installed it sits beside your own models and tools, is scored like any other candidate for each request, and shows up in the trace when it wins. Ratings come from workspaces that installed it, one per account.

# UI Design Language: Modern Dark Minimalist ## Core Principles - Dark-first design with zinc color palette (950-300 scale) - Content-focused with generous whitespace - Subtle, purposeful interactions - Professional and premium aesthetic - High contrast for accessibility ## Color Palette - **Background**: `bg-zinc-950` (primary), `bg-zinc-900` (cards/surfaces) - **Borders**: `border-zinc-800/50` with transparency for depth - **Text**: White (primary), `text-zinc-400` (secondary), `text-zinc-500` (tertiary) - **Interactive hover**: `hover:bg-zinc-800`, `hover:border-zinc-700` - **Opacity modifiers**: `/50`, `/70` for layering ## Typography - **Headings**: Large and bold (`text-4xl`-`text-5xl`, `font-bold`) - **Body**: `text-zinc-400` with `leading-relaxed` - **Labels**: `text-sm`, `font-medium` - Clear hierarchy with size and weight variations ## Layout & Spacing - **Centered content**: `max-w-4xl mx-auto` - **Consistent padding**: `px-6 lg:px-8`, `py-16 md:py-24` - **Vertical rhythm**: `space-y-6`, `space-y-8` - **Responsive breakpoints**: md, lg ## Components - **Rounded corners**: `rounded-xl` (cards), `rounded-lg` (buttons) - **Cards**: `bg-zinc-900/50` with subtle borders and hover states - **Buttons**: `bg-zinc-800` with hover lift effects - **Loading states**: Spinner animations with zinc colors ## Interactions - **All transitions**: `transition-all duration-200` - **Hover states**: Color shifts + micro-animations (translate-x-1) - **Group hover**: Parent-child coordinated effects - **Disabled states**: `disabled:opacity-50 disabled:cursor-not-allowed` ## Visual Effects - Grayscale images with low opacity (`opacity-20 grayscale`) - Gradient overlays: `bg-gradient-to-br from-zinc-800 to-zinc-900` - Subtle shadows on featured content - Background patterns at low opacity for texture ## Do's - Use zinc palette exclusively for neutrals - Maintain 50/70 opacity for layering depth - Add smooth transitions to all interactive elements - Use group-hover for coordinated animations - Keep borders subtle with transparency ## Don'ts - Mix other neutral palettes (slate, gray, stone) - Use sharp transitions or jarring animations - Overcomplicate with too many colors - Forget disabled/loading states

{ "prompt": "# UI Design Language: Modern Dark Minimalist\n\n## Core Principles\n\n- Dark-first design with zinc color palette (950-300 scale)\n- Content-focused with generous whitespace\n- Subtle, purposeful interactions\n- Professional and premium aesthetic\n- High contrast for accessibility\n\n## Color Palette\n\n- **Background**: `bg-zinc-950` (primary), `bg-zinc-900` (cards/surfaces)\n- **Borders**: `border-zinc-800/50` with transparency for depth\n- **Text**: White (primary), `text-zinc-400` (secondary), `text-zinc-500` (tertiary)\n- **Interactive hover**: `hover:bg-zinc-800`, `hover:border-zinc-700`\n- **Opacity modifiers**: `/50`, `/70` for layering\n\n## Typography\n\n- **Headings**: Large and bold (`text-4xl`-`text-5xl`, `font-bold`)\n- **Body**: `text-zinc-400` with `leading-relaxed`\n- **Labels**: `text-sm`, `font-medium`\n- Clear hierarchy with size and weight variations\n\n## Layout & Spacing\n\n- **Centered content**: `max-w-4xl mx-auto`\n- **Consistent padding**: `px-6 lg:px-8`, `py-16 md:py-24`\n- **Vertical rhythm**: `space-y-6`, `space-y-8`\n- **Responsive breakpoints**: md, lg\n\n## Components\n\n- **Rounded corners**: `rounded-xl` (cards), `rounded-lg` (buttons)\n- **Cards**: `bg-zinc-900/50` with subtle borders and hover states\n- **Buttons**: `bg-zinc-800` with hover lift effects\n- **Loading states**: Spinner animations with zinc colors\n\n## Interactions\n\n- **All transitions**: `transition-all duration-200`\n- **Hover states**: Color shifts + micro-animations (translate-x-1)\n- **Group hover**: Parent-child coordinated effects\n- **Disabled states**: `disabled:opacity-50 disabled:cursor-not-allowed`\n\n## Visual Effects\n\n- Grayscale images with low opacity (`opacity-20 grayscale`)\n- Gradient overlays: `bg-gradient-to-br from-zinc-800 to-zinc-900`\n- Subtle shadows on featured content\n- Background patterns at low opacity for texture\n\n## Do's\n\n- Use zinc palette exclusively for neutrals\n- Maintain 50/70 opacity for layering depth\n- Add smooth transitions to all interactive elements\n- Use group-hover for coordinated animations\n- Keep borders subtle with transparency\n\n## Don'ts\n\n- Mix other neutral palettes (slate, gray, stone)\n- Use sharp transitions or jarring animations\n- Overcomplicate with too many colors\n- Forget disabled/loading states", "variables": [], "notes": "UI Design Language: Modern Dark Minimalist", "metadata": { "source": { "provider": "github-cursor-commands", "repository": "https://github.com/wpuipress/uipress-lite", "path": ".cursor/commands/ui-design.md", "ref": "fc0be8407f6e8bfe1b264e49f3162405896f1a57", "url": "https://github.com/wpuipress/uipress-lite/blob/fc0be8407f6e8bfe1b264e49f3162405896f1a57/.cursor/commands/ui-design.md", "key": "wpuipress/uipress-lite/.cursor/commands/ui-design.md" } } }

ui-design

About