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
- Header: logotype left, a ticket-count marquee centre, and a magenta 'Get tickets' button right that stays sticky.
- Hero: the event name at poster scale with a neon glow, the date and city beneath, and a live countdown to doors.
- Line-up: a stacked list of acts by billing size — headliners at 64px, support at 32px, everyone else at 20px, separated by hairline rules.
- 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.
- Schedule: a two-stage timetable grid with times down the left and stages across the top.
- Venue: a photograph, the address, transit lines, door times and an age policy.
- Gallery: a six-photo grid from previous editions with a heavy black-and-magenta duotone.
- FAQ accordion: entry, bags, re-entry, accessibility, refunds.
- 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.