@qpjoy/ui-design-neon-void 2.0.0

package/dist/tokens.css

@@ -0,0 +1,112 @@
+:root,
+.qp-theme-neon-void {
+  color-scheme: dark;
+  --qp-bg-1: #141417;
+  --qp-bg-2: #1a1b23;
+  --qp-bg-3: #21232d;
+  --qp-bg-4: #292c37;
+  --qp-bg-input: #252936;
+  --qp-bg-hover: #303442;
+  --qp-bg-active: #363c4d;
+  --qp-line: rgba(94, 142, 236, 0.18);
+  --qp-line-strong: rgba(43, 246, 210, 0.72);
+  --qp-design-line: rgba(139, 111, 255, 0.72);
+  --qp-primary: #2bf6d2;
+  --qp-primary-hover: #11cdb5;
+  --qp-primary-pressed: #079987;
+  --qp-archetype: #b974ff;
+  --qp-danger: #ee6067;
+  --qp-warning: #f8d06c;
+  --qp-success: #48bc77;
+  --qp-info: #5e8eec;
+  --qp-axis-x: #ff4f68;
+  --qp-axis-y: #22e184;
+  --qp-axis-z: #5e8eec;
+  --qp-icon-guide: rgba(238, 96, 103, 0.52);
+  --qp-icon-stroke: #f3f3f3;
+  --qp-icon-shadow: rgba(0, 0, 0, 0.88);
+  --qp-text-1: #e2e2e2;
+  --qp-text-2: rgba(226, 226, 226, 0.7);
+  --qp-text-3: rgba(226, 226, 226, 0.5);
+  --qp-text-4: rgba(226, 226, 226, 0.3);
+  --qp-text-5: rgba(226, 226, 226, 0.1);
+  --qp-light-1: rgba(163, 182, 233, 0.5);
+  --qp-light-2: rgba(163, 182, 233, 0.3);
+  --qp-light-3: rgba(163, 182, 233, 0.15);
+  --qp-light-4: rgba(163, 182, 233, 0.1);
+  --qp-light-5: rgba(163, 182, 233, 0.05);
+  --qp-font-family: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
+  --qp-font-head-1: 20px;
+  --qp-font-head-2: 16px;
+  --qp-font-body-1: 14px;
+  --qp-font-body-2: 12px;
+  --qp-font-caption-1: 10px;
+  --qp-line-height: 1.5;
+  --qp-weight-regular: 300;
+  --qp-weight-medium: 400;
+  --qp-weight-semibold: 500;
+  --qp-radius-xs: 4px;
+  --qp-radius-sm: 6px;
+  --qp-radius-md: 8px;
+  --qp-radius-pill: 999px;
+  --qp-space-1: 4px;
+  --qp-space-2: 8px;
+  --qp-space-3: 12px;
+  --qp-space-4: 16px;
+  --qp-space-5: 20px;
+  --qp-space-6: 24px;
+  --qp-space-8: 32px;
+  --qp-size-control-sm: 24px;
+  --qp-size-control-md: 32px;
+  --qp-size-control-lg: 40px;
+  --qp-shadow-drop-1: 0 8px 22px rgba(0, 0, 0, 0.18);
+  --qp-shadow-drop-2: 0 16px 38px rgba(0, 0, 0, 0.26);
+  --qp-shadow-drop-3: 0 22px 58px rgba(0, 0, 0, 0.36);
+  --qp-shadow-inner-1: inset 0 1px 0 rgba(255, 255, 255, 0.035);
+  --qp-shadow-inner-2: inset 0 0 0 1px rgba(43, 246, 210, 0.5);
+  --qp-transition-fast: 120ms ease;
+  --qp-transition-medium: 180ms ease;
+  --qp-density-panel-padding: var(--qp-space-4);
+  --qp-density-card-padding: var(--qp-space-4);
+  --qp-density-control-x: 14px;
+  --qp-density-gap: var(--qp-space-3);
+}
+
+.qp-density--small {
+  --qp-font-body-1: 13px;
+  --qp-font-body-2: 11px;
+  --qp-font-caption-1: 10px;
+  --qp-size-control-sm: 22px;
+  --qp-size-control-md: 28px;
+  --qp-size-control-lg: 36px;
+  --qp-density-panel-padding: 12px;
+  --qp-density-card-padding: 12px;
+  --qp-density-control-x: 12px;
+  --qp-density-gap: 10px;
+}
+
+.qp-density--medium {
+  --qp-font-body-1: 14px;
+  --qp-font-body-2: 12px;
+  --qp-font-caption-1: 10px;
+  --qp-size-control-sm: 24px;
+  --qp-size-control-md: 32px;
+  --qp-size-control-lg: 40px;
+  --qp-density-panel-padding: var(--qp-space-4);
+  --qp-density-card-padding: var(--qp-space-4);
+  --qp-density-control-x: 14px;
+  --qp-density-gap: var(--qp-space-3);
+}
+
+.qp-density--large {
+  --qp-font-body-1: 15px;
+  --qp-font-body-2: 13px;
+  --qp-font-caption-1: 11px;
+  --qp-size-control-sm: 28px;
+  --qp-size-control-md: 38px;
+  --qp-size-control-lg: 48px;
+  --qp-density-panel-padding: 20px;
+  --qp-density-card-padding: 18px;
+  --qp-density-control-x: 16px;
+  --qp-density-gap: 14px;
+}

