Neon Glow

A dark neon glow design system for Bootstrap and Tailwind CSS.

10 color palettes. 3 intensity levels. Pure CSS custom properties. Works with any framework or standalone.

See the live demo -- Kitchen sink showcases for both Tailwind and Bootstrap with all palettes and intensities.

Installation

Add to your Gemfile:

gem "neon_glow"

Then run:

bundle install

The gem is a Rails Engine that automatically adds the stylesheets to your asset paths.

Usage in Rails

With Propshaft / Importmap (Rails 7+)

Link the stylesheets in your layout:

<%= stylesheet_link_tag "neon_glow/tokens", "data-turbo-track": "reload" %>
<%= stylesheet_link_tag "neon_glow/components", "data-turbo-track": "reload" %>

With Tailwind CSS

Import in your Tailwind entry point:

@import "tailwindcss";
@import "neon_glow/tokens";
@import "neon_glow/components";

With Sprockets (older Rails)

Add to your application.css:

/*
 *= require neon_glow/tokens
 *= require neon_glow/components
 */

Set the Theme

Add palette and intensity classes to your <body>:

<body class="neon-glow-body neon-rainbow neon-medium">

Palettes

Classic

Class	Palette	Vibe
`neon-rainbow`	Rainbow	Full-spectrum neon. Arcade cabinets and light shows.
`neon-unicorn`	Unicorn	Pastel rainbow. Dreamy, soft, ethereal.
`neon-cinematic`	Cinematic	Electric blue + amber. The Blade Runner palette.
`neon-pink`	Pink	Hot pink + magenta. A power color for everyone.

Decades (each with themed dark backgrounds)

Class	Palette	Vibe
`neon-retrowave`	80's Retrowave	Synthwave sunsets, neon grid lines, Outrun aesthetic.
`neon-grunge`	90's Grunge	Flannel and feedback. Raw amber on dirty surfaces.
`neon-y2k`	2000's Y2K	Frosted glass, chrome, bubblegum iridescence.
`neon-social`	2010's Social	Platform colors. Notification pings and viral moments.
`neon-cyberpunk`	2020's Cyberpunk	Toxic neon against corporate steel. Glitch aesthetic.

Hardware

Class	Palette	Vibe
`neon-vfd`	VFD Display	Monochromatic phosphor glow with adjustable hue.

Add a VFD preset: <body class="neon-glow-body neon-vfd neon-vfd-amber neon-medium">

Presets: neon-vfd-red, neon-vfd-amber, neon-vfd-yellow, neon-vfd-green, neon-vfd-cyan (default), neon-vfd-blue, neon-vfd-purple, neon-vfd-pink

Or set any hue: style="--ng-vfd-hue: 45"

Intensity Levels

Class	Description
`neon-subtle`	Gentle glow. Professional. Easy on the eyes.
`neon-medium`	Balanced glow. The sweet spot for most apps.
`neon-intense`	Maximum glow. Over the top. The WOW factor.

Switching Themes at Runtime

Swap classes on <body> -- all colors cascade instantly via CSS custom properties:

document.body.classList.remove("neon-rainbow", "neon-unicorn", "neon-cinematic", "neon-pink");
document.body.classList.add("neon-cinematic");

document.body.classList.remove("neon-subtle", "neon-medium", "neon-intense");
document.body.classList.add("neon-intense");

Live Demo

See the full kitchen sink demo with all components and palettes:

rails_neon_glow -- Rails 8.1.2 app with Tailwind and Bootstrap showcases.

Component Classes

ng-card              -- Dark surface card
ng-card-raised       -- Elevated surface card
ng-border-glow       -- Gradient border with glow
ng-glow-primary      -- Primary color box-shadow glow
ng-glow-secondary    -- Secondary color box-shadow glow
ng-text-glow         -- Glowing text (primary)
ng-gradient-text     -- Rainbow gradient text
ng-btn               -- Base button
ng-btn-primary       -- Primary glowing button
ng-btn-secondary     -- Secondary glowing button
ng-btn-outline       -- Outline button with glow
ng-btn-ghost         -- Ghost button
ng-input             -- Form input with focus glow
ng-select            -- Select dropdown
ng-switch            -- Toggle switch
ng-badge-*           -- Badges (primary, secondary, success, warning, danger, info)
ng-alert-*           -- Alerts with glowing left border
ng-table             -- Dark themed table
ng-progress          -- Progress bar container
ng-progress-bar      -- Gradient progress bar
ng-navbar            -- Sticky navbar with backdrop blur
ng-divider           -- Gradient divider line
ng-animate-pulse     -- Pulsing glow animation
ng-animate-gradient  -- Rotating gradient border animation

Design

Designed by Claude (Anthropic) in collaboration with TokenFires.

The Neon Glow design system was created through an AI-human collaboration. Claude designed the color palettes, glow effects, component styles, and the overall dark neon aesthetic. TokenFires provided creative direction, reference materials, and review.

License

MIT License -- See LICENSE

Also Available

npm: neon-glow-css
Demo: rails_neon_glow

Built with care by Claude and TokenFires. 2026.