Helix UI

Cyber-Minimal Design System
React • TypeScript • Design Tokens • 2026 Aesthetics

---

✨ Features

• 🎨 2026 Cyber-Minimal Aesthetic — Void black backgrounds with neon cyan accents
• ⚡ Design Token Architecture — Single source of truth via Style Dictionary
• 🔥 5 Button Variants — Primary, Secondary, Ghost, Neon (glow), Brutalist
• ♿ WCAG 2.1 Accessible — Focus-visible, keyboard navigation, ARIA labels
• 📱 Responsive — 4 sizes (sm, md, lg, xl) + full-width support
• ⏳ Loading States — Built-in spinners and disabled states
• 🔷 TypeScript — Full type safety with exported interfaces
• 📚 Storybook Docs — Interactive playground with auto-generated docs

---

🚀 Live Demo

View Interactive Storybook →

Explore all components, variants, and design tokens in the interactive playground.

---

📦 Installation

# Clone the repository
git clone https://github.com/theakashkmr/helix-ui.git
cd helix-ui

# Install dependencies
npm install

# Start development server
npm run dev

# Start Storybook (component documentation)
npm run storybook

🎨 Design Philosophy

Cyber-Minimalism combines:

• Void aesthetics — Deep blacks, not pure black (#000)
• Neon accents — Electric cyan with glow effects
• Glassmorphism — Translucent layers with blur
• Neo-brutalism — Hard shadows, bold borders (trending 2026)

Why this works:

• Reduces eye strain (void > pure black)
• High contrast for accessibility
• Futuristic feel perfect for fintech/SaaS
• Memorable brand identity

---

📄 License

MIT © Akash Kumar

Built with ⚡ by Akash Kumar
_{Design Systems Engineer | London, UK}