package/dist/tokens.d.ts

@@ -0,0 +1,338 @@
+export type TokenLeaf = string | number;
+export type NeonVoidTokens = typeof neonVoidTokens;
+export declare const neonVoidTokens: {
+    readonly meta: {
+        readonly name: "Neon Void";
+        readonly packageName: "@qpjoy/ui-design-neon-void";
+        readonly description: "Dark tool UI with cyan primary actions, quiet blue-gray panels, compact controls, and precise state feedback.";
+    };
+    readonly color: {
+        readonly background: {
+            readonly bg1: "#141417";
+            readonly bg2: "#1A1B23";
+            readonly bg3Panel: "#21232D";
+            readonly bg4ActionbarDialog: "#292C37";
+        };
+        readonly auxiliary: {
+            readonly a1: "#141417";
+            readonly a2: "rgba(20, 20, 23, 0.7)";
+            readonly a3: "rgba(20, 20, 23, 0.5)";
+            readonly a4: "rgba(20, 20, 23, 0.3)";
+            readonly a5: "rgba(20, 20, 23, 0.1)";
+        };
+        readonly lightTone: {
+            readonly l1: "rgba(163, 182, 233, 0.5)";
+            readonly l2: "rgba(163, 182, 233, 0.3)";
+            readonly l3: "rgba(163, 182, 233, 0.15)";
+            readonly l4: "rgba(163, 182, 233, 0.1)";
+            readonly l5: "rgba(163, 182, 233, 0.05)";
+        };
+        readonly text: {
+            readonly t1: "#E2E2E2";
+            readonly t2: "rgba(226, 226, 226, 0.7)";
+            readonly t3: "rgba(226, 226, 226, 0.5)";
+            readonly t4: "rgba(226, 226, 226, 0.3)";
+            readonly t5: "rgba(226, 226, 226, 0.1)";
+        };
+        readonly accent: {
+            readonly main: "#2BF6D2";
+            readonly mainHover: "#11CDB5";
+            readonly mainPressed: "#079987";
+            readonly archetype: "#B974FF";
+            readonly danger: "#EE6067";
+            readonly warning: "#F8D06C";
+            readonly success: "#48BC77";
+            readonly info: "#5E8EEC";
+        };
+        readonly axis: {
+            readonly x: "#FF4F68";
+            readonly y: "#22E184";
+            readonly z: "#5E8EEC";
+        };
+    };
+    readonly typography: {
+        readonly family: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"PingFang SC\", \"Microsoft YaHei\", sans-serif";
+        readonly head1: {
+            readonly fontSize: 20;
+            readonly lineHeight: 1.5;
+            readonly fontWeight: 400;
+        };
+        readonly head2: {
+            readonly fontSize: 16;
+            readonly lineHeight: 1.5;
+            readonly fontWeight: 400;
+        };
+        readonly body1Semibold: {
+            readonly fontSize: 14;
+            readonly lineHeight: 1.5;
+            readonly fontWeight: 500;
+        };
+        readonly body1Medium: {
+            readonly fontSize: 14;
+            readonly lineHeight: 1.5;
+            readonly fontWeight: 400;
+        };
+        readonly body1Regular: {
+            readonly fontSize: 14;
+            readonly lineHeight: 1.5;
+            readonly fontWeight: 300;
+        };
+        readonly body2Medium: {
+            readonly fontSize: 12;
+            readonly lineHeight: 1.5;
+            readonly fontWeight: 400;
+        };
+        readonly body2Regular: {
+            readonly fontSize: 12;
+            readonly lineHeight: 1.5;
+            readonly fontWeight: 300;
+        };
+        readonly caption1Medium: {
+            readonly fontSize: 10;
+            readonly lineHeight: 1.5;
+            readonly fontWeight: 400;
+        };
+        readonly caption1Regular: {
+            readonly fontSize: 10;
+            readonly lineHeight: 1.5;
+            readonly fontWeight: 300;
+        };
+    };
+    readonly radius: {
+        readonly xs: 4;
+        readonly sm: 6;
+        readonly md: 8;
+        readonly pill: 999;
+    };
+    readonly shadow: {
+        readonly drop1: "0 8px 22px rgba(0, 0, 0, 0.18)";
+        readonly drop2: "0 16px 38px rgba(0, 0, 0, 0.26)";
+        readonly drop3: "0 22px 58px rgba(0, 0, 0, 0.36)";
+        readonly inner1: "inset 0 1px 0 rgba(255, 255, 255, 0.035)";
+        readonly inner2: "inset 0 0 0 1px rgba(43, 246, 210, 0.5)";
+    };
+    readonly size: {
+        readonly controlSmall: 24;
+        readonly controlMedium: 32;
+        readonly controlLarge: 40;
+        readonly sidebar: 252;
+    };
+    readonly density: {
+        readonly small: {
+            readonly body1: 13;
+            readonly body2: 11;
+            readonly controlSmall: 22;
+            readonly controlMedium: 28;
+            readonly controlLarge: 36;
+            readonly panelPadding: 12;
+        };
+        readonly medium: {
+            readonly body1: 14;
+            readonly body2: 12;
+            readonly controlSmall: 24;
+            readonly controlMedium: 32;
+            readonly controlLarge: 40;
+            readonly panelPadding: 16;
+        };
+        readonly large: {
+            readonly body1: 15;
+            readonly body2: 13;
+            readonly controlSmall: 28;
+            readonly controlMedium: 38;
+            readonly controlLarge: 48;
+            readonly panelPadding: 20;
+        };
+    };
+};
+export declare const neonVoidCssVariables: {
+    readonly '--qp-bg-1': "#141417";
+    readonly '--qp-bg-2': "#1A1B23";
+    readonly '--qp-bg-3': "#21232D";
+    readonly '--qp-bg-4': "#292C37";
+    readonly '--qp-primary': "#2BF6D2";
+    readonly '--qp-primary-hover': "#11CDB5";
+    readonly '--qp-primary-pressed': "#079987";
+    readonly '--qp-danger': "#EE6067";
+    readonly '--qp-warning': "#F8D06C";
+    readonly '--qp-success': "#48BC77";
+    readonly '--qp-info': "#5E8EEC";
+    readonly '--qp-archetype': "#B974FF";
+    readonly '--qp-axis-x': "#FF4F68";
+    readonly '--qp-axis-y': "#22E184";
+    readonly '--qp-axis-z': "#5E8EEC";
+    readonly '--qp-text-1': "#E2E2E2";
+    readonly '--qp-text-2': "rgba(226, 226, 226, 0.7)";
+    readonly '--qp-text-3': "rgba(226, 226, 226, 0.5)";
+    readonly '--qp-text-4': "rgba(226, 226, 226, 0.3)";
+    readonly '--qp-font-family': "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"PingFang SC\", \"Microsoft YaHei\", sans-serif";
+};
+export declare const neonVoidTheme: {
+    readonly name: "Neon Void";
+    readonly styleName: "neon-void";
+    readonly tokens: {
+        readonly meta: {
+            readonly name: "Neon Void";
+            readonly packageName: "@qpjoy/ui-design-neon-void";
+            readonly description: "Dark tool UI with cyan primary actions, quiet blue-gray panels, compact controls, and precise state feedback.";
+        };
+        readonly color: {
+            readonly background: {
+                readonly bg1: "#141417";
+                readonly bg2: "#1A1B23";
+                readonly bg3Panel: "#21232D";
+                readonly bg4ActionbarDialog: "#292C37";
+            };
+            readonly auxiliary: {
+                readonly a1: "#141417";
+                readonly a2: "rgba(20, 20, 23, 0.7)";
+                readonly a3: "rgba(20, 20, 23, 0.5)";
+                readonly a4: "rgba(20, 20, 23, 0.3)";
+                readonly a5: "rgba(20, 20, 23, 0.1)";
+            };
+            readonly lightTone: {
+                readonly l1: "rgba(163, 182, 233, 0.5)";
+                readonly l2: "rgba(163, 182, 233, 0.3)";
+                readonly l3: "rgba(163, 182, 233, 0.15)";
+                readonly l4: "rgba(163, 182, 233, 0.1)";
+                readonly l5: "rgba(163, 182, 233, 0.05)";
+            };
+            readonly text: {
+                readonly t1: "#E2E2E2";
+                readonly t2: "rgba(226, 226, 226, 0.7)";
+                readonly t3: "rgba(226, 226, 226, 0.5)";
+                readonly t4: "rgba(226, 226, 226, 0.3)";
+                readonly t5: "rgba(226, 226, 226, 0.1)";
+            };
+            readonly accent: {
+                readonly main: "#2BF6D2";
+                readonly mainHover: "#11CDB5";
+                readonly mainPressed: "#079987";
+                readonly archetype: "#B974FF";
+                readonly danger: "#EE6067";
+                readonly warning: "#F8D06C";
+                readonly success: "#48BC77";
+                readonly info: "#5E8EEC";
+            };
+            readonly axis: {
+                readonly x: "#FF4F68";
+                readonly y: "#22E184";
+                readonly z: "#5E8EEC";
+            };
+        };
+        readonly typography: {
+            readonly family: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"PingFang SC\", \"Microsoft YaHei\", sans-serif";
+            readonly head1: {
+                readonly fontSize: 20;
+                readonly lineHeight: 1.5;
+                readonly fontWeight: 400;
+            };
+            readonly head2: {
+                readonly fontSize: 16;
+                readonly lineHeight: 1.5;
+                readonly fontWeight: 400;
+            };
+            readonly body1Semibold: {
+                readonly fontSize: 14;
+                readonly lineHeight: 1.5;
+                readonly fontWeight: 500;
+            };
+            readonly body1Medium: {
+                readonly fontSize: 14;
+                readonly lineHeight: 1.5;
+                readonly fontWeight: 400;
+            };
+            readonly body1Regular: {
+                readonly fontSize: 14;
+                readonly lineHeight: 1.5;
+                readonly fontWeight: 300;
+            };
+            readonly body2Medium: {
+                readonly fontSize: 12;
+                readonly lineHeight: 1.5;
+                readonly fontWeight: 400;
+            };
+            readonly body2Regular: {
+                readonly fontSize: 12;
+                readonly lineHeight: 1.5;
+                readonly fontWeight: 300;
+            };
+            readonly caption1Medium: {
+                readonly fontSize: 10;
+                readonly lineHeight: 1.5;
+                readonly fontWeight: 400;
+            };
+            readonly caption1Regular: {
+                readonly fontSize: 10;
+                readonly lineHeight: 1.5;
+                readonly fontWeight: 300;
+            };
+        };
+        readonly radius: {
+            readonly xs: 4;
+            readonly sm: 6;
+            readonly md: 8;
+            readonly pill: 999;
+        };
+        readonly shadow: {
+            readonly drop1: "0 8px 22px rgba(0, 0, 0, 0.18)";
+            readonly drop2: "0 16px 38px rgba(0, 0, 0, 0.26)";
+            readonly drop3: "0 22px 58px rgba(0, 0, 0, 0.36)";
+            readonly inner1: "inset 0 1px 0 rgba(255, 255, 255, 0.035)";
+            readonly inner2: "inset 0 0 0 1px rgba(43, 246, 210, 0.5)";
+        };
+        readonly size: {
+            readonly controlSmall: 24;
+            readonly controlMedium: 32;
+            readonly controlLarge: 40;
+            readonly sidebar: 252;
+        };
+        readonly density: {
+            readonly small: {
+                readonly body1: 13;
+                readonly body2: 11;
+                readonly controlSmall: 22;
+                readonly controlMedium: 28;
+                readonly controlLarge: 36;
+                readonly panelPadding: 12;
+            };
+            readonly medium: {
+                readonly body1: 14;
+                readonly body2: 12;
+                readonly controlSmall: 24;
+                readonly controlMedium: 32;
+                readonly controlLarge: 40;
+                readonly panelPadding: 16;
+            };
+            readonly large: {
+                readonly body1: 15;
+                readonly body2: 13;
+                readonly controlSmall: 28;
+                readonly controlMedium: 38;
+                readonly controlLarge: 48;
+                readonly panelPadding: 20;
+            };
+        };
+    };
+    readonly cssVariables: {
+        readonly '--qp-bg-1': "#141417";
+        readonly '--qp-bg-2': "#1A1B23";
+        readonly '--qp-bg-3': "#21232D";
+        readonly '--qp-bg-4': "#292C37";
+        readonly '--qp-primary': "#2BF6D2";
+        readonly '--qp-primary-hover': "#11CDB5";
+        readonly '--qp-primary-pressed': "#079987";
+        readonly '--qp-danger': "#EE6067";
+        readonly '--qp-warning': "#F8D06C";
+        readonly '--qp-success': "#48BC77";
+        readonly '--qp-info': "#5E8EEC";
+        readonly '--qp-archetype': "#B974FF";
+        readonly '--qp-axis-x': "#FF4F68";
+        readonly '--qp-axis-y': "#22E184";
+        readonly '--qp-axis-z': "#5E8EEC";
+        readonly '--qp-text-1': "#E2E2E2";
+        readonly '--qp-text-2': "rgba(226, 226, 226, 0.7)";
+        readonly '--qp-text-3': "rgba(226, 226, 226, 0.5)";
+        readonly '--qp-text-4': "rgba(226, 226, 226, 0.3)";
+        readonly '--qp-font-family': "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"PingFang SC\", \"Microsoft YaHei\", sans-serif";
+    };
+};

