StyleKit

StyleKit · Dark interface spec & prompts

Dark Mode UI Prompts

A dark mode UI prompt tells an AI coding tool what to build, which dark surfaces and text colors to use, and how the interface should behave. Start with the copy-ready prompt below, replace the page type and audience, then use the Tailwind CSS v4 setup and contrast checks to review the generated UI.

Start with this dark mode prompt

Build a responsive dark-mode [page type] for [audience] with React and Tailwind CSS v4. Use #09090b for the page, #131316 for cards, and #1a1a20 for raised surfaces. Start with #fafafa primary text and #a1a1aa secondary text, then verify contrast against each actual background. Require at least 4.5:1 for normal text and 3:1 for large text. Define hover, focus, disabled, loading, empty, and error states. Support keyboard navigation, reduced motion, and a light/dark/system theme preference. Use CSS design tokens and @custom-variant for manual dark mode. Return the component, theme CSS, and a short verification checklist; do not claim accessibility compliance without testing.

Replace the bracketed page type and audience before using this in your AI coding tool.

8 prompts5 surfacesText contrast examplesEN / ZH
01

Elevation: lightness is altitude

Light UIs express elevation with shadows. On dark canvases shadows are nearly invisible, so lightness does the job — the closer a surface sits to the user, the lighter it gets. Select a layer to read its value and role.

section
Spec 02card

Card

#131316

Resting cards and panels. One step lighter than base, separated by a 1px border, not shadow.

Rule: each step is ~3-4% lighter than the one below, separated by a 1px low-contrast border. Five layers cover any interface.

02

The four rules

Write these four into any prompt and AI-generated dark UIs jump a quality tier. Each rule ships with its proof.

section
01

Separate your surfaces

For this palette, start at #09090b and use lighter surfaces for cards and overlays. Test the actual contrast; no single background color guarantees readability.

02

Lighter, less saturated color

Saturated light-theme colors vibrate against dark canvases. Shift text and icons one step lighter — blue-500 becomes blue-400 — and keep 500 for solid fills only.

03

Dim the white, keep three tiers

On the #09090b base, #fafafa primary text, #d4d4d8 body text, and #a1a1aa captions all exceed the 7:1 AAA text threshold. Recheck these tokens when the background changes.

04

One accent, spent carefully

This example reserves its accent for the primary action, active states, and meaningful data. Use additional colors when they carry information, not to fill every surface.

03

Verified contrast

Every ratio below is computed with the WCAG relative-luminance formula. Use the table as a starting point, then test the generated UI rather than assuming the prompt guarantees accessibility.

section
AaFG / BGRatioWCAG
Aa#fafafa / #09090b19.06AAA
Aa#d4d4d8 / #13131612.55AAA
Aa#60a5fa / #09090b7.83AAA
Aa#a1a1aa / #09090b7.76AAA
Aa#a1a1aa / #1313167.24AAA
Aa#3b82f6 / #09090b5.41AA
Aa#71717a / #09090b4.12AA-LG
Aa#52525b / #09090b2.57FAIL
04

The eight prompts

Each one carries concrete hex values, elevation steps, and contrast constraints — dashboards, SaaS, mobile, auth, pricing. Expand to read, copy, and paste straight into ChatGPT, Claude, Cursor, or v0.

section
01Dark Mode Dashboard

Design a dark mode analytics dashboard. Background colors: #0a0a0a for base, #141414 for cards, #1e1e1e for elevated elements. Text: #f5f5f5 for primary, #a3a3a3 for secondary. Use a single accent color (blue #3b82f6) for interactive elements and data highlights. Cards should have subtle 1px borders in #262626. Charts should use the accent color with varying opacity for data series. Ensure all text meets WCAG AA contrast standards.

05

Do and don't

Straight from StyleKit's dark-mode style definition. When a generation drifts, paste the violated line back to the AI.

section

