uxskill
Star on GitHub
Language
English 简体中文 繁體中文 日本語 한국어 हिन्दी Bahasa Indonesia Tiếng Việt ไทย العربية Español Français Deutsch Português Русский Türkçe Italiano
← All design systems
Dark Vivid Data Accessible

# Pulsar

A deep-space dark system where an electric magenta carries every action.

Download system Open full preview
Live preview
Concept

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.

Palette / 14 tokens
Canvas`#00040c` Page and app background 1.0:1
Surface`#080c15` Cards, panels, and form fields 1.05:1
Elevated`#12171f` Modals, popovers, and the highest tier 1.14:1
Border`#222830` Hairline dividers and outlines 1.38:1
Ink`#e5f1ff` Headlines and primary foreground 17.95:1
Body`#a9b3c0` Paragraph and reading text 9.68:1
Muted`#707883` Secondary text, captions, and hints 4.6:1
Primary`#db3291` Primary action, focus, and accent 4.77:1
Primary Active`#c2227c` Pressed and active state of the accent 3.73:1
On Primary`#0a0a0c` Text and icons on the accent 1.04:1
Success`#5ede9e` Success, positive metrics, and confirmation 12.14:1
Warning`#deb85e` Warning and caution 10.88:1
Danger`#de6f5e` Error, destructive, and critical signal 6.4:1
Info`#5e9ade` Information and neutral data 6.99:1
Typography
Display headlines and UI labels / Inter Tight
Ag 1234

The quick brown fox jumps over the lazy dog.

Body and reading text / Inter
Ag 1234

The quick brown fox jumps over the lazy dog.

Metrics, code, and tabular data / JetBrains Mono
Ag 1234

The quick brown fox jumps over the lazy dog.

Accessibility / WCAG AA by construction
ink on canvas 17.95:1 AA
body on canvas 9.68:1 AA
muted on canvas 4.6:1 AA
primary on canvas 4.77:1 AA
on primary on primary 4.59:1 AA
body on surface 9.22:1 AA
Files
DESIGN.md tokens.css metadata.json preview.html Download all (zip)

    ---
    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.

How to use

Download the folder and point your coding agent (Claude Code, Cursor, Codex) at `DESIGN.md`. Load `css/tokens.css` for the variables and open `preview.html` to see it applied. Generated by the ux-skill engine: deterministic, offline, never calls an LLM. Free under MIT.