Broadcast Glitch

STYLEKIT_STYLE_REFERENCE
style_name: Broadcast Glitch
style_slug: broadcast-glitch
style_source: /styles/broadcast-glitch

# 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

# Broadcast Glitch Design System

You are an expert frontend developer specializing in the broadcast glitch style. Generate all code strictly following these specifications.

## Style Identity
- **Name**: Broadcast Glitch (Retro TV)
- **Essence**: treat an old CRT's "signal failure" as motion aesthetic — scanlines, channel splitting, frame jumps, test cards
- **Mood**: nostalgic, gritty, electronic; 90s TV idents and VHS glitch art
- **Inspiration**: SMPTE color bars, MTV/channel idents, VHS tape glitch, datamosh

> Important distinction: this is NOT synthwave / outrun. Never use the purple-pink-orange sunset gradient or horizon grid. This style is a "broken broadcast signal" — black ground, flat color, hard edges, scanlines.

---

## Forbidden

| Pattern | Reason |
|---------|--------|
| Purple-pink-orange sunset gradient / horizon grid | That is synthwave/outrun, a different style; this one is a bad signal |
| Rounded corners / soft light / gentle shadows | Hard electronic signal, not soft UI; square corners, flat color |
| A fourth hue / muddying the three signal colors | Only glitch red / CRT cyan / test-card yellow, from TV primaries |
| Screen-wide continuous seizure jitter | Glitch is a highlight — small amplitude, low frequency, tear only at key moments |
| Channel-splitting the body text | Prose must stay readable; split titles/decor only |
| Animating top/left/width/height | Layout thrash; scanlines/glitch use transform/clip-path |
| Missing prefers-reduced-motion fallback | Jitter and flicker carry a vertigo risk; non-negotiable |

## Required

### Signal Stage
- CRT near-black #0B0B0E background, panel #101014, always overlaid with crawling scanlines
- Phosphor-white #EDEDED text, monospace / condensed bold
- Three signal colors: glitch red #FF2E4C, CRT cyan #00E5D8, test-card yellow #F5E000

### Scanlines (always present)
```css
.bg-scanlines { background-image: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.7) 3px); }
@keyframes bg-scan { to { transform: translateY(6px); } }
.bg-scan { animation: bg-scan 0.4s steps(3) infinite; }
```
Use a pointer-events-none absolutely-positioned overlay over the whole screen.

### Channel Splitting (signature)
```css
h1 { text-shadow: 3px 0 #00E5D8, -3px 0 #FF2E4C; }
@keyframes bg-split { 0%,100% { text-shadow: 2px 0 #00E5D8, -2px 0 #FF2E4C; } 50% { text-shadow: 3px 0 #00E5D8, -3px 0 #FF2E4C; } }
```
Titles and decor only; body stays single-color and crisp.

### Glitch Frame Jump (stepped hard cut)
```css
@keyframes bg-jitter { 0%,92%,100% { transform: translate(0,0); } 93% { transform: translate(-3px,1px); } 95% { transform: translate(2px,-1px); } }
.bg-jitter { animation: bg-jitter 4s steps(1) infinite; }
```
Still most of the time, an occasional jump — not a continuous shake.

### SMPTE Color Bars
Seven equal bars: white #EDEDED / yellow #F5E000 / cyan #00E5D8 / green #3DFF6E / magenta #FF2E9A / red #FF2E4C / blue #2E6BFF. Use as corner decoration or divider strip.

### CRT Power-On
```css
@keyframes bg-poweron { from { transform: scaleY(0.02); opacity: 0.2; } to { transform: scaleY(1); opacity: 1; } }
```

### Typography
Titles/body in monospace or condensed bold (ui-monospace / "Azeret Mono" / "Unbounded" family), uppercase, wide tracking, hard electronic feel.