Do

  • Use dark backgrounds bg-slate-900, bg-gray-900, bg-[#0f172a]
  • Cards use slightly lighter backgrounds bg-slate-800/50, brighten on hover hover:bg-slate-800
  • Borders use low contrast border-slate-700, illuminate on hover hover:border-slate-500
  • Text uses text-slate-100 primary, text-slate-400 secondary, secondary text brightens on group-hover group-hover:text-slate-300
  • Highlight colors maintain high saturation blue-500, green-500
  • Buttons use inner glow shadow-[inset_0_1px_0_rgba(255,255,255,0.15)] to simulate dark light source
  • Buttons must have active:scale-[0.98] tactile press confirmation
  • All interactive elements must have focus:ring-2 focus:ring-offset-2 focus:ring-offset-slate-900
  • Card hover with hover:-translate-y-0.5 + dark outer shadow for elevation
  • Use rounded-lg or rounded-xl corners

Don't

  • Do not use pure white text text-white (too harsh)
  • Do not use high-contrast borders
  • Do not use pure black background #000000 (too dull)
  • Do not use dark text on dark backgrounds
  • Do not overuse highlight colors
  • Do not use light-colored shadows (light shadows cannot convey depth on dark backgrounds)
  • Do not omit active:scale-[0.98] on buttons (buttons need tactile confirmation, otherwise they feel like decoration)
  • Do not use focus:ring without focus:ring-offset-slate-900 (focus ring must separate from element to be visible on dark backgrounds)
06

References

Runnable dark templates and related styles — every style page ships full tokens, component recipes, and exportable AI rules.

section

Tailwind CSS v4: theme setup

By default, dark: follows the system preference. To control it with a .dark class on html, add this to your CSS entry, then use utilities such as bg-white dark:bg-zinc-950. Your theme toggle must synchronize the class and the user's preference.

@import "tailwindcss";

/* Enable dark:* utilities when .dark is on <html>. */
@custom-variant dark (&:where(.dark, .dark *));

:root { color-scheme: light; }
.dark { color-scheme: dark; }

Sources and limits

Technical references checked:

Related dark styles

07

Questions, answered

section
01What is dark mode UI design?

Dark mode UI design uses dark surfaces, lighter text, and deliberately chosen accent colors. It is not simply an inverted light theme: each surface, text color, focus indicator, and interaction state needs to remain distinguishable. WCAG 2.2 requires at least 4.5:1 contrast for normal text and 3:1 for large text, with defined exceptions.

02How do I implement dark mode in Tailwind CSS v4?

Tailwind CSS v4 uses the dark: variant and follows prefers-color-scheme by default. For a manual class toggle, add @custom-variant dark (&:where(.dark, .dark *)); after @import "tailwindcss"; in your CSS, then toggle the dark class on the html element. Use CSS custom properties for semantic theme colors, and preserve a light, dark, or system preference. Tailwind v3 configuration examples are not the CSS-first v4 setup.

03What should a dark mode UI prompt include?

Specify the page type, audience, layout, surface and text tokens, accent color, and responsive behavior. Ask for hover, focus, disabled, loading, empty, and error states, plus keyboard navigation and a theme preference. Require contrast checks against each rendered background and ask the tool to return both code and a verification checklist. Replace bracketed placeholders before using the starter prompt.

04What are common mistakes in dark mode design?

Common mistakes include inverting colors without checking the result, making secondary text too faint, relying only on color for errors, omitting focus states, and ignoring the saved theme preference. Pure black and fully opaque white are not automatically accessibility failures. Evaluate the actual foreground/background pairs and reading context instead of applying a universal opacity rule.

05Should I design dark mode first or light mode first?

Choose the initial theme based on the intended audience, content, and environment, then verify both supported themes. Semantic CSS variables make shared components easier to adapt. StyleKit exports are implementation starting points; verify the selected style and your project's light and dark states instead of assuming every export supplies a complete dual-mode system.

06What colors work well for dark mode backgrounds?

This example uses #09090b for the base, #131316 for cards, and #1a1a20 for raised surfaces. These are design choices, not WCAG-mandated colors. Distinguish layers with lightness, borders, and spacing, then verify text and control contrast on each actual surface. There is no universal saturation reduction or background shade that makes every dark interface accessible.

07How do I check dark mode text contrast under WCAG?

WCAG 2.2 SC 1.4.3 requires at least 4.5:1 contrast for normal text and 3:1 for large text. Large text means at least 18pt (24 CSS px), or 14pt (about 18.67 CSS px) when bold. Check the final foreground and background colors, including transparency; do not round a failing ratio up to a pass. Text contrast alone does not establish full WCAG compliance: also test keyboard access, focus, labels, and state information.

Need a different direction? Browse all 148 design styles, or head back to the prompt library.

148 stylesAll prompts

Related prompt libraries

Explore StyleKit's other AI prompt libraries across interface types and stacks.

UI PromptsLanding Page PromptsDashboard PromptsTailwind UI Prompts