---
version: alpha
name: NOCTURNE
description: Game-realm design system for Kuickr play shells and published game pages.
colors:
  primary: "#ff9a4a"
  on-primary: "#1a1206"
  secondary: "#e9c266"
  on-secondary: "#1a1206"
  neutral: "#0c0b12"
  gm-ink: "#0c0b12"
  gm-ink-2: "#14121d"
  gm-cream: "#f3ecdc"
  gm-muted: "#8f8899"
  gm-ember: "#ff9a4a"
  gm-gold: "#e9c266"
  gm-ice: "#5fd6c4"
  gm-line: "rgba(233,194,102,.18)"
gradients:
  gm-glow: "linear-gradient(135deg, #ff9a4a, #e9c266)"
typography:
  display-lg:
    fontFamily: Libre Baskerville
    fontSize: 60px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: 0px
  display-md:
    fontFamily: Libre Baskerville
    fontSize: 34px
    fontWeight: 400
    lineHeight: 1.14
    letterSpacing: 0px
  body-md:
    fontFamily: Space Grotesk
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  label-caps:
    fontFamily: JetBrains Mono
    fontSize: 10.5px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: 0.14em
spacing:
  gm-s-1: 4px
  gm-s-2: 8px
  gm-s-3: 12px
  gm-s-4: 16px
  gm-s-5: 24px
rounded:
  gm-cut: 7px
  gm-cut-lg: 14px
components:
  game-primary-action:
    backgroundColor: "{colors.gm-ember}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body-md}"
    rounded: "{rounded.gm-cut}"
    padding: "{spacing.gm-s-3} {spacing.gm-s-4}"
  game-panel:
    backgroundColor: "{colors.gm-ink-2}"
    textColor: "{colors.gm-cream}"
    rounded: "{rounded.gm-cut-lg}"
    padding: "{spacing.gm-s-5}"
  live-pulse:
    backgroundColor: "{colors.gm-ice}"
    textColor: "{colors.gm-ink}"
    rounded: "{rounded.gm-cut}"
  room-code:
    textColor: "{colors.gm-gold}"
    typography: "{typography.label-caps}"
  muted-label:
    textColor: "{colors.gm-muted}"
    typography: "{typography.label-caps}"
---

# NOCTURNE DESIGN.md

## Game Realm

NOCTURNE is the Kuickr game-realm identity. It is for the trusted play shell and published game pages, not docs, reader chrome, marketing pages, or product settings. The surface should feel like a midnight instrument panel lit by animated ember and gold, with ice-teal for "alive" state.

The token prefix is `--gm-*`. Use the `game` design-system ID in the registry; `nocturne` is an alias for humans and agents.

## Color

Use `gm-ink` as the canvas. Use `gm-cream` for readable text, `gm-muted` for metadata, and the ember-to-gold `gm-glow` gradient for the single most important action or active chapter state. `gm-ice` is reserved for live, connected, or pulsing presence.

Avoid flat warm-paper colors here. NOCTURNE is deliberately not the Kuickr deck or docs system.

## Shape

Panels and controls use cut-corner bevels, not rounded cards. Use `--gm-cut` for compact controls and `--gm-cut-lg` for larger panels or hero elements. The bevel is part of the game-realm contract because it separates play controls from document UI.

## Motion

Motion should feel alive but controlled: ember seams can move, room codes can glow or flicker lightly, and live indicators can pulse. Respect reduced-motion settings in implementation.

## Components

Use a beveled primary action with `gm-glow` and dark text. Use translucent midnight panels with `gm-line` borders for chrome. Use `gm-ice` only for live status, not general links.

## Do's and Don'ts

- Do use `var(--gm-*)` for the play shell and agent-authored game pages.
- Do keep NOCTURNE separate from `kuickr` docs/product surfaces.
- Do use `game` as the registry ID and `nocturne` as the alias.
- Don't use `--gm-*` for normal hosted documents, books, dashboard UI, or marketing pages.
- Don't hard-code the ember/gold/ice values outside the token file and this DESIGN.md front matter.