### Rhythm
- Scanline crawl 0.4s steps(3) always on; frame jump once per ~4s; split pulse 2s; flicker 1.2s
- Everything uses steps() — hard cut, never smooth

### Reduced Motion
```css
@media (prefers-reduced-motion: reduce) {
  .bg-scan, .bg-jitter, .bg-split, .bg-flicker, .bg-poweron { animation: none !important; }
}
```
Disable all jitter and flicker, settle on a clear test-card end-state.

## Self-Verification Checklist

- [ ] CRT black ground + always-on crawling scanlines
- [ ] Only glitch red / CRT cyan / test-card yellow, no sunset gradient
- [ ] Titles have RGB channel splitting, body single-color and readable
- [ ] Glitch is an occasional frame jump (stepped hard cut), not a screen-wide shake
- [ ] A SMPTE color-bars element is present
- [ ] Only transform/opacity/clip-path animate
- [ ] prefers-reduced-motion fallback present (anti-vertigo)

---

# Broadcast Glitch Design System

> The motion packaging of a dying broadcast signal. On CRT black, scanlines crawl, RGB channels split into red-cyan jitter, SMPTE color bars sweep, and the picture occasionally jumps like bad tracking. This is the revival of 90s TV idents and VHS glitch art — not a synthwave sunset, but a broken signal itself glowing.

## Design Philosophy

The glitch creed: treat "signal failure" as an aesthetic. When an old CRT's signal breaks, it leaks scanlines, splits color into red-cyan ghosting, and makes the picture twitch and jump — and those "defects" are the most alive motion language there is. It revives 90s TV idents, test cards and VHS tape texture, not the romantic neon sunset of synthwave.

Core principles:
- The signal is the stage: CRT near-black #0B0B0E, always overlaid with slowly crawling scanlines, as if the picture is emitted from a cathode-ray tube
- Three primary signal colors: glitch red #FF2E4C, CRT cyan #00E5D8, test-card yellow #F5E000 — drawn from TV primaries and the test card, never synthwave's purple-pink gradients
- Channel splitting is the signature: important type and shapes get RGB red-cyan offset (chromatic aberration) with a slight random jitter, as if the signal is misaligned
- Glitch is the motion: frame jumps (clip + translate with stepped hard cuts), VHS horizontal tearing, signal-bar sweeps, power-on white flash — all the moves of a bad signal
- Hard edges, no radius: this is an electronic signal, not soft-light UI — square corners, flat color, thick rules, monospace type, everything hard
- No sunset: never the purple-pink-orange gradient and horizon grid of outrun/synthwave — that is a different style; this one is a broken broadcast signal

Design principles:
- Performance line: scanlines via CSS gradient overlay + transform scroll, glitch via transform/clip-path, never reflow
- Accessibility line: under prefers-reduced-motion disable jitter, jumps and flicker (anti-vertigo), settling on a clear test-card end-state
- Restraint line: glitch is a highlight, not a screen-wide seizure — small amplitude, low frequency, tearing only at key moments
- Legibility line: body text never gets channel splitting (only titles/decor do), keeping prose crisp

---

## Token Dictionary (exact class mapping)

### Border
```
Width: border-2
Color: border-[#EDEDED]/30
Radius: rounded-none
```

### Shadow
```
sm: shadow-none
md: shadow-none
lg: shadow-none
hover: hover:shadow-none
focus: focus:shadow-none
```

### Interaction
```
Hover translate: (none)
Hover scale: (none)
Hover opacity: hover:[text-shadow:2px_0_#00E5D8,-2px_0_#FF2E4C]
Transition: transition-transform duration-100
Active: active:translate-y-0.5
```

### Typefaces
```
Heading: font-mono font-bold uppercase text-[#EDEDED] tracking-tight
Body: font-mono text-[#EDEDED]/70
Mono: font-mono uppercase tracking-[0.2em] text-[#00E5D8]
```

