Sci-Fi HUD

STYLEKIT_STYLE_REFERENCE
style_name: Sci-Fi HUD
style_slug: sci-fi-hud
style_source: /styles/sci-fi-hud

# 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: Sci-Fi HUD
TYPE: Futuristic command center interface

MUST USE:
- Deep space background: bg-[#020617] or bg-slate-950
- Semi-transparent panels: bg-slate-900/85 backdrop-blur-xl
- Cyan glow borders: border-cyan-500/30 shadow-[0_0_20px_rgba(6,182,212,0.5)]
- L-shaped corner decorations on important panels
- font-mono uppercase tracking-wider for labels
- Status indicators with pulse animation
- Scanline overlays for tech atmosphere
- Progress bars with gradient fill and glow

MUST AVOID:
- Light/white backgrounds
- Warm color schemes (except for warning/danger status)
- Regular shadows (shadow-md, shadow-lg)
- Serif fonts
- Cute/rounded design language
- Large border-radius (rounded-2xl+)

Animation & Interaction Rules:
- Tactical Lock: On hover, L-shaped corner brackets perform short lock displacement (duration-150).
- Data Overload: On hover, increase scanline visibility and glow intensity to simulate data overload.
- Holographic Pierce: Active state prioritizes bright inner glow feedback over gravity-style sinking.
- Terminal Blinking: Status lights and key indicators maintain pulse or flicker to sustain system-online feel.

---

# Sci-Fi HUD Design System

> A holographic display interface inspired by starship cockpits and tactical command centers. Deep space backgrounds, cyan glowing borders, translucent glass panels, and radar sweep animations create an immersive experience of operating high-tech equipment.

## Design Philosophy

Sci-Fi HUD style draws from futuristic tech interfaces in movies and games, where "information IS the interface."

Design principles:
- Deep space background: extremely deep blue-gray backgrounds simulate a space command room
- Glowing geometry: all elements use cyan/teal glowing borders to create a holographic projection feel
- Information density: layering and modularization maintain readability of large amounts of real-time data
- Real-time dynamics: radar sweeps, data stream scrolling, and status pulses convey a "system running" feeling
- Translucent materials: panels use glassmorphism effects with backdrop blur

---

## Token Dictionary (exact class mapping)

### Border
```
Width: border
Color: border-cyan-500/30
Radius: rounded
```

### Shadow
```
sm: shadow-[0_0_10px_rgba(6,182,212,0.2)]
md: shadow-[0_0_15px_rgba(6,182,212,0.3)]
lg: shadow-[0_0_25px_rgba(6,182,212,0.5)]
hover: shadow-[0_0_25px_rgba(6,182,212,0.5)]
focus: shadow-[0_0_20px_rgba(6,182,212,0.4)]
```

### Interaction
```
Hover translate: (none)
Hover scale: hover:shadow-[0_0_25px_rgba(6,182,212,0.5)] hover:-translate-y-0.5
Hover opacity: (none)
Transition: transition-all duration-300
Active: active:scale-95
```

### Typefaces
```
Heading: font-bold font-mono
Body: font-mono
Mono: font-mono
```

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

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

### Color roles
```
Background primary: bg-[#020617]
Background secondary: bg-slate-900/85
Background accent: bg-cyan-500/20, bg-sky-500/20, bg-green-500/20
Text primary: text-[#E5F2FF]
Text secondary: text-slate-400
Text muted: text-slate-500
Button primary: bg-slate-900/80 border-cyan-500/40 text-cyan-400
Button secondary: bg-transparent border-slate-600 text-slate-300
```

---

## [FORBIDDEN]

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

### Banned classes
- `bg-white`
- `bg-gray-50`
- `bg-gray-100`
- `shadow-sm`
- `shadow-md`
- `shadow-lg`
- `shadow-xl`
- `rounded-2xl`
- `rounded-3xl`
- `rounded-full`
- `font-serif`
- `text-pink-`
- `text-rose-`
- `bg-pink-`
- `bg-rose-`

### Banned patterns
- matches `^bg-white`
- matches `^shadow-(?!\[|none)`
- matches `^rounded-(?:2xl|3xl|full)`
- matches `^font-serif`

### Why they are banned
- `bg-white`: HUD interfaces require deep dark backgrounds
- `shadow-md`: Must use glow shadows (shadow-[0_0_Xpx_rgba(...)]) not standard shadows
- `rounded-2xl`: HUD panels use sharp or slightly rounded corners only
- `font-serif`: HUD interfaces use monospace fonts exclusively

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

---

## [REQUIRED]

### Every button must include
```
font-mono
uppercase
tracking-widest
border
transition-all
```

### Every card must include
```
backdrop-blur
border
relative
```

### Every input must include
```
bg-slate-950
border
font-mono
focus:outline-none
```

---

## [COMPARE] Sci-Fi HUD 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="font-mono uppercase tracking-widest border transition-all bg-slate-900/80 border-cyan-500/40 text-cyan-400">
  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="backdrop-blur border relative p-6">
  <h3 class="font-bold font-mono text-lg md:text-xl">{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-950 border font-mono focus:outline-none" placeholder="{PLACEHOLDER}" />
```

---

## [TEMPLATES] Sci-Fi HUD page skeletons

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

### Navigation
```html
<nav class="bg-[#020617] text-[#E5F2FF] border border-cyan-500/30 px-6 md:px-8">
  <div class="flex items-center justify-between max-w-6xl mx-auto gap-6">
    <a href="/" class="font-bold font-mono text-lg md:text-xl">
      {LOGO_TEXT}
    </a>
    <div class="flex gap-6 font-mono text-xs">
      {NAV_LINKS}
    </div>
  </div>
</nav>
```

### Hero section
```html
<section class="bg-cyan-500/20 text-[#E5F2FF] py-12 md:py-20 px-6 md:px-8">
  <div class="max-w-4xl mx-auto">
    <h1 class="font-bold font-mono text-4xl md:text-6xl lg:text-7xl">
      {HEADLINE}
    </h1>
    <p class="font-mono text-sm max-w-xl">
      {SUBHEADLINE}
    </p>
    <button class="font-mono uppercase tracking-widest border transition-all bg-slate-900/80 border-cyan-500/40 text-cyan-400">
      {CTA_TEXT}
    </button>
  </div>
</section>
```

### Card grid
```html
<section class="bg-[#020617] text-[#E5F2FF] py-12 md:py-20 px-6 md:px-8">
  <div class="max-w-6xl mx-auto">
    <h2 class="font-bold font-mono 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="backdrop-blur border relative p-6">
        <h3 class="font-bold font-mono text-lg md:text-xl">{CARD_TITLE}</h3>
        <p class="font-mono text-sm text-slate-500">{CARD_DESCRIPTION}</p>
      </div>
    </div>
  </div>
</section>
```

### Form input
```html
<input class="bg-slate-950 border font-mono focus:outline-none" placeholder="{PLACEHOLDER}" />
```

### Footer
```html
<footer class="bg-slate-900/85 text-slate-400 py-12 md:py-20 px-6 md: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-bold font-mono text-lg md:text-xl">{LOGO_TEXT}</span>
        <p class="font-mono text-xs">{TAGLINE}</p>
      </div>
      <div>
        <h4 class="font-bold font-mono text-lg md:text-xl">{COLUMN_TITLE}</h4>
        <ul class="font-mono text-xs">
          {FOOTER_LINKS}
        </ul>
      </div>
    </div>
  </div>
</footer>
```

---

## [CHECKLIST] Sci-Fi HUD post-generation self check

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

### Token check
- [ ] Button includes: `font-mono uppercase tracking-widest border transition-all`
- [ ] Card includes: `backdrop-blur border relative`
- [ ] Input includes: `bg-slate-950 border font-mono focus:outline-none`

### Forbidden check
- [ ] Not using `bg-white`
- [ ] Not using `bg-gray-50`
- [ ] Not using `bg-gray-100`
- [ ] Not using `shadow-sm`
- [ ] Not using `shadow-md`
- [ ] Not using `shadow-lg`
- [ ] Not using `shadow-xl`
- [ ] Not using `rounded-2xl`

### Style rule check
- [ ] Use deep space backgrounds bg-[#020617] or bg-slate-950
- [ ] Panels use translucent bg-slate-900/85 backdrop-blur-xl
- [ ] Borders use glow effects border-cyan-500/30 shadow-[0_0_20px_rgba(6,182,212,0.5)]
- [ ] Text uses cool tones text-[#E5F2FF] or text-slate-300
- [ ] Use font-mono uppercase tracking-wider for a tech feel

### Style drift check
- [ ] Does not violate: Do not use light/white backgrounds
- [ ] Does not violate: Do not use warm tones (orange, pink, etc. -- warm colors only for warning states)
- [ ] Does not violate: Do not use regular shadows shadow-md (must use glow shadows)
- [ ] Does not violate: Do not use serif fonts
- [ ] Does not violate: Do not use cute/rounded design language

### 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 Sci-Fi HUD

## Absolute Bans (Match and Refuse)

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

- use light/white backgrounds
- use warm tones (orange, pink, etc. -- warm colors only for warning states)
- use regular shadows shadow-md (must use glow shadows)
- use serif fonts
- use cute/rounded design language
- use large border-radius rounded-2xl+
- let panel interactions only deepen regular shadows (lacks system activation feel)
- let status lights remain static (HUD requires continuous pulse or flicker)

## 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 light/white backgrounds
- [ ] do not use warm tones (orange, pink, etc. -- warm colors only for warning states)
- [ ] do not use regular shadows shadow-md (must use glow shadows)
- [ ] do not use serif fonts
- [ ] do not use cute/rounded design language