package/dist/tokens.js

@@ -0,0 +1,136 @@
+export const neonVoidTokens = {
+    meta: {
+        name: 'Neon Void',
+        packageName: '@qpjoy/ui-design-neon-void',
+        description: 'Dark tool UI with cyan primary actions, quiet blue-gray panels, compact controls, and precise state feedback.'
+    },
+    color: {
+        background: {
+            bg1: '#141417',
+            bg2: '#1A1B23',
+            bg3Panel: '#21232D',
+            bg4ActionbarDialog: '#292C37'
+        },
+        auxiliary: {
+            a1: '#141417',
+            a2: 'rgba(20, 20, 23, 0.7)',
+            a3: 'rgba(20, 20, 23, 0.5)',
+            a4: 'rgba(20, 20, 23, 0.3)',
+            a5: 'rgba(20, 20, 23, 0.1)'
+        },
+        lightTone: {
+            l1: 'rgba(163, 182, 233, 0.5)',
+            l2: 'rgba(163, 182, 233, 0.3)',
+            l3: 'rgba(163, 182, 233, 0.15)',
+            l4: 'rgba(163, 182, 233, 0.1)',
+            l5: 'rgba(163, 182, 233, 0.05)'
+        },
+        text: {
+            t1: '#E2E2E2',
+            t2: 'rgba(226, 226, 226, 0.7)',
+            t3: 'rgba(226, 226, 226, 0.5)',
+            t4: 'rgba(226, 226, 226, 0.3)',
+            t5: 'rgba(226, 226, 226, 0.1)'
+        },
+        accent: {
+            main: '#2BF6D2',
+            mainHover: '#11CDB5',
+            mainPressed: '#079987',
+            archetype: '#B974FF',
+            danger: '#EE6067',
+            warning: '#F8D06C',
+            success: '#48BC77',
+            info: '#5E8EEC'
+        },
+        axis: {
+            x: '#FF4F68',
+            y: '#22E184',
+            z: '#5E8EEC'
+        }
+    },
+    typography: {
+        family: 'Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif',
+        head1: { fontSize: 20, lineHeight: 1.5, fontWeight: 400 },
+        head2: { fontSize: 16, lineHeight: 1.5, fontWeight: 400 },
+        body1Semibold: { fontSize: 14, lineHeight: 1.5, fontWeight: 500 },
+        body1Medium: { fontSize: 14, lineHeight: 1.5, fontWeight: 400 },
+        body1Regular: { fontSize: 14, lineHeight: 1.5, fontWeight: 300 },
+        body2Medium: { fontSize: 12, lineHeight: 1.5, fontWeight: 400 },
+        body2Regular: { fontSize: 12, lineHeight: 1.5, fontWeight: 300 },
+        caption1Medium: { fontSize: 10, lineHeight: 1.5, fontWeight: 400 },
+        caption1Regular: { fontSize: 10, lineHeight: 1.5, fontWeight: 300 }
+    },
+    radius: {
+        xs: 4,
+        sm: 6,
+        md: 8,
+        pill: 999
+    },
+    shadow: {
+        drop1: '0 8px 22px rgba(0, 0, 0, 0.18)',
+        drop2: '0 16px 38px rgba(0, 0, 0, 0.26)',
+        drop3: '0 22px 58px rgba(0, 0, 0, 0.36)',
+        inner1: 'inset 0 1px 0 rgba(255, 255, 255, 0.035)',
+        inner2: 'inset 0 0 0 1px rgba(43, 246, 210, 0.5)'
+    },
+    size: {
+        controlSmall: 24,
+        controlMedium: 32,
+        controlLarge: 40,
+        sidebar: 252
+    },
+    density: {
+        small: {
+            body1: 13,
+            body2: 11,
+            controlSmall: 22,
+            controlMedium: 28,
+            controlLarge: 36,
+            panelPadding: 12
+        },
+        medium: {
+            body1: 14,
+            body2: 12,
+            controlSmall: 24,
+            controlMedium: 32,
+            controlLarge: 40,
+            panelPadding: 16
+        },
+        large: {
+            body1: 15,
+            body2: 13,
+            controlSmall: 28,
+            controlMedium: 38,
+            controlLarge: 48,
+            panelPadding: 20
+        }
+    }
+};
+export const neonVoidCssVariables = {
+    '--qp-bg-1': neonVoidTokens.color.background.bg1,
+    '--qp-bg-2': neonVoidTokens.color.background.bg2,
+    '--qp-bg-3': neonVoidTokens.color.background.bg3Panel,
+    '--qp-bg-4': neonVoidTokens.color.background.bg4ActionbarDialog,
+    '--qp-primary': neonVoidTokens.color.accent.main,
+    '--qp-primary-hover': neonVoidTokens.color.accent.mainHover,
+    '--qp-primary-pressed': neonVoidTokens.color.accent.mainPressed,
+    '--qp-danger': neonVoidTokens.color.accent.danger,
+    '--qp-warning': neonVoidTokens.color.accent.warning,
+    '--qp-success': neonVoidTokens.color.accent.success,
+    '--qp-info': neonVoidTokens.color.accent.info,
+    '--qp-archetype': neonVoidTokens.color.accent.archetype,
+    '--qp-axis-x': neonVoidTokens.color.axis.x,
+    '--qp-axis-y': neonVoidTokens.color.axis.y,
+    '--qp-axis-z': neonVoidTokens.color.axis.z,
+    '--qp-text-1': neonVoidTokens.color.text.t1,
+    '--qp-text-2': neonVoidTokens.color.text.t2,
+    '--qp-text-3': neonVoidTokens.color.text.t3,
+    '--qp-text-4': neonVoidTokens.color.text.t4,
+    '--qp-font-family': neonVoidTokens.typography.family
+};
+export const neonVoidTheme = {
+    name: neonVoidTokens.meta.name,
+    styleName: 'neon-void',
+    tokens: neonVoidTokens,
+    cssVariables: neonVoidCssVariables
+};