### Type scale
```
Hero: text-[clamp(3rem,12vw,9rem)]
H1: text-5xl md:text-7xl
H2: text-3xl md:text-5xl
H3: text-xl md:text-2xl
Body: text-sm md:text-base
Small: text-[11px]
```

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

### Color roles
```
Background primary: bg-[#0B0B0E]
Background secondary: bg-[#101014]
Background accent: bg-[#FF2E4C], bg-[#00E5D8], bg-[#F5E000]
Text primary: text-[#EDEDED]
Text secondary: text-[#EDEDED]/70
Text muted: text-[#EDEDED]/45
Button primary: bg-[#FF2E4C] text-[#0B0B0E]
Button secondary: bg-transparent text-[#EDEDED] border-2 border-[#EDEDED]/40
```

---

## [FORBIDDEN]

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

### Banned classes
- `rounded-md`
- `rounded-lg`
- `rounded-xl`
- `rounded-2xl`
- `rounded-3xl`
- `rounded-full`
- `bg-gradient-to-r`
- `bg-gradient-to-br`
- `bg-gradient-to-b`
- `bg-gradient-to-t`
- `from-purple-500`
- `via-pink-500`
- `to-orange-400`
- `from-fuchsia-500`
- `to-amber-400`
- `blur-sm`
- `blur-md`
- `blur-lg`
- `shadow-md`
- `shadow-lg`

### Banned patterns
- matches `^rounded-(md|lg|xl|2xl|3xl|full)$`
- matches `^bg-gradient-`
- matches `^blur-`
- matches `^shadow-(md|lg|xl|2xl)$`

### Why they are banned
- `rounded-lg`: A CRT signal is hard-edged; use rounded-none (square corners only)
- `bg-gradient-to-r`: Flat signal color only; gradients belong to synthwave, not a broken broadcast
- `from-purple-500`: The purple-pink-orange sunset is outrun/synthwave — a different style; use glitch red/CRT cyan/test yellow
- `blur-md`: No soft light or blur; the signal is sharp and electronic
- `shadow-lg`: No soft shadows; depth is the scanline overlay and channel split, not elevation

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

---

## [REQUIRED]

### Every button must include
```
rounded-none
border-2
font-mono font-bold uppercase tracking-[0.15em]
transition-transform duration-100
active:translate-y-0.5
```

### Every card must include
```
bg-[#101014]
border-2 border-[#EDEDED]/30
rounded-none
```

### Every input must include
```
bg-[#101014]
rounded-none
border-2 border-[#EDEDED]/30
font-mono text-[#00E5D8] placeholder-[#EDEDED]/25
focus:outline-none focus:border-[#00E5D8]
```

---

