Dark Mode

STYLEKIT_STYLE_REFERENCE
style_name: Dark Mode
style_slug: dark-mode
style_source: /styles/dark-mode

# Hard Prompt

## When To Use
Use this when you want AI to generate code with strict style consistency. It is the safest default for production UI.

## How To Use
- Copy the full prompt into ChatGPT, Claude, Cursor, or another coding assistant.
- Append the concrete product/page requirement after the prompt.
- After generation, check the forbidden rules and interaction states before accepting the output.

Strictly follow the style rules below and maintain consistency. No style drift allowed.

## Requirements

- Prioritize style consistency first, then creative extension.
- When conflicts arise, treat prohibitions as the highest priority.
- Self-check before output: verify colors, typography, spacing, and interactions still match this style.

## Style Rules

STYLE: Dark Mode
TYPE: Professional dark interface design

MUST USE:
- Dark backgrounds: bg-slate-900, bg-gray-900, bg-[#0f172a]
- Card backgrounds: bg-slate-800/50 (semi-transparent) at rest, bg-slate-800 on hover
- Low contrast borders: border-slate-700 at rest, border-slate-500 on hover (border illumination)
- Text hierarchy: text-slate-100 (primary), text-slate-400 (secondary); secondary brightens to group-hover:text-slate-300
- Saturated accent colors: blue-500, green-500
- Inset top-edge glow on buttons: shadow-[inset_0_1px_0_rgba(255,255,255,0.15)]
- Hover states: hover:bg-slate-800, hover:bg-white/5
- Standard rounded corners: rounded-lg, rounded-xl

MUST AVOID:
- Pure white text (too harsh)
- High contrast borders
- Pure black background (#000000)
- Dark text on dark backgrounds
- Too many highlight colors
- Light-colored shadows (light shadows invisible on dark backgrounds)
- Buttons without active:scale-[0.98] (no tactile confirmation)
- focus:ring without focus:ring-offset-slate-900 (ring invisible on dark background)

COLOR HIERARCHY:
- Background: slate-900 (#0f172a)
- Surface: slate-800/50 to slate-800 on hover
- Border: slate-700 to slate-500 on hover
- Text primary: slate-100 to white on group-hover
- Text secondary: slate-400 to slate-300 on group-hover
- Accent: blue-500, green-500

TYPOGRAPHY:
- Headings: font-semibold text-slate-100
- Body: text-slate-300 or text-slate-400

## Animation & Interaction Rules

- Illumination Physics: On hover, borders brighten from slate-700 to slate-500 (hover:border-slate-500). This simulates a nearby light source illuminating the card's edge -- NOT a background change. Combined with hover:bg-slate-800 (surface rises slightly), the effect is of a surface catching light.
- Text Light-Up: Secondary text (text-slate-400) transitions to group-hover:text-slate-300. Title text (text-slate-200) to group-hover:text-white. Use transition-colors duration-200. The card must use the group class.
- Inset Glow Button: Primary buttons use shadow-[inset_0_1px_0_rgba(255,255,255,0.15)] at rest (top edge highlight simulating overhead light). On hover: shadow-[inset_0_1px_0_rgba(255,255,255,0.2),0_0_10px_rgba(59,130,246,0.3)] -- glow intensifies and bleeds outward. On active: shadow-[inset_0_2px_4px_rgba(0,0,0,0.3)] -- inset depression shadow simulates the button being physically pressed down.
- Tactile Confirmation: ALL buttons must use active:scale-[0.98]. The 2% scale reduction is the minimum signal that a press occurred. Without it, a dark button feels completely unresponsive.
- Focus Ring Visibility: ALWAYS pair focus:ring-2 with focus:ring-offset-2 focus:ring-offset-slate-900. Without ring-offset-slate-900, the ring merges with the dark background and becomes invisible -- violating WCAG 2.1 AA.
- Card Elevation: hover:-translate-y-0.5 + hover:shadow-[0_8px_30px_rgba(0,0,0,0.5)] -- the deep dark shadow reinforces the dark environment. Never use light-colored shadows on dark backgrounds.
- Easing: duration-200 ease-out for buttons and interactive controls. duration-300 ease-out for card-level transitions. Never exceed duration-300.

## Self-Check

After generating code, verify:
1. All buttons have active:scale-[0.98]
2. All focusable elements have focus:ring-2 focus:ring-{color}-500 focus:ring-offset-2 focus:ring-offset-slate-900
3. Cards use group class; text uses group-hover:text-* for light-up
4. Card hover: border brightens (hover:border-slate-500) + bg lightens (hover:bg-slate-800) + hover:-translate-y-0.5
5. Button shadows use inset for glow, deep dark for elevation
6. No light-colored shadows anywhere

---

# Dark Mode Design System

> Elegant dark interface design with low-contrast layering, subtle borders and highlights. Ideal for developer tools, professional applications, and night reading mode.

## Design Philosophy

Dark Mode design emphasizes creating a comfortable reading experience and clear information hierarchy on dark backgrounds.

Core principles:
- Eye comfort: Reduce screen brightness to minimize visual fatigue
- Clear hierarchy: Distinguish levels through grayscale and transparency
- Highlight focus: Use highlight colors to guide user attention
- Professional atmosphere: Convey a sense of technology and professionalism

---

## Token Dictionary (exact class mapping)

### Border
```
Width: border
Color: border-slate-700
Radius: rounded-lg
```

### Shadow
```
sm: shadow-none
md: shadow-none
lg: shadow-lg shadow-black/20
hover: shadow-none
focus: ring-1 ring-blue-500
```

### Interaction
```
Hover translate: (none)
Hover scale: (none)
Hover opacity: hover:bg-slate-700
Transition: transition-colors duration-200
Active: active:scale-95
```

### Typefaces
```
Heading: font-semibold
Body: font-normal
Mono: font-mono
```

### Type scale
```
Hero: text-4xl md:text-5xl lg:text-6xl
H1: text-3xl md:text-4xl
H2: text-2xl md:text-3xl
H3: text-xl md:text-2xl
Body: text-sm md:text-base
Small: text-xs
```

### Spacing
```
Section: py-12 md:py-16 lg:py-20
Container: px-4 md:px-6 lg:px-8
Card: p-6
Gap sm: gap-4
Gap md: gap-6
Gap lg: gap-8
```

### Color roles
```
Background primary: bg-slate-900
Background secondary: bg-slate-800
Background accent: bg-blue-600, bg-green-500, bg-amber-500
Text primary: text-slate-100
Text secondary: text-slate-300
Text muted: text-slate-400
Button primary: bg-blue-600 text-white hover:bg-blue-500
Button secondary: bg-slate-700 text-slate-200 hover:bg-slate-600
```

---

## [FORBIDDEN]

These classes are banned in this style. Check for them before returning code:

### Banned classes
- `bg-white`
- `bg-gray-50`
- `border-black`
- `shadow-white`
- `bg-black`

### Banned patterns
- matches `^text-white$`
- matches `^bg-white`
- matches `^bg-gray-[1-3]00`
- matches `^bg-black$`

### Why they are banned
- `text-white`: Use text-slate-100 for softer contrast
- `bg-white`: Dark mode uses dark backgrounds
- `bg-black`: Use bg-slate-900 for better depth

> WARNING: if your code contains any of the above, replace it before shipping.

---

## [REQUIRED]

### Every button must include
```
px-4 py-2
rounded-lg
font-medium
transition-colors duration-200
```

### Every card must include
```
bg-slate-800
border border-slate-700
rounded-xl
```

### Every input must include
```
bg-slate-800
border border-slate-700
rounded-lg
text-slate-100
placeholder:text-slate-500
focus:border-blue-500
focus:ring-1 focus:ring-blue-500
```

---

## [COMPARE] Dark Mode wrong vs right

The wrong examples below stand for generic library defaults that were never adapted to this style. Do not read them as visual suggestions.

### Button

[WRONG] **Wrong** (generic component library default, do not copy):
```html
<button class="{GENERIC_LIBRARY_BUTTON_DEFAULT}">
 Click me
</button>
```

[CORRECT] **Right** (uses this style's tokens):
```html
<button class="px-4 py-2 rounded-lg font-medium transition-colors duration-200 bg-blue-600 text-white hover:bg-blue-500">
 Click me
</button>
```

### Card

[WRONG] **Wrong** (generic card, not adapted to this style):
```html
<div class="{GENERIC_LIBRARY_CARD_DEFAULT}">
 <h3>{TITLE}</h3>
</div>
```

[CORRECT] **Right** (uses this style's card tokens):
```html
<div class="bg-slate-800 border border-slate-700 rounded-xl p-6">
 <h3 class="font-semibold text-xl md:text-2xl">{TITLE}</h3>
</div>
```

### Input

[WRONG] **Wrong** (generic input, not adapted to this style):
```html
<input class="{GENERIC_LIBRARY_INPUT_DEFAULT}" />
```

[CORRECT] **Right** (uses this style's input tokens):
```html
<input class="bg-slate-800 border border-slate-700 rounded-lg text-slate-100 placeholder:text-slate-500 focus:border-blue-500 focus:ring-1 focus:ring-blue-500" placeholder="{PLACEHOLDER}" />
```

---

## [TEMPLATES] Dark Mode page skeletons

These skeletons use this style's tokens only. Replace `{PLACEHOLDER}` values, but keep every token in place:

### Navigation
```html
<nav class="bg-slate-900 text-slate-100 border border-slate-700 px-4 md:px-6 lg:px-8">
 <div class="flex items-center justify-between max-w-6xl mx-auto gap-6">
 <a href="/" class="font-semibold text-xl md:text-2xl">
 {LOGO_TEXT}
 </a>
 <div class="flex gap-6 font-normal text-xs">
 {NAV_LINKS}
 </div>
 </div>
</nav>
```

### Hero section
```html
<section class="bg-blue-600 text-slate-100 py-12 md:py-16 lg:py-20 px-4 md:px-6 lg:px-8">
 <div class="max-w-4xl mx-auto">
 <h1 class="font-semibold text-4xl md:text-5xl lg:text-6xl">
 {HEADLINE}
 </h1>
 <p class="font-normal text-sm md:text-base max-w-xl">
 {SUBHEADLINE}
 </p>
 <button class="px-4 py-2 rounded-lg font-medium transition-colors duration-200 bg-blue-600 text-white hover:bg-blue-500">
 {CTA_TEXT}
 </button>
 </div>
</section>
```

### Card grid
```html
<section class="bg-slate-900 text-slate-100 py-12 md:py-16 lg:py-20 px-4 md:px-6 lg:px-8">
 <div class="max-w-6xl mx-auto">
 <h2 class="font-semibold text-2xl md:text-3xl">{SECTION_TITLE}</h2>
 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
 <!-- Card template - repeat for each card -->
 <div class="bg-slate-800 border border-slate-700 rounded-xl p-6">
 <h3 class="font-semibold text-xl md:text-2xl">{CARD_TITLE}</h3>
 <p class="font-normal text-sm md:text-base text-slate-400">{CARD_DESCRIPTION}</p>
 </div>
 </div>
 </div>
</section>
```

### Form input
```html
<input class="bg-slate-800 border border-slate-700 rounded-lg text-slate-100 placeholder:text-slate-500 focus:border-blue-500 focus:ring-1 focus:ring-blue-500" placeholder="{PLACEHOLDER}" />
```

### Footer
```html
<footer class="bg-slate-800 text-slate-300 py-12 md:py-16 lg:py-20 px-4 md:px-6 lg:px-8">
 <div class="max-w-6xl mx-auto">
 <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
 <div>
 <span class="font-semibold text-xl md:text-2xl">{LOGO_TEXT}</span>
 <p class="font-normal text-xs">{TAGLINE}</p>
 </div>
 <div>
 <h4 class="font-semibold text-xl md:text-2xl">{COLUMN_TITLE}</h4>
 <ul class="font-normal text-xs">
 {FOOTER_LINKS}
 </ul>
 </div>
 </div>
 </div>
</footer>
```

---

## [CHECKLIST] Dark Mode post-generation self check

**Before returning code, verify every token and rule below. Fix any violation before delivering:**

### Token check
- [ ] Button includes: `px-4 py-2 rounded-lg font-medium transition-colors duration-200`
- [ ] Card includes: `bg-slate-800 border border-slate-700 rounded-xl`
- [ ] Input includes: `bg-slate-800 border border-slate-700 rounded-lg text-slate-100 placeholder:text-slate-500 focus:border-blue-500 focus:ring-1 focus:ring-blue-500`

### Forbidden check
- [ ] Not using `bg-white`
- [ ] Not using `bg-gray-50`
- [ ] Not using `border-black`
- [ ] Not using `shadow-white`
- [ ] Not using `bg-black`

### Style rule check
- [ ] 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

### Style drift check
- [ ] Does not violate: Do not use pure white text text-white (too harsh)
- [ ] Does not violate: Do not use high-contrast borders
- [ ] Does not violate: Do not use pure black background #000000 (too dull)
- [ ] Does not violate: Do not use dark text on dark backgrounds
- [ ] Does not violate: Do not overuse highlight colors

### Delivery check
- [ ] Responsive layout holds on phone, tablet and desktop with no horizontal overflow
- [ ] Every interactive element has a visible focus state, an accessible name and a reduced-motion path
- [ ] Text contrast meets WCAG AA and colour alone never carries state
- [ ] The result is still recognizable at a glance as Dark Mode

---

## [EXAMPLES] Example prompts

### 1. 

```
Create a developer dashboard using Dark Mode style:
- Sidebar navigation with slate-800 background
- Main content on slate-900
- Metric cards with subtle borders
- Code blocks with syntax highlighting
- Status indicators with colored dots
- Blue accent for primary actions
- Comfortable contrast for long sessions
```

## Absolute Bans (Match and Refuse)

If any of the following patterns appear, it is a style violation — rewrite without exception.

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

## Self-Check (Verify Before Shipping)

If any item fails, the style has drifted — fix before shipping.

- [ ] No purple-to-blue gradients
- [ ] No overused fonts (Inter, Roboto, Geist, Fraunces, Plus Jakarta Sans)
- [ ] No nested cards (cards inside cards)
- [ ] No gray text on colored backgrounds
- [ ] Body text contrast meets WCAG AA (>= 4.5:1)
- [ ] No bounce or elastic easing curves
- [ ] Animations have a prefers-reduced-motion fallback
- [ ] Body text line length capped at 65-75 characters
- [ ] No side-stripe accent borders (border-left/right > 1px)
- [ ] No gradient text (background-clip: text)
- [ ] No glassmorphism used as the default surface treatment
- [ ] No tiny uppercase tracked eyebrow labels above every section heading
- [ ] 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