Neon Grid

source

---
name: Neon Grid
description:
  Cyberpunk UI — true-black background, magenta + cyan neons, sharp corners,
  monospace everywhere. Built for glow and grid.
colors:
  background: "#05060B"
  surface: "#0B0D18"
  surface-raised: "#141828"
  ink: "#E8ECF8"
  ink-muted: "#6A7292"
  accent: "#FF2E9B"
  accent-alt: "#00E5FF"
  success: "#39FF14"
  warning: "#FFB800"
  danger: "#FF3D3D"
  border: "rgba(255, 46, 155, 0.22)"
  border-alt: "rgba(0, 229, 255, 0.18)"
  link: "{colors.accent-alt}"
typography:
  h1:
    family: "'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace"
    size: "3rem"
    weight: 700
    lineHeight: 1
    letterSpacing: "-0.03em"
    textTransform: "uppercase"
  h2:
    family: "'JetBrains Mono', ui-monospace, monospace"
    size: "1.875rem"
    weight: 700
    lineHeight: 1.15
    letterSpacing: "-0.01em"
    textTransform: "uppercase"
  h3:
    family: "'JetBrains Mono', ui-monospace, monospace"
    size: "1.25rem"
    weight: 600
    lineHeight: 1.25
  body:
    family: "'Inter', system-ui, sans-serif"
    size: "0.9375rem"
    weight: 400
    lineHeight: 1.55
  code:
    family: "'JetBrains Mono', ui-monospace, monospace"
    size: "0.8125rem"
    weight: 500
  caption:
    family: "'JetBrains Mono', monospace"
    size: "0.6875rem"
    weight: 600
    letterSpacing: "0.18em"
    textTransform: "uppercase"
spacing:
  xs: "0.25rem"
  sm: "0.625rem"
  md: "1rem"
  lg: "1.75rem"
  xl: "3rem"
rounded:
  sm: "0px"
  md: "2px"
  lg: "4px"
shadows:
  glow-accent:
    "0 0 24px rgba(255, 46, 155, 0.55), 0 0 2px rgba(255, 46, 155, 0.8)"
  glow-cyan: "0 0 24px rgba(0, 229, 255, 0.5), 0 0 2px rgba(0, 229, 255, 0.8)"
  inset-grid: "inset 0 0 0 1px rgba(255, 46, 155, 0.22)"
components:
  button-primary:
    background: "{colors.accent}"
    color: "{colors.background}"
    border: "1px solid {colors.accent}"
    radius: "{rounded.sm}"
    padding: "0.625rem 1.25rem"
    shadow: "{shadows.glow-accent}"
  button-secondary:
    background: "transparent"
    color: "{colors.accent-alt}"
    border: "1px solid {colors.accent-alt}"
    radius: "{rounded.sm}"
    padding: "0.625rem 1.25rem"
    shadow: "{shadows.glow-cyan}"
  card:
    background: "{colors.surface}"
    border: "1px solid {colors.border}"
    radius: "{rounded.sm}"
    padding: "{spacing.lg}"
    shadow: "{shadows.inset-grid}"
  input:
    background: "{colors.background}"
    border: "1px solid {colors.border-alt}"
    radius: "{rounded.sm}"
    padding: "0.5rem 0.75rem"
---

## Overview

Neon Grid is a hard-edged cyberpunk UI: near-zero radius, magenta + cyan neons,
monospace in every heading. Built for dev consoles, hackathon dashboards, and
"is this a real product or a concept video?" marketing pages.

## Colors

- Background is nearly-true-black (`#05060B`) — never pure `#000` so glows have
  something to sit on.
- Magenta (`#FF2E9B`) is the dominant accent; cyan (`#00E5FF`) handles secondary
  actions and links.
- Borders are semi-transparent versions of the accents, so the whole UI reads as
  a grid lit from underneath.

## Typography

- JetBrains Mono for every heading, uppercased on h1/h2 — that's the look.
- Inter handles body text so paragraphs don't become punishing to read.

## Usage

Use Neon Grid for infra tools, dev marketing, AI agents, game-dev interfaces, or
anywhere a terminal aesthetic is on-brief. Lean on the `glow-*` shadows for
primary/selected states; they are the brand. Avoid rounded corners — radii over
4px break the contract.