Random Design System
A simple, modern design system built with Tailwind CSS and Radix UI primitives. Designed to be minimal, accessible, and easy to extend.
This design system represents foundational patterns and components I've refined across many applications over the years — from enterprise platforms and government systems to personal projects. As interfaces have evolved from dense data screens to modern, responsive experiences, so has this toolkit. It captures what I've found works well: sensible defaults, consistent spacing and color, accessible primitives, and composable pieces that scale from a simple form to a full product without fighting the framework. It's a base I often use to start with for ideations and rapid prototyping.
Principles
- Simple by default. Start with Tailwind's strengths and only customize when there's a clear reason.
- Accessible. Built on Radix UI primitives with keyboard navigation and ARIA support out of the box.
- Token-driven. CSS custom properties for colors, spacing, and radii that adapt to light and dark modes automatically.
- Composable. Small, focused components that combine to build any interface.
Architecture
Components are built with class-variance-authority (CVA) for variant management, Radix UI for accessible primitives, and tailwind-merge for conflict-free class composition. Theming is handled through CSS custom properties defined in HSL format, enabling seamless light/dark mode switching via next-themes.
Token Strategy
Design tokens are defined as CSS custom properties using HSL values without the hsl() wrapper, allowing Tailwind to apply opacity modifiers natively.
--primary: 0 0% 9%;
--primary-foreground: 0 0% 98%;
/* tailwind.config.ts */
primary: "hsl(var(--primary))"
/* usage */
className="bg-primary text-primary-foreground"
What's Included
Foundations
Colors, typography, and sizing tokens that define the visual language.
45+ Components
From buttons and inputs to dialogs and data tables, all built on Radix UI.
Dark Mode
Every token and component supports light and dark themes via CSS custom properties.