@gencreator/design

Design System Tokens, Glassmorphic Aurora Theme Engine, and WCAG Contrast Validator

@gencreator/design provides the visual design kernel for the GenCreator ecosystem, FrankX interfaces, and AI creator applications. Built on the Starlight Intelligence Protocol (SIP).

Features

• 🌌 Void & Starlight Color Tokens: Precision calibrated palette (Void Black, Deep Navy, Starlight Gold, Aurora Cyan, Amethyst Purple).
• 🧊 Glassmorphic Aurora Surfaces: Pre-configured backdrop-filter blurs, specular border reflections, and multi-layered shadows.
• 📐 WCAG 2.1 Contrast Validator: Programmatic checking of foreground and background colors ensuring AA and AAA compliance across dark themes.
• ⚡ Zero-Config CSS Exporter: Generates CSS Custom Properties and Tailwind theme configurations directly from code.
• 🧩 Component Blueprints: Specs and accessibility notes for AuroraHero, GlassDeck, SoundSpectrumBar, and MetricBadge.

Usage

import { COLORS, ContrastChecker, CssGenerator } from '@gencreator/design';

// 1. Contrast validation
const check = ContrastChecker.check(COLORS.starlight.gold, COLORS.void.black);
console.log(`Contrast ratio: ${check.ratio}:1, AAA Passed: ${check.wcagAAA}`);

// 2. Generate CSS Variables
const cssVars = CssGenerator.toCssVariables();
console.log(cssVars);

License

MIT © Frank Riemer