Design system

Neon Nightlife Editorial

Space Grotesk, Inter, JetBrains Mono. Magenta for action, cyan for the second beat. Surfaces step from near-black to plum. The pulse rail in the header is the live motif.

Color and elevation

bg-0#100c14
bg-1#1a1322
bg-2#241a30
bg-3#31243f
text#f6f1f8
text-soft#d9cce3
magenta#ff4f9a
magenta-strong#c2186a
cyan#5cf2ee
stars#ffd0b8
sites#f0b8ff
ai#b8fff8
toys#ffc2dc
vr#d7c4ff
guides#c8f5d8
lists#ffe2a8
news#c9dbff

Spacing is a 4 / 8 scale. Radii are 8, 12, 16. Motion is 150–250ms. Three shadows sit on bg-1, bg-2, and bg-3.

Type

Display, the visor hour

Article body sits at 19px on a wide screen and 18px below, inside a 68ch measure, at 1.6 line height. Specs and kickers use JetBrains Mono so a decibel does not look like a headline.

42 dBA · USB-C · 90 min

Buttons and icons

Inputs

Example error: add an email with a domain.

Tags, badges, scores

starssitesaitoysvrguideslistsnewsNewUpdated8.6Pulse score 8.6 out of 107.4Pulse score 7.4 out of 106.2Pulse score 6.2 out of 105.1ScorePulse score 5.1 out of 10

Cards

Gear Lab

Empty, error, skeleton, toast, modal, tabs, accordion

Nothing filed

Empty states keep the pulse rule and a way forward.

Search

Loading skeleton page

Score color tracks the number. 8.5 and up is magenta, 7.5 is cyan, 6 is gold.
What is withheld in SFW mode?

Explicit image URLs. The page gets a placeholder from a four-plate pool instead. The server key for the real file is not in the HTML.

What does Shift+H do?

Quick hide. Discreet mode swaps the tab title and favicon. Blur softens the page and leaves the header sharp.

NSFW placeholder

Owner brand kit

Every file below is owner-supplied art (license: brand-kit), mapped drop-in from the PulseNSFW Site Assets kit. Canonical paths live insrc/lib/brand/slots.ts; the kit-to-repo map is inpublic/media/brand/README.md.

Logo lockups

Glossy gradient P mark is SVG; the wordmark is chrome PULSE with the hot-magenta NSFW suffix when NSFW mode reads on. Discreet mode swaps the title and favicon only.

SFW wordmark
Discreet

Chrome

App icon render: neon goggles over a dark plate
app-icon · /media/brand/app-icon.png
Glossy gradient letter P monogram
monogram-p · /media/brand/monogram-p.png
Chrome VR headset inside a magenta ring
avatar · /media/brand/avatar.png

Favicon / PWA set

Pulse favicon
favicon-32
Apple touch icon
apple-touch-icon
PWA icon 192
icon-192
PWA icon 512
icon-512

Category plates

Kit banners map to media/categories/<id>/hero.png; kit thumbs to cover.png. Stars and Sites still carry the generated SVG stand-ins until owner art arrives.

stars section header platestars category cover plate
stars
sites section header platesites category cover plate
sites
ai section header plateai category cover plate
ai
toys section header platetoys category cover plate
toys
vr section header platevr category cover plate
vr
guides section header plateguides category cover plate
guides
lists section header platelists category cover plate
lists
news section header platenews category cover plate
news

Kit plates in use

Homepage hero background plate
hero-bg → home hero
Newsletter call to action plate
newsletter-cta → subscribe strip
About page header plate
about-header → /about
Empty state illustration
empty-state → empty results
Reviewed by PulseNSFW badge
reviewer badge + avatar → review stamp