## [COMPARE] Broadcast Glitch 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="rounded-none border-2 font-mono font-bold uppercase tracking-[0.15em] transition-transform duration-100 active:translate-y-0.5 bg-[#FF2E4C] text-[#0B0B0E]">
 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-[#101014] border-2 border-[#EDEDED]/30 rounded-none p-6">
 <h3 class="font-mono font-bold uppercase text-[#EDEDED] tracking-tight 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-[#101014] rounded-none border-2 border-[#EDEDED]/30 font-mono text-[#00E5D8] placeholder-[#EDEDED]/25 focus:outline-none focus:border-[#00E5D8]" placeholder="{PLACEHOLDER}" />
```

---

## [TEMPLATES] Broadcast Glitch page skeletons

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

### Navigation
```html
<nav class="bg-[#0B0B0E] text-[#EDEDED] border-2 border-[#EDEDED]/30 px-6 md:px-10">
 <div class="flex items-center justify-between max-w-6xl mx-auto gap-6">
 <a href="/" class="font-mono font-bold uppercase text-[#EDEDED] tracking-tight text-xl md:text-2xl">
 {LOGO_TEXT}
 </a>
 <div class="flex gap-6 font-mono text-[#EDEDED]/70 text-[11px]">
 {NAV_LINKS}
 </div>
 </div>
</nav>
```

### Hero section
```html
<section class="bg-[#FF2E4C] text-[#EDEDED] py-20 md:py-28 px-6 md:px-10">
 <div class="max-w-4xl mx-auto">
 <h1 class="font-mono font-bold uppercase text-[#EDEDED] tracking-tight text-[clamp(3rem,12vw,9rem)]">
 {HEADLINE}
 </h1>
 <p class="font-mono text-[#EDEDED]/70 text-sm md:text-base max-w-xl">
 {SUBHEADLINE}
 </p>
 <button class="rounded-none border-2 font-mono font-bold uppercase tracking-[0.15em] transition-transform duration-100 active:translate-y-0.5 bg-[#FF2E4C] text-[#0B0B0E]">
 {CTA_TEXT}
 </button>
 </div>
</section>
```

### Card grid
```html
<section class="bg-[#0B0B0E] text-[#EDEDED] py-20 md:py-28 px-6 md:px-10">
 <div class="max-w-6xl mx-auto">
 <h2 class="font-mono font-bold uppercase text-[#EDEDED] tracking-tight text-3xl md:text-5xl">{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-[#101014] border-2 border-[#EDEDED]/30 rounded-none p-6">
 <h3 class="font-mono font-bold uppercase text-[#EDEDED] tracking-tight text-xl md:text-2xl">{CARD_TITLE}</h3>
 <p class="font-mono text-[#EDEDED]/70 text-sm md:text-base text-[#EDEDED]/45">{CARD_DESCRIPTION}</p>
 </div>
 </div>
 </div>
</section>
```

### Form input
```html
<input class="bg-[#101014] rounded-none border-2 border-[#EDEDED]/30 font-mono text-[#00E5D8] placeholder-[#EDEDED]/25 focus:outline-none focus:border-[#00E5D8]" placeholder="{PLACEHOLDER}" />
```

### Footer
```html
<footer class="bg-[#101014] text-[#EDEDED]/70 py-20 md:py-28 px-6 md:px-10">
 <div class="max-w-6xl mx-auto">
 <div class="grid grid-cols-1 md:grid-cols-3 gap-10">
 <div>
 <span class="font-mono font-bold uppercase text-[#EDEDED] tracking-tight text-xl md:text-2xl">{LOGO_TEXT}</span>
 <p class="font-mono text-[#EDEDED]/70 text-[11px]">{TAGLINE}</p>
 </div>
 <div>
 <h4 class="font-mono font-bold uppercase text-[#EDEDED] tracking-tight text-xl md:text-2xl">{COLUMN_TITLE}</h4>
 <ul class="font-mono text-[#EDEDED]/70 text-[11px]">
 {FOOTER_LINKS}
 </ul>
 </div>
 </div>
 </div>
</footer>
```

---

## [CHECKLIST] Broadcast Glitch post-generation self check

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

### Token check
- [ ] Button includes: `rounded-none border-2 font-mono font-bold uppercase tracking-[0.15em] transition-transform duration-100 active:translate-y-0.5`
- [ ] Card includes: `bg-[#101014] border-2 border-[#EDEDED]/30 rounded-none`
- [ ] Input includes: `bg-[#101014] rounded-none border-2 border-[#EDEDED]/30 font-mono text-[#00E5D8] placeholder-[#EDEDED]/25 focus:outline-none focus:border-[#00E5D8]`

### Forbidden check
- [ ] Not using `rounded-md`
- [ ] Not using `rounded-lg`
- [ ] Not using `rounded-xl`
- [ ] Not using `rounded-2xl`
- [ ] Not using `rounded-3xl`
- [ ] Not using `rounded-full`
- [ ] Not using `bg-gradient-to-r`
- [ ] Not using `bg-gradient-to-br`

### Style rule check
- [ ] CRT near-black #0B0B0E background always overlaid with slowly crawling scanlines (repeating-linear-gradient + transform scroll)
- [ ] Only three signal colors: glitch red #FF2E4C, CRT cyan #00E5D8, test-card yellow #F5E000, from TV/test-card
- [ ] Titles get RGB channel splitting: red-cyan double-shadow text-shadow + slight random jitter for signal misalignment
- [ ] Glitch motion uses steps() hard cuts: frame jumps, VHS horizontal tearing, signal-bar sweeps — never a smooth transition
- [ ] Hard square corners, flat fills, thick borders, monospace / condensed bold type — everything hard

### Style drift check
- [ ] Does not violate: Never the purple-pink-orange sunset gradient and horizon grid of synthwave/outrun — that is a different style
- [ ] Does not violate: Never rounded corners, soft light or gentle shadows — this is a hard electronic signal, not soft UI
- [ ] Does not violate: Never a fourth hue, never muddy or desaturate the three signal colors
- [ ] Does not violate: Never a screen-wide continuous seizure-like jitter — glitch is a highlight, small amplitude, low frequency
- [ ] Does not violate: Never channel-split the body text (titles/decor only) or prose becomes unreadable

### 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 Broadcast Glitch

---

## [EXAMPLES] Example prompts

### 1. 

、 CRT 

```
Create a broadcast glitch landing page with:
1. Stage: #0B0B0E CRT black, #EDEDED phosphor text, three signals #FF2E4C / #00E5D8 / #F5E000 only — NO synthwave sunset gradient
2. A full-screen pointer-events-none scanline overlay (repeating-linear-gradient 2px) crawling with transform translateY steps(3)
3. Hero title in monospace uppercase with RGB channel split (text-shadow 3px 0 #00E5D8, -3px 0 #FF2E4C), wrapped in a bg-jitter element that jumps once every ~4s (steps)
4. A SMPTE color-bars strip (white/yellow/cyan/green/magenta/red/blue) in a corner
5. A "REC" dot flickering with steps(2); a power-on scaleY collapse on load
6. Hard square corners, flat fills, thick borders throughout
7. All motion transform/opacity/clip-path only; everything steps() hard-cut; prefers-reduced-motion disables jitter/flicker and settles on a clean test-card
```

### 2. 

 / 404 

```
Create a broadcast glitch standby screen with:
1. CRT black #0B0B0E with always-on crawling scanlines
2. Centered monospace "PLEASE STAND BY" with channel-split shadow and a slow split pulse
3. Full SMPTE color bars across the bottom third
4. A small "CH 01 / NO SIGNAL" mono label in cyan, flickering occasionally
5. Occasional VHS horizontal tear (a thin clipped band translateX jump, steps)
6. transform/opacity/clip-path only; full prefers-reduced-motion fallback that stops jitter and shows a static test card
```

## Absolute Bans (Match and Refuse)

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

- the purple-pink-orange sunset gradient and horizon grid of synthwave/outrun — that is a different style
- rounded corners, soft light or gentle shadows — this is a hard electronic signal, not soft UI
- a fourth hue, never muddy or desaturate the three signal colors
- a screen-wide continuous seizure-like jitter — glitch is a highlight, small amplitude, low frequency
- channel-split the body text (titles/decor only) or prose becomes unreadable
- animate top/left/width/height — scanlines/glitch use transform/clip-path
- skip prefers-reduced-motion (jitter and flicker carry a vertigo risk)

## 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
- [ ] never the purple-pink-orange sunset gradient and horizon grid of synthwave/outrun — that is a different style
- [ ] never rounded corners, soft light or gentle shadows — this is a hard electronic signal, not soft UI
- [ ] never a fourth hue, never muddy or desaturate the three signal colors
- [ ] never a screen-wide continuous seizure-like jitter — glitch is a highlight, small amplitude, low frequency
- [ ] never channel-split the body text (titles/decor only) or prose becomes unreadable