NeonPulse
A dark-first, cyberpunk flat-design system for web and app projects. Near-black surfaces, electric neon as signal, a geometric techy type system, and glow used as a state — never as decoration.
Colors
~90% of any screen is the near-black surface ramp and cool-grey text. Neon is the ~10% that marks what's interactive or live. Click any swatch to copy its value.
Typography
Space Grotesk for display, Sora for body, JetBrains Mono for HUD labels & data.
Spacing & radii
4px base spacing scale; soft 8–28px corner radii.
Elevation & glow
Flat by default. Depth comes from the surface step plus a 1px hairline; neon halos appear only on hover / focus / active and on live data.
Iconography
Lucide outline, 1.9px stroke, currentColor. Three sizes (16/20/24). Icons rest in muted grey and take a neon glow only on hover / active. No emoji, ever. The semantic map gives dev & design one shared name per meaning.
Inputs & controls
Text fields, toggles and selects. Focus lights a neon ring; the resting state stays flat.
Badges & status
Status pills and tinted alerts. Mono labels, uppercase, paired with semantic 14%-opacity fills.
Cards
Surface-step containers with a 1px hairline. Hover lifts the border and adds a soft halo — never an ambient one.
Tabs & segmented
Tabs and segmented controls. The active segment carries the signal; the rest stays muted grey.
Wordmark
The NeonPulse mark and logotype, plus the kudesi brand wordmark — set in the primary pulse gradient (blue → cyan) on the near-black canvas.
Cards
One canonical .np-card with a defined anatomy (eyebrow · title · metric · body · footer) and variants — stat, live (gradient border), content, interactive, media and row — plus hover / focus / selected states. The reusable building block for any surface.
Layout primitives
Token-driven structure so spacing is never ad-hoc: .np-stack (vertical rhythm), .np-cluster (wrapping row), .np-grid (auto-fill) and .np-section. Assemble screens without bespoke margins.
Content patterns
The recurring content blocks every product needs: page header, status banners (info · success · warning · danger), empty state, loading skeleton and data list — the three states (empty / loading / error) that are usually forgotten.
UI kits
Three interactive, high-fidelity recreations. Click “Open” for the full, full-size experience.
Guidelines
Dark is the canvas, neon is the signal
Keep ~90% of a screen near-black and grey. Neon marks the one thing that's interactive or live.
Flat, not flat-boring
Depth = surface step (bg-1 → bg-2 → bg-3) + a 1px hairline. No stacked drop-shadows.
Glow is a state, not a style
Halos appear on hover / focus / active and on live data — never ambiently on static cards.
Mono is the HUD voice
Labels, metrics, statuses and timestamps use JetBrains Mono, uppercase, 0.14em tracking.
Soft corners, precise motion
12–20px radii keep it friendly; 200ms ease-out transitions keep it sharp. No bounces.
No emoji
Status is shown with neon dots, mono labels and Lucide outline icons — never emoji.
Token reference
Two tiers. Semantic aliases say what a token is for — components should consume these. Primitives say what the value is. Re-point an alias (or override it under [data-theme]) and everything using it updates. Click a variable to copy.
| Alias | → Primitive | Use |
|---|
| Variable | Value | Use |
|---|