themes/sci-fi-hud.yaml

Rama main · réplica de lectura del repositorio original.

# Sci-Fi HUD — dark panel, cyan/magenta HUD lines, corner brackets.
# A heads-up display language: dark slate panels, cyan and magenta linework,
# corner brackets on cards, monospace labels. Distinct from dark-neon's glow
# by the disciplined HUD geometry.

name: sci-fi-hud
label: Sci-Fi HUD
summary: A heads-up display — dark panels, cyan/magenta HUD linework.

tokens:
  palette:
    bg: "#0A0F14"          # deep space slate
    surface: "#101A22"
    ink: "#DFF3F2"         # pale cyan-white
    ink_muted: "#6E8B93"
    accent: "#33D6E0"      # cyan
    accent_alt: "#E85AD4"  # magenta
    rule: "#1E3540"
    on_accent: "#0A0F14"

  surfaces:
    title:   { bg: "#070B0F", ink: "#DFF3F2", muted: "#627D87", accent: "#E85AD4" }
    section: { bg: "#12303A", ink: "#DFF3F2", muted: "#7FB6C0" }

  dark:
    bg: "#05080C"
    surface: "#0C151C"
    ink: "#DFF3F2"
    ink_muted: "#5F7B85"
    accent: "#3BE0EA"
    accent_alt: "#EF63DC"
    rule: "#1A2F38"
    on_accent: "#05080C"

  type:
    display:  { family: "Space Grotesk", weight: 600, size: 38, line: 1.1,  tracking: 0.5 }
    heading:  { family: "Space Grotesk", weight: 600, size: 28, line: 1.15, tracking: 0.3 }
    subhead:  { family: "IBM Plex Mono", weight: 400, size: 13.5, line: 1.5, tracking: 0 }
    body:     { family: "IBM Plex Mono", weight: 400, size: 12, line: 1.6,  tracking: 0 }
    caption:  { family: "IBM Plex Mono", weight: 400, size: 10, line: 1.35, tracking: 0.2 }
    eyebrow:  { family: "IBM Plex Mono", weight: 700, size: 10, line: 1.2,  tracking: 1.8, transform: upper }
    stat:     { family: "Space Grotesk", weight: 600, size: 54, line: 1.0,  tracking: 0 }

  grid:
    margin: { top: 0.62, right: 0.7, bottom: 0.55, left: 0.7 }
    gutter: 0.30
    columns: 12
    band: { eyebrow_y: 0.62, title_y: 1.30, body_y: 2.55 }

  shape:
    radius: { card: 0.04, pill: 0.40, chip: 0 }
    border: { width: 1, color: "#2A4A58" }
    card_pad: 0.30

  shadow:
    card: { type: outer, blur: 6, offset: 2, angle: 90, color: "000000", opacity: 0.45 }

  # The HUD frame: a thin magenta scan bar, a few short registration ticks and
  # one baseline — NOT a full grid. Five full-height verticals plus two
  # horizontals read as dense line noise behind every slide; the HUD identity
  # comes from the corner brackets and mono labels, so the background stays calm.
  background:
    decor:
      - shape: rect
        x: 0
        y: 0
        w: 13.333
        h: 0.035
        fill: "#E85AD4"
        transparency: 35
      - { shape: rect, x: 2.22, y: 0.035, w: 0.02, h: 0.45, fill: "#33D6E0", transparency: 93 }
      - { shape: rect, x: 6.67, y: 0.035, w: 0.02, h: 0.45, fill: "#33D6E0", transparency: 93 }
      - { shape: rect, x: 11.11, y: 0.035, w: 0.02, h: 0.45, fill: "#33D6E0", transparency: 93 }
      - { shape: rect, x: 0, y: 6.65, w: 13.333, h: 0.02, fill: "#33D6E0", transparency: 94 }

  # Composition — src/composition.js owns the vocabulary; every axis
  # left out here is the shared default.
  layout:
    title:
      composition: split
    section:
      composition: rules
    heading:
      opening: numeral
      rule: under
    content:
      frame: sidebar
    list:
      marker: arrow

  plate:
    enabled: false

voice:
  feel: precise, technical, futuristic, controlled
  density: medium
  prefers:
    - system diagrams and telemetry framing
    - exact parameters and readouts
    - a cool confident register
  avoid:
    - organic warm language
    - marketing hype
    - emotional appeals
  headline_style: >
    A system status line. "PIPELINE STATUS: NOMINAL" over "How Rendering
    Works". Terse, coded, exact.
  body_style: >
    Each line a readout. No prose fluff, no filler.