package/dist/tokens.json

@@ -0,0 +1,108 @@
+{
+  "meta": {
+    "name": "Neon Void",
+    "packageName": "@qpjoy/ui-design-neon-void",
+    "description": "Dark tool UI with cyan primary actions, quiet blue-gray panels, compact controls, and precise state feedback."
+  },
+  "color": {
+    "background": {
+      "bg1": "#141417",
+      "bg2": "#1A1B23",
+      "bg3Panel": "#21232D",
+      "bg4ActionbarDialog": "#292C37"
+    },
+    "auxiliary": {
+      "a1": "#141417",
+      "a2": "rgba(20, 20, 23, 0.7)",
+      "a3": "rgba(20, 20, 23, 0.5)",
+      "a4": "rgba(20, 20, 23, 0.3)",
+      "a5": "rgba(20, 20, 23, 0.1)"
+    },
+    "lightTone": {
+      "l1": "rgba(163, 182, 233, 0.5)",
+      "l2": "rgba(163, 182, 233, 0.3)",
+      "l3": "rgba(163, 182, 233, 0.15)",
+      "l4": "rgba(163, 182, 233, 0.1)",
+      "l5": "rgba(163, 182, 233, 0.05)"
+    },
+    "text": {
+      "t1": "#E2E2E2",
+      "t2": "rgba(226, 226, 226, 0.7)",
+      "t3": "rgba(226, 226, 226, 0.5)",
+      "t4": "rgba(226, 226, 226, 0.3)",
+      "t5": "rgba(226, 226, 226, 0.1)"
+    },
+    "accent": {
+      "main": "#2BF6D2",
+      "mainHover": "#11CDB5",
+      "mainPressed": "#079987",
+      "archetype": "#B974FF",
+      "danger": "#EE6067",
+      "warning": "#F8D06C",
+      "success": "#48BC77",
+      "info": "#5E8EEC"
+    },
+    "axis": {
+      "x": "#FF4F68",
+      "y": "#22E184",
+      "z": "#5E8EEC"
+    }
+  },
+  "typography": {
+    "family": "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"PingFang SC\", \"Microsoft YaHei\", sans-serif",
+    "head1": { "fontSize": 20, "lineHeight": 1.5, "fontWeight": 400 },
+    "head2": { "fontSize": 16, "lineHeight": 1.5, "fontWeight": 400 },
+    "body1Semibold": { "fontSize": 14, "lineHeight": 1.5, "fontWeight": 500 },
+    "body1Medium": { "fontSize": 14, "lineHeight": 1.5, "fontWeight": 400 },
+    "body1Regular": { "fontSize": 14, "lineHeight": 1.5, "fontWeight": 300 },
+    "body2Medium": { "fontSize": 12, "lineHeight": 1.5, "fontWeight": 400 },
+    "body2Regular": { "fontSize": 12, "lineHeight": 1.5, "fontWeight": 300 },
+    "caption1Medium": { "fontSize": 10, "lineHeight": 1.5, "fontWeight": 400 },
+    "caption1Regular": { "fontSize": 10, "lineHeight": 1.5, "fontWeight": 300 }
+  },
+  "radius": {
+    "xs": 4,
+    "sm": 6,
+    "md": 8,
+    "pill": 999
+  },
+  "shadow": {
+    "drop1": "0 8px 22px rgba(0, 0, 0, 0.18)",
+    "drop2": "0 16px 38px rgba(0, 0, 0, 0.26)",
+    "drop3": "0 22px 58px rgba(0, 0, 0, 0.36)",
+    "inner1": "inset 0 1px 0 rgba(255, 255, 255, 0.035)",
+    "inner2": "inset 0 0 0 1px rgba(43, 246, 210, 0.5)"
+  },
+  "size": {
+    "controlSmall": 24,
+    "controlMedium": 32,
+    "controlLarge": 40,
+    "sidebar": 252
+  },
+  "density": {
+    "small": {
+      "body1": 13,
+      "body2": 11,
+      "controlSmall": 22,
+      "controlMedium": 28,
+      "controlLarge": 36,
+      "panelPadding": 12
+    },
+    "medium": {
+      "body1": 14,
+      "body2": 12,
+      "controlSmall": 24,
+      "controlMedium": 32,
+      "controlLarge": 40,
+      "panelPadding": 16
+    },
+    "large": {
+      "body1": 15,
+      "body2": 13,
+      "controlSmall": 28,
+      "controlMedium": 38,
+      "controlLarge": 48,
+      "panelPadding": 20
+    }
+  }
+}