Best For
CRT effect / arcade style / scanlines
Arcade CRT
街机CRT
C
66/100Fair
80-90s arcade monitor aesthetics featuring scanlines, screen curvature, neon glow, and RGB chromatic aberration effects. Ideal for gaming, retro tech, and creative projects.
CRT effectarcade stylescanlinesretro gaming uiCRT screenneon glowchromatic aberrationpixel font80s arcadephosphor glowscreen curvatureretro game website
Primary Move
Use scanline overlay on all content areas
Watch Out
Don't use pastel or muted colors
AI Implementation
Copy the Hard Prompt first, then use the spec when needed
Use the Hard Prompt by default to generate UI. Use the Design Spec to understand, modify, and review the style. Use the Creative Brief for early exploration.
Hard Prompt
Use this by default: copy it, append the concrete requirement, and let AI generate consistent production UI.
When to use
- When AI should generate UI directly
- When repeated outputs must stay consistent
- When style drift is the main risk
How to use
- Copy the full prompt
- Append the concrete requirement
- Review against forbidden rules and UI states
STYLEKIT_STYLE_REFERENCE
style_name: Arcade CRT
style_slug: arcade-crt
style_source: /styles/arcade-crt
# 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: Arcade CRT
TYPE: Retro gaming CRT monitor aesthetic
MUST USE:
- Background: Always near-black (#050505 or #0a0a0a)
- Primary accent: Neon green (#39ff14) for main interactive elements
- Secondary accents: Magenta (#ff00ff), Cyan (#00ffff), Red (#ff2a2a), Yellow (#FFFF00)
- All text must use monospace or pixel fonts (font-mono)
- Scanline overlay: repeating-linear-gradient on content areas
- RGB chromatic aberration: text-shadow with offset magenta and cyan on headlines
- Neon glow: box-shadow with color matching the element
- uppercase text with wide letter-spacing for labels
MUST AVOID:
- Light/white backgrounds
- Pastel or muted colors
- Serif or sans-serif fonts
- Large border-radius (max 4px)
- Subtle/standard shadows (use neon glow only)
- Gradients that aren't neon-to-dark
Animation & Interaction Rules:
- Neon Breathing: On hover, outer glow (box-shadow) must visibly expand, optionally with subtle animate-pulse to simulate voltage instability flicker.
- Arcade Button Press: Active state (:active) must simulate the feel of a real arcade button being slammed down hard. Use strong displacement active:translate-y-[4px] and instantly change shadow size.
- CRT Distortion: On interaction, RGB chromatic aberration can be amplified by changing text-shadow offsets (magenta and cyan separation distance).
- Instant Feedback: CRT has no smooth physical inertia; interaction response time should be short, such as duration-100 or duration-150.
## Absolute Bans (Match and Refuse)
If any of the following patterns appear, it is a style violation — rewrite without exception.
- use pastel or muted colors
- use serif or sans-serif body fonts
- use rounded corners larger than 4px
- use subtle shadows - only neon glows
- use gradients that aren't neon-to-dark
## 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
- [ ] don't use pastel or muted colors
- [ ] don't use serif or sans-serif body fonts
- [ ] don't use rounded corners larger than 4px
- [ ] don't use subtle shadows - only neon glows
- [ ] don't use gradients that aren't neon-to-darkComponent Templates
Component Preview
按钮
Arcade CRT 霓虹按钮，带发光效果和像素字体
Frontend Readiness
Dark Mode, States, Motion, and Accessibility
This layer tracks whether the style is ready for real websites: theme modes, state feedback, keyboard access, and performance constraints.
Overall
51%
Fallback
Dark Mode
0%
MissingUI States
79%
PartialMotion
70%
PartialA11y
70%
PartialPerformance
35%
FallbackKey State Coverage
lightHoverFocus VisibleDisabledLoadingEmptyErrorSuccess
Button
Default / Hover / Focus Visible / Active / Disabled
Input
Default / Hover / Focus Visible / Disabled / Error
Card
Default / Hover / Focus Visible / Loading / Skeleton
Form
Default / Focus Visible / Disabled / Loading / Error
Implementation Notes
- No curated dark-mode contract exists yet.
- Check contrast in both light and dark modes.
- Check heavy shadows, blur, large media, and scroll-linked effects manually.
- No style-specific performance cost profile has been curated yet.
FAQ
Arcade CRT — Frequently Asked Questions
- What is the Arcade CRT design style?
- 80-90s arcade monitor aesthetics featuring scanlines, screen curvature, neon glow, and RGB chromatic aberration effects. Ideal for gaming, retro tech, and creative projects. Its core principle: Arcade CRT style recreates the nostalgic glow of 80-90s arcade CRT monitors.
- What colors does Arcade CRT use?
- Arcade CRT uses #39ff14 as its primary color and #050505 as its secondary color, with accent colors #ff00ff, #00ffff, #ff2a2a, #FFFF00. Every hex value can be copied from the palette on this page.
- How do I apply Arcade CRT correctly?
- Key practices: Use scanline overlay on all content areas. Apply neon glow (text-shadow/box-shadow) to key elements. Use monospace/pixel fonts for all text.
- What are common mistakes with Arcade CRT?
- Avoid: Don't use pastel or muted colors. Don't use serif or sans-serif body fonts. Don't use rounded corners larger than 4px.
- How do I prompt AI to generate Arcade CRT UI?
- Copy the ready-made AI prompt on this page — it bundles the design tokens and component rules — and paste it into ChatGPT, Claude, Cursor, or v0. Effective prompts include the keywords: CRT effect, arcade style, scanlines, retro gaming ui.
Global Styles
Global CSS
css
/* Arcade CRT Global Styles */
@layer base {
body {
@apply bg-[#050505] text-[#39ff14] antialiased;
background-image:
repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
rgba(57, 255, 20, 0.03) 2px,
rgba(57, 255, 20, 0.03) 4px
);
}
h1, h2, h3 {
text-shadow: -2px 0 #ff00ff, 2px 0 #00ffff;
}
::selection {
@apply bg-[#39ff14] text-black;
}
}
@keyframes crt-flicker {
0%, 100% { opacity: 1; }
50% { opacity: 0.98; }
}
@keyframes crt-scanline-move {
0% { transform: translateY(0); }
100% { transform: translateY(4px); }
}
@keyframes neon-flicker {
0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
20%, 24%, 55% { opacity: 0.8; }
}
@keyframes rgb-shift {
0%, 100% { text-shadow: -2px 0 #ff00ff, 2px 0 #00ffff; }
50% { text-shadow: -3px 0 #ff00ff, 3px 0 #00ffff; }
}
/* Arcade CRT Design Tokens */
:root {
--arcade-crt-primary: #39ff14;
--arcade-crt-secondary: #050505;
--arcade-crt-accent: #ff00ff;
--arcade-crt-glow: rgba(57, 255, 20, 0.3);
}
.arcade-crt-card {
position: relative;
overflow: hidden;
}
.arcade-crt-card::before {
content: "";
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.3s ease;
background: linear-gradient(135deg, rgba(57, 255, 20, 0.05), transparent);
pointer-events: none;
}
.arcade-crt-card:hover::before {
opacity: 1;
}
.arcade-crt-frosted {
backdrop-filter: blur(12px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%);
background: rgba(57, 255, 20, 0.08);
}
.arcade-crt-accent-corner {
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2rem), calc(100% - 2rem) 100%, 0 100%);
}
.arcade-crt-animate-in {
animation: arcade-crt-fade-in 0.5s ease-out both;
}
.arcade-crt-focus { outline: 2px solid var(--arcade-crt-primary, currentColor); outline-offset: 2px; }IDE Integration
IDE Configuration Export
Download configuration files for AI coding assistants to generate code in this style.
Style Pack
Export Style Pack
Get complete machine-readable style assets including design tokens, Tailwind presets, CSS variables, and shadcn/ui themes.
Metadata
Style metadata including version information
Design Tokens
Compatible with Figma / Style Dictionary / Tokens Studio
Tailwind Preset
Tailwind CSS theme preset, import directly in config
Global CSS
CSS variables and base styles
shadcn Theme
shadcn/ui theme configuration
CSS Variables
Pure CSS variables, works with any project
SKILL.md
Loadable skill pack for Cursor / Claude Code / VS Code
Design Philosophy
Arcade CRT style recreates the nostalgic glow of 80-90s arcade CRT monitors.
Accessibility
Accessibility Score
WCAG 2.1 compliance analysis based on color contrast and typography readability.
66
Overall Score
Grade: C - Fair
Contrast Ratios
Score: 58/100Average Ratio: 8.43:1
AA FailAAA Fail
| Context | Colors | Ratio | AA | AAA |
|---|---|---|---|---|
| Text on background | /#39ff14 / #050505 | 15.03:1 | ||
| Secondary text on background | /#00ffff / #050505 | 16.25:1 | ||
| Muted text on background | /#39ff14 / #050505 | 15.03:1 | ||
| Text on secondary background | /#39ff14 / #0a0a0a | 14.6:1 | ||
| Secondary text on secondary | /#00ffff / #0a0a0a | 15.79:1 | ||
| Button primary | /#000000 / #39ff14 | 15.49:1 | ||
| Text on accent 1 | /#39ff14 / #39ff14 | 1:1 | ||
| Alt text on accent 1 | /#00ffff / #39ff14 | 1.08:1 | ||
| Text on accent 2 | /#39ff14 / #ff00ff | 2.31:1 | ||
| Alt text on accent 2 | /#00ffff / #ff00ff | 2.5:1 | ||
| Text on accent 3 | /#39ff14 / #00ffff | 1.08:1 | ||
| Alt text on accent 3 | /#00ffff / #00ffff | 1:1 |
Readability
Score
85/100
Font Size
text-sm md:text-base
Font Weight
font-mono font-bold uppercase tracking-[0.15em]
Line Height
default
Scoring is based on WCAG 2.1 standards. AA requires 4.5:1 contrast for normal text, 3:1 for large text; AAA requires 7:1 for normal text, 4.5:1 for large text.