Skip to content
Fredrin

Events

Neon Arcade

After-dark neon poster energy for events, releases and nightlife.

Black canvas, magenta and cyan neon, and type set at gig-poster scale — a page that behaves like a flyer that happens to sell tickets.

Best for
Club nights, festivals, game launches and anything selling tickets to a date.
Type
"Archivo Black", "Helvetica Neue", Arial, sans-serifPoster scale: 96px+ uppercase headline, tightly tracked at -0.03em, often rotated a few degrees or set on two overlapping lines. Body stays small and calm at 15/1.6 in muted lilac — the contrast is the whole aesthetic.
Palette
Background #08060FSurface #14102AInk #F4F0FFMuted #A79FC7Accent #FF2E9ABorder #2C2350
Page structure
  1. Header: logotype left, a ticket-count marquee centre, and a magenta 'Get tickets' button right that stays sticky.
  2. Hero: the event name at poster scale with a neon glow, the date and city beneath, and a live countdown to doors.
  3. Line-up: a stacked list of acts by billing size — headliners at 64px, support at 32px, everyone else at 20px, separated by hairline rules.
  4. Ticket tiers: three panels (Early, General, VIP) with a price, what is included, a remaining-count bar and a buy button; sold-out tiers are struck through, not hidden.
  5. Schedule: a two-stage timetable grid with times down the left and stages across the top.
  6. Venue: a photograph, the address, transit lines, door times and an age policy.
  7. Gallery: a six-photo grid from previous editions with a heavy black-and-magenta duotone.
  8. FAQ accordion: entry, bags, re-entry, accessibility, refunds.
  9. Footer: promoter, socials, safer-spaces policy and licence numbers.
Tags
dark · neon · poster · bold

The creation prompt

659 words, self-contained — paste it into a chat session with your coding agent and it builds Neon Arcade end to end.

Build an event, festival or music release site using the "Neon Arcade" theme — After-dark neon poster energy for events, releases and nightlife.

## Art direction
A screen-printed flyer at 2am. Near-black ground, one magenta accent with a cyan secondary used only in glows, and headline type big enough to crop. Neon is done with layered text-shadows and a soft outer glow, never with a filter that costs a repaint. Sections overlap slightly and can sit a few degrees off-axis; a subtle grain overlay keeps the black from looking flat.

## Colour palette (use these exact values)
- Background: #08060F
- Surface / cards: #14102A
- Primary text: #F4F0FF
- Secondary text: #A79FC7
- Accent (buttons, links, active state): #FF2E9A
- Text on accent: #FFFFFF
- Borders / dividers: #2C2350
Use exactly one accent. Everything that needs emphasis earns it through weight, scale or space instead of a second colour.

## Typography
- Headings: "Archivo Black", "Helvetica Neue", Arial, sans-serif
- Body: "Inter", system-ui, sans-serif
- Poster scale: 96px+ uppercase headline, tightly tracked at -0.03em, often rotated a few degrees or set on two overlapping lines. Body stays small and calm at 15/1.6 in muted lilac — the contrast is the whole aesthetic.

## Page structure
1. Header: logotype left, a ticket-count marquee centre, and a magenta 'Get tickets' button right that stays sticky.
2. Hero: the event name at poster scale with a neon glow, the date and city beneath, and a live countdown to doors.
3. Line-up: a stacked list of acts by billing size — headliners at 64px, support at 32px, everyone else at 20px, separated by hairline rules.
4. Ticket tiers: three panels (Early, General, VIP) with a price, what is included, a remaining-count bar and a buy button; sold-out tiers are struck through, not hidden.
5. Schedule: a two-stage timetable grid with times down the left and stages across the top.
6. Venue: a photograph, the address, transit lines, door times and an age policy.
7. Gallery: a six-photo grid from previous editions with a heavy black-and-magenta duotone.
8. FAQ accordion: entry, bags, re-entry, accessibility, refunds.
9. Footer: promoter, socials, safer-spaces policy and licence numbers.

## Components and detailing
The neon effect is a class applied to headline type: `text-shadow` layered at 0 0 6px, 0 0 18px and 0 0 40px in the accent at descending opacity. Buttons are magenta pills, 48px, with the same glow at a lower radius. Cards are `#14102A` with a 1px `#2C2350` border and a 12px radius. The countdown uses tabular figures in monospace. A fixed grain overlay sits at 4% opacity, `pointer-events: none`.

## Motion
High energy but cheap: the marquee scrolls linearly, the countdown ticks once a second, and the hero glow breathes on a 3s loop between two shadow radii. Hover states brighten the glow at 120ms. Everything animates opacity and transform only — no layout thrash — and the whole lot stops flat under `prefers-reduced-motion`.

## Copy and imagery
Short, loud and factual: the date, the city, the doors time and the price must be readable within one screen. Line-ups list real act names in billing order. Ticket states are honest — show sold-out tiers struck through so the urgency is real rather than manufactured.

## Non-negotiables
- Responsive from 360px through desktop — no horizontal scrolling at any width.
- Every text/background pair clears WCAG AA (4.5:1 for body, 3:1 for large text); adjust a tint rather than shipping a failing pair.
- Fully keyboard operable, with a visible focus ring drawn in the accent colour.
- Honour `prefers-reduced-motion` — swap every transition for an instant state change.
- Write real copy in the voice described above; no lorem ipsum and no TODO placeholders.
- Use system or self-hosted fonts and CSS/SVG-drawn graphics — do not depend on a remote image or icon service.

Build the whole page end to end and show me the result running — not a description of it.

Pasting the prompt is step one. Fredrin runs the agent that builds it, one ticket per look.