Create a neon cyberpunk gaming website: Blade Runner meets arcade cabinet, with near-black streets, neon signage, glitch and CRT texture.
Brief
Subject: Shardline — a 4v4 tactical hacking shooter entering open betaWrite in-world copy: game modes, maps or factions, season name, release date, platforms, player stats, patch notesBlade Runner meets arcade cabinet: near-black streets, neon signage, glitch and CRT texture, but every paragraph stays easy to readDesign Tokens
Use these exact values. Where the spec is silent, stay consistent with them.
colors:
accent: "#00f0ff"
accentSecondary: "#ff2e88"
background: "#07060d"
border: "color-mix(in srgb, #00f0ff 16%, transparent)"
borderSecondary: "color-mix(in srgb, #ff2e88 22%, transparent)"
muted: "color-mix(in srgb, #ffffff 60%, #07060d)"
onNeon: "color-mix(in srgb, #07060d 70%, #000)"
surface: "color-mix(in srgb, #ff2e88 6%, #07060d)"
surfaceRaised: "color-mix(in srgb, #ff2e88 9%, #07060d)"
text: "color-mix(in srgb, #ffffff 85%, #07060d)"
textBright: "color-mix(in srgb, #ffffff 95%, #00f0ff)"
effects:
backgroundGrid: "1px primary lines at 3.5% every 48px both ways, plus radial-gradient(ellipse 80% 50% at 50% -10%, secondary at 10%, transparent 70%)"
button: "uppercase Chakra Petch 600, 0.95rem, 0.14em tracking, padding 0.85em 1.5em, 1px neon border, background at 60%, glow 0 0 10px neon at 45% plus an inset 12px; 10px L-brackets on the top-left and bottom-right corners; hover: neon at 14% fill, the full glow, translateY(-1px)"
card: "clip-path notching 18px top-left and bottom-right; a 1px edge from linear-gradient(150deg, neon, neon at 20% at 45%, neon at 70%); body linear-gradient(180deg, surfaceRaised, surface)"
crt: "fixed overlay: repeating-linear-gradient(0deg, black at 22% 0 1px, transparent 1px 3px) plus radial-gradient(ellipse, transparent 60%, black at 55%); opacity dips to 0.88 and 0.93 twice per 6s"
flicker: "logo glow drops to a 2px shadow at 55% opacity at 20%, 24% and 55% of a 5s loop"
floor: "secondary lines at 35% every 60px, perspective(420px) rotateX(62deg), bottom 38% of the hero, masked to fade upward; background-position scrolls 60px per 2s, linear"
glitch: "selected: medium. subtle: one burst every 6s, 2 slices, 2px shift, no skew. medium: bursts every 2.9s and 3.4s on the two copies, 3–4 slices each, up to 7px shift, a 1° skew every 5s. intense: bursts every 1.5s, 6 slices, up to 12px shift, a 2° skew every 3s and a 1px whole-title jitter during bursts. Each burst lasts 6–8% of its loop"
glow: "0 0 6px neon at 90%, 0 0 18px neon at 60%, 0 0 40px neon at 35%"
fonts:
body:
fallback: "system-ui, sans-serif"
family: Chakra Petch
weights: [400, 500]
display:
fallback: "system-ui, sans-serif"
family: Chakra Petch
weights: [600, 700]
mono:
fallback: "ui-monospace, SFMono-Regular, Menlo, monospace"
family: Share Tech Mono
weights: [400]
layout:
breakpoints:
mobile: 600px
nav: 860px
tablet: 1060px
container: 1200px including the gutters
gutter: 20px
motion:
durations:
card: 250ms
crt: 6s
feedIn: 450ms
flicker: 5s
link: 200ms
pulse: 1.6s
ticker: 38s
easings:
glitchAndFlicker: steps(1)
motion: ease-out
ticker: linear
radii:
everything: 0; dots and the pulse are circles
shadows:
terminal: "0 0 0 1px black at 60%, 0 30px 80px -30px primary at 25%"
spacing:
hero: "80px top, 120px bottom"
section: "110px top and bottom, 80px under 600px; section heads 44px above content"
type:
body:
font: body
lineHeight: 1.6
size: 1.0625rem
tracking: 0
weight: 400
caption:
font: mono
lineHeight: 1.4
size: "0.72–0.85rem, uppercase"
tracking: 0.14em
weight: 400
display:
font: display
lineHeight: 1
size: "clamp(2.6rem, 12.5vw, 9.5rem), uppercase"
tracking: 0.04em
weight: 700
headline:
font: display
lineHeight: 1.1
size: "clamp(2rem, 5vw, 3.2rem), uppercase"
tracking: 0.06em
weight: 700
title:
font: display
lineHeight: 1.2
size: "1.35–1.45rem, uppercase"
tracking: 0.06em
weight: 700
Style Rules
Two neons only: primary for the default signal, secondary for the alternate; cards and buttons alternate themGlow is signage, not decoration: the logo, the hero title, buttons and hovered elements; everything else is flatChakra Petch for headings, buttons and body; Share Tech Mono for data, labels, the terminal and the tickerHeadings are uppercase with 0.06em tracking; labels uppercase mono with 0.14–0.18em trackingCards are notched: an 18px corner clipped top-left and bottom-right, a 1px gradient edge in the card's neonThe atmosphere layers sit under everything: background grid, top secondary haze, scanlines with a vignetteText on panels is near-white or muted grey, at least 4.5:1Page Layout
container 1200px incl. gutters; scanlines + vignette over everything; faint 48px grid
◢ SHARD·LINE (flicker) ········ MODES LADDER INTEL COMMUNITY ········ [Log in] [▶ PLAY FREE]
░░░ vignette ░░░ ← hero
S H A R D L I N E ← glitching, glowing
FOUR OPERATORS. ONE UPLINK.
sentence, muted
[▶ PLAY FREE — JOIN BETA] [WATCH THE TRAILER]
│ BETA IN 03d 14h 22m │ LAUNCH │ PLATFORMS │ SERVERS │
▁▃▅█▃▆▂█▅▃▁ skyline with lit windows ▁▃█▅▂▆▃▁
╲╲╲ perspective floor grid, scrolling ╱╱╱
01 // PICK YOUR EXPLOIT ······································ lede ← modes
◤ mode ◢ ◤ mode ◢ ◤ mode ◢ ◤ mode ◢ notched cards, alternating neons
Maps in rotation: ◆ map ◆ map ◆ map …
◤ faction · sigil · motto ◢ ◤ faction · sigil · motto ◢
02 // TOP OPERATORS ← ladder
┌ ● ● ● ladder.sh — ghost_protocol ···················· [NA][EU][APAC] ┐
│ root@game:~$ query --ladder … █ │
│ RANK HANDLE TEAM K/D WIN% MATCHES MMR × 8 │
└───────────────────────────────────────────────────────────────────────┘
03 // PATCH NOTES & INTEL ← news
[LIVE FEED]◆ item ◆ item ◆ item ◆ → scrolling
◤ build notes ◢ ◤ map + image ◢ ◤ tech notes ◢
04 // YOU'RE NOT ALONE ← community
┌ ● ONLINE NOW 38,214 / peak / regions ▮▮▮ / buttons ┐ ┌ activity.log — tail -f ┐
.d8888b. ASCII name .d8888b. ← footer
brand · links · links · rating · socials
Sections
Header — 72px tall inside the container: logo left, links centre, actions rightContent:Game nameLinks: Modes, Ladder, Intel, CommunityComponents:Logo: a small SVG mark with a drop-shadow glow and the name in Chakra Petch 700, 1.45rem, 0.2em tracking, glowing primary, part of it in secondary; it flickersLinks: uppercase, 0.9rem, 0.14em tracking, muted; hover turns them primary with the glowActions: a small outline button and a solid primary 'Play free' buttonMobile: Under 860px the links move into a ≡ menu that drops a full-width panel at 97% backgroundHero — Centred, at least 100svh minus the header, padding 80px 0 120px: title, tagline 18px below, sentence (muted, max 620px), buttons 34px below, meta strip 48px below; behind it the skyline, the floor grid and a dark radial vignetteContent:Game nameA tagline in two short linesOne sentence on the setting and the core loopCountdown, launch date, platforms, server tick rateComponents:Title: the game name in Chakra Petch 700 at display size, near-white with the primary glow; ::before (secondary, -2px shadow) and ::after (primary, 2px shadow) copies sliced with clip-path inset and shifted sideways in burstsTagline: uppercase, clamp(1.1rem, 2.6vw, 1.5rem), weight 500, 0.08em trackingButtons: the button recipe; a solid primary '▶ Play free' and an outline 'Watch the trailer'Meta strip: four cells (max 880px) between 1px primary-16% lines on the background at 72%: a countdown, launch date, platforms, servers; labels in mono 0.72rem uppercase muted, values in mono 1.15rem, the countdown in primaryMobile: The meta strip becomes 2 × 2; the floor grid staysMotion: The title glitches per the glitch token; the floor grid scrolls toward the viewer; the countdown ticks every secondFeatured Games/Products — Section head, four cards in a row with 22px gaps, the map row, then the two faction cards side by side 56px belowContent:Title and lede on the modesFour modes alternating primary and secondary, with real rules in numbersEight map namesTwo factions with mottosComponents:Section head: a mono index ('01 //') in primary, the title in Chakra Petch 700 uppercase at headline size in near-white, and a muted lede (max 460px) on the rightMode card: the card recipe; a 16:10 image with a mono tag (top-right, 1px neon border); body (20px 22px 24px): a mono number in the card's neon, the name (1.45rem), two muted sentences, and a stats row under a dashed line (three figures, values in the card's neon)Map row: 'Maps in rotation:' and eight map names in mono, split by ◆Faction cards: two wide cards with a sigil, the name, a mono motto in the card's neon and two sentencesMobile: Two columns under 1060px, one under 600pxMotion: Hover lifts a card 4px over 250ms, adds a neon drop-shadow glow and scales its image to 1.06Stats/Leaderboard — Section head, then the terminal at full container widthContent:Title and lede on the current ladder seasonEight players with rank, handle, team tag, K/D, win rate, matches and MMRA footer line with the reset dateComponents:Terminal: 1px primary-16% border, background at 92%, a long primary-tinted shadow; a title bar with three dots (the first secondary), the window title in mono, and NA / EU / APAC tabsPrompt line: 'root@…:~$' in primary and a typed command in near-white with a blinking block cursorTable: mono 0.95rem, min-width 640px; headers uppercase 0.78rem muted over a dashed primary line; rows with 1px white-5% rules; rank 1 in secondary with its glow, ranks 2–3 in white; numbers right-alignedStates:Tabs switch the region and retype the command; rows tint primary at 6% on hoverMobile: The table scrolls sideways inside the terminalNews/Updates — Section head, the ticker full width 48px above three cards at 1.25fr / 1fr / 1fr with 22px gapsContent:Title and ledeEight ticker items with numbersThree patch cards: a build release with a change list, a new map with a link, a tech note with a change listComponents:Ticker: a secondary label block ('LIVE FEED') and a scrolling mono line of items split by ◆ in primary, between secondary-22% lines, edges faded with a maskPatch cards: the card recipe at 26px padding; a meta row with a type tag (1px neon border) and a muted date; a 1.35rem title; muted text or a list of changes; one card leads with a 16:8 imageMobile: One column under 860pxMotion: The ticker moves left continuously over 38s and pauses on hoverCommunity — Two columns 1.1fr / 1fr with a 28px gap, equal heightContent:Title and lede on live sessionsOnline count, weekly peak, sign-upsFour regions with pingTen activity lines in the game's languageComponents:Live panel: 1px primary-16% border, a faint primary radial glow in its top-right corner, 32px padding; a mono live label with a pulsing 12px dot in primary; the player count in Chakra Petch at headline size; peak and sign-up figures; four server regions with latency bars; two buttonsActivity terminal: the terminal recipe titled 'activity.log — tail -f': rows of time (mono, muted, 78px column) and an event with player handles in primary or secondary; three stat cells belowMobile: One column under 860pxMotion: The dot pulses every 1.6s; a new activity line slides in every few seconds over 450ms and the count ticksFooter — A 1px primary-16% rule above, a faint secondary wash at the bottom; the ASCII art centred in mono primary at 75% (clamp(0.42rem, 1.25vw, 0.85rem), letters partly in secondary), then the columnsContent:An ASCII-art rendering of the game's nameBrand line, two link columns, rating and legal textSix social links as small outline buttonsMobile: Columns stack; the ASCII art scales down and clipsImagery & Icons
Mode and patch images: picsum.photos with a seed per item, treated grayscale(1) contrast(1.15) brightness(0.7), under a 135° wash of the card's neon at 45% and a fade into the panel at the bottomThe skyline: an inline SVG silhouette of towers across the bottom 42% of the hero, with scattered lit windows in both neons and a few antenna lightsFaction sigils: 64px hexagons (clip-path) with a 1px neon border, a 10% neon fill and a mono glyphIcons: simple 16–20px inline SVG strokes in the current neon; ◆ and ▶ as text glyphsImplementation Notes
Glitch copies use data-text and content: attr(data-text); flicker and CRT keyframes use steps so changes snapScripts: the countdown, region tabs with a typing effect, the activity feed, the live count, the mobile menuDon'ts
No third neon colour (no yellow, green or purple accents), not even for ranks or live dotsNo glow on paragraphs, table data or form textNo neon highlight on a single word in section titlesNo rounded cards: corners are notched or squareNo flashes faster than three per secondNo fonts, colours, radii or shadows outside the design tokens and rules aboveNo sections, features or effects that this spec doesn't listNo placeholder copy (lorem ipsum, "Elevate your workflow"): every word comes from the subjectNo pill-shaped eyebrow labels above headings and no gradient text, unless this spec asks for themNo grid of identical icon cards: vary size and emphasis by importanceQuality Floor
Mobile-first and responsive from 360px to 1440px and wider, with no horizontal scrollingText contrast meets WCAG 2.1 AA: 4.5:1 for body text, 3:1 for large textSemantic landmarks (header, nav, main, section, footer), one h1, descriptive alt textEvery interactive element has hover, visible focus and active states and works from the keyboardHonour prefers-reduced-motion: keep opacity fades, drop movementTech Stack
Framework: HTML/CSS/JS — Deliver one self-contained index.html: styles in a <style> block, scripts in a <script type="module"> block, no build step.Styling: Vanilla CSS — Plain CSS. Declare every design token as a custom property on :root (--color-accent, --font-display, --radius-card…) and use only those properties for colours, fonts, radii, shadows and timing.Language: JavaScript — JavaScript as ES modules; no TypeScript.UI library: None — No component library: build every component from the design tokens.Motion: CSS only — CSS transitions and keyframes only, with durations and easings from the design tokens.Icons: Inline SVG — Inline SVG icons drawn for this style, with one stroke width and corner treatment across the page.Acceptance Checklist
Only two neon colours appear (primary and secondary); everything else is the background, panels and greysThe neon glow is on the logo, the hero title, buttons, hovered cards and hovered links only; body text never glowsThe hero title glitches at the selected intensity with two colour-shifted, clip-path-sliced copiesScanlines and a vignette cover the page; a faint 48px grid sits on the background; the hero has a skyline and a perspective floor gridCards have clipped corners (18px notches) and a 1px gradient neon edgeThe leaderboard is a terminal window with region tabs and a typed command lineThe news ticker scrolls continuously and pauses on hoverNo flicker or glitch flashes more than three times per secondEvery loop (glitch, flicker, CRT, floor, ticker, feed, countdown pulse) stops under reduced motionBody copy passes 4.5:1 and focus rings are 2px primary with a glow
