| name | html-neon-pixel-style |
| description | Neon-Pixel Dark Cover genre (black + neon magenta/green, Geist Pixel display). Use when: 封面, dark cover, edition, 榜单, Top-N list, a16z-style, neon, tech-editorial dark, pixel typography. Trigger: 封面 / dark cover / edition / 榜单 / Top-N / neon / Geist Pixel / pixel display / 像素字体 / 像素封面. Inherits typography-system. Single-surface cover; NOT body copy or reports. |
name: html-neon-pixel-style
description: "Use for a DARK, high-energy report/landing COVER: pure-black ground, oversized bold CONDENSED UPPERCASE display headline with ONE word boxed in neon, 8-bit pixel-block decorations, neon magenta + green, an 'Nth EDITION' tag. Trigger: a16z-style/dark cover/封面/edition/榜单/Top-N list/tech-editorial dark + neon. NOT for body-text-heavy docs (dark long-form fatigues). Routed by html-style-router."
combo-tags: [html-rendering]
triggers:
- html-neon-pixel-style
- html neon pixel style
- html-style-router
- Geist Pixel
- 像素字体
- pixel display
- pixel typography
- geist pixel
- 像素封面
- 霓虹像素
- design-ui-swarm
HTML Genre — Neon-Pixel Dark (霓虹像素)
Typography base (inherited): composes ON TOP of typography-system;
inline tokens/typography.css FIRST. Pin <html class="force-dark"> so the
single-mode dark artifact is EXEMPT from genre-stranded-dark.
Reference template: examples/genre/neon-pixel.html (all 3 gates green).
Pixel-sampled from the a16z "Top 100 Gen-AI Consumer Apps" cover. A COVER/hero
genre — punchy, sparse, dark. DNA: the source reference set (pixel-sampled from real designs).
Layout frame + tokens (inject FIRST)
:root{ --np-page-max:960px; --np-page-gutter-total:clamp(32px,6vw,80px);
--np-bg:#000000; --np-ink:#F9F9F9; --np-magenta:#E64DD6; --np-green:#37E08C;
--np-pixel:var(--font-stack-pixel-display);
--np-cond:'Saira Condensed','Archivo Narrow','Oswald','Helvetica Neue',var(--font-stack-mixed-sans); }
body{ background:var(--np-bg); color:var(--np-ink); }
.np-frame{ box-sizing:border-box; position:relative; overflow:hidden;
width:min(var(--np-page-max),calc(100% - var(--np-page-gutter-total)));
margin-inline:auto; }
Structure: .np-px (aria-hidden absolutely-positioned 8-bit pixel squares,
magenta+green, z-index:1) → .np-top (mono wordmark + index) → .np-headline
(condensed bold uppercase, .box = one neon-outlined keyword) → .np-edition
(green Nth EDITION) → .np-foot (mono).
Gotchas
- Dark genre = pin
force-dark on BOTH <html> and the .np-frame element.
This exempts the single-mode artifact from genre-stranded-dark (the gate
only requires light-dark() pairs when dual mode is live).
- Contrast is FREE here (light-on-black ≈ 21:1; neon-on-black 7-12:1) — the
trap is the FOOTER: it inherits the black body, so its ink must read on black
(
#9AA0A6, not a light-ground grey). Reduced-motion: pixels are static (no
animation), so nothing to gate.
font-stretch:condensed degrades gracefully. Saira/Archivo/Oswald may be
absent; the stack falls to Helvetica Neue (condensed-capable on macOS) then the
foundation sans. font-synthesis:none means NO faux-condense — accept the
bold-uppercase fallback rather than a distorted face.- The pixel decor is DECORATION —
aria-hidden, pointer-events:none, behind
text (z-index). Never let a square land on a glyph; keep clusters at the edges.
- Sparse by design. This is a COVER: ≤1 headline + 1 boxed word + 1 edition
tag. For body content, switch genres after the cover.
- Geist Pixel is optional accent type, not the headline engine. Link
../typography-system/assets/fonts/geist-pixel-google.css when you want the
Google Fonts path, then use var(--np-pixel) / .display-pixel for short
Latin wordmarks, index labels, edition tags, or countdown numerals. Keep the
main headline on the condensed display stack; do not use the pixel face for
CJK or body text.
Verify
python3 scripts/build-genre-templates.py
python3 skills/typography-system/scripts/validate_typography.py --render examples/genre/neon-pixel.html
python3 scripts/html-inline-assets.py check examples/genre/neon-pixel.html
Your Name | your@email.com
