Pulsar

---
version: 1
name: pulsar
description: "A deep-space dark system where an electric magenta carries every action."
theme: dark
colors:
  canvas: "#00040c"
  surface: "#080c15"
  elevated: "#12171f"
  border: "#222830"
  ink: "#e5f1ff"
  body: "#a9b3c0"
  muted: "#707883"
  primary: "#db3291"
  primary-active: "#c2227c"
  on-primary: "#0a0a0c"
  success: "#5ede9e"
  warning: "#deb85e"
  danger: "#de6f5e"
  info: "#5e9ade"
typography:
  display-xl:
    fontFamily: "Inter Tight"
    fontSize: 64px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -1.5px
  display-lg:
    fontFamily: "Inter Tight"
    fontSize: 48px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -1px
  display-md:
    fontFamily: "Inter Tight"
    fontSize: 34px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: -0.5px
  body:
    fontFamily: "Inter"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-sm:
    fontFamily: "Inter"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  button:
    fontFamily: "Inter"
    fontSize: 15px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: 0.1px
  caption:
    fontFamily: "Inter"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.2px
  code:
    fontFamily: "JetBrains Mono"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
spacing:
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 24px
  xl: 32px
  xxl: 48px
rounded:
  sm: 6px
  md: 10px
  lg: 16px
  pill: 9999px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.md}"
    padding: 10px 18px
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    border: "1px solid {colors.border}"
    rounded: "{rounded.md}"
  input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    border: "1px solid {colors.border}"
    rounded: "{rounded.md}"
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.body}"
    border: "1px solid {colors.border}"
    rounded: "{rounded.lg}"
---

# Pulsar

Pulsar treats the screen as a near-black void and lets a single electric magenta do the signalling. Hairline borders draw the structure, mono type handles the numbers, and the canvas stays out of the way so data reads as light. Built for crypto, trading, and AI surfaces.

## Accessibility

Every text pair meets WCAG AA, enforced at synthesis time:

- Ink on canvas: 17.95:1
- Body on canvas: 9.68:1
- Muted on canvas: 4.6:1
- Text on primary: 4.59:1

## How to use

Drop this folder into your project and point your coding agent (Claude Code, Cursor, Codex) at `DESIGN.md`. Load `css/tokens.css` for the variables, open `preview.html` to see the system applied. Generated by ux-skill: deterministic, offline, never calls an LLM.