---
name: design-prompt-modern-dark
description: Use when the user wants a landing page, interface, or visual system in the Modern Dark style from Design Prompts, or explicitly asks for modern-dark, modern dark
---

# Design Prompt Modern Dark

## Overview

Use this skill when the user wants the Modern Dark aesthetic. Keep the target product's content and requirements intact, then translate this style into the requested stack or artifact.

A cinematic, high-precision dark mode design featuring layered ambient lighting through animated gradient blobs, mouse-tracking spotlight effects, and meticulously crafted micro-interactions that feel like premium software.


Read [references/style.md](references/style.md) before implementation whenever the task depends on this aesthetic.

## When to Use

- Requests for the Modern Dark style or close synonyms tied to this aesthetic
- New landing pages, marketing sites, dashboards, or polished visual explorations
- Re-skinning an existing page while preserving the user's IA and content

## Working Rules

- Treat the style as direction, not as a literal Acme clone.
- Preserve accessibility, responsive behavior, and existing product constraints.
- If the task lives inside an existing design system, adapt this style without breaking local patterns.

## Prompt Starter

- Design a [surface] for [brand or product] in the "Modern Dark" style.
- Keep the visual system dark-first with #6366F1 as the anchor accent.
- Use a clean sans-led hierarchy with confident sizing.
- Start from these section archetypes when relevant: hero, stats, product-detail, features, blog, how-it-works, benefits, testimonials, pricing, faq, footer.
- Translate the style to the user's domain and copy; do not recreate the Acme demo literally.
- Preserve any existing product constraints, content model, and accessibility requirements.