directory / gameplay / arcade-noir
GameplayDarkPlayful

Arcade Noir

High-score energy, rigid modules, and readable action states. This variant adds dark contrast, compact controls, and premium restraint.

By Rofi

$npx designdotmd add arcade-noir
Learn more about the CLI
try on →
1440×900
gameplay / dark / UI

Kitchen sink

Arcade Noir — the kitchen sink.

Every primitive in the system, styled straight from tokens.

Levels
32
Tokens
31
Installs
13K
Accent
#EF2675
Surface
#141313
Ink
#F7F1E8
gameplay / dark / UI
FoundationsComponentsPatternsChangelog

Kitchen sink

Arcade Noir — the kitchen sink.

Every primitive in the system, styled straight from tokens.

Levels
32
Tokens
31
Installs
13K

mobile · 390×844

The file

---
version: alpha
name: Arcade Noir
description: High-score energy, rigid modules, and readable action states. This variant adds dark contrast, compact controls, and premium restraint.
colors:
  primary: "#EF2675"
  surface: "#141313"
  ink: "#F7F1E8"
---

## Overview

High-score energy, rigid modules, and readable action states. This noir variant emphasizes dark contrast, compact controls, and premium restraint.

## Usage

Use this system for gameplay products that need fast preview, installable tokens, and readable agent instructions.

## Rules

- Keep one dominant action color per screen.
- Let spacing and type hierarchy create the signature.
- Keep generated UI components readable before expressive.

Tokens

Colors

primary
#EF2675
surface
#141313
ink
#F7F1E8

Typography

display
Fraunces · 4rem
body
Inter · 1rem
label
JetBrains Mono · .72rem

Rounded & Spacing

rounded
2px / 4px / 6px
spacing
8px / 16px / 32px