Rizzo CSS
A modern CSS design system built on Astro with semantic theming, accessibility-first components, and PostCSS optimization. Start here then make it your own.
Install
npm package
Add the package to your project
CLI
Scaffold a new app (Astro, Svelte, or Vanilla)
Features
đ¨ 14 Beautiful Themes
7 dark and 7 light themes with OKLCH color format for better color manipulation and perceptual uniformity.
âŋ Accessibility First
WCAG AA compliant with keyboard navigation, ARIA attributes, and screen reader support built-in.
đ¯ Semantic Variables
Use semantic CSS variables that automatically adapt to themes. No hardcoded colors.
đĻ Ready Components
Navbar, Settings, Theme Switcher, Buttons, Accordion, Breadcrumb, Pagination, Progress Bar, Spinner, Avatar, Divider, Table, Cards, Modal, Alert, Toast, Dropdown, Tabs, and more â all accessible and themeable.
đ§ PostCSS Powered
SCSS/SASS-like imports, autoprefixing, and production minification with cssnano.
đ Typography System
Comprehensive typography with scalable font sizes, weights, line heights, and utilities.
đ Spacing Utilities
Complete margin and padding utility classes with consistent spacing scale (0-24).
đą Responsive Design
Mobile-first approach with media queries for breakpoints from 640px to 1536px.
Quick Examples
Buttons
Theme Switcher
Try switching themes using the theme switcher below or the settings button in the navbar (gear icon).
Documentation
Getting Started
Installation, project structure, and quick start guide
Components
Component library with usage examples and live demos
Theming
Theme system, custom themes, and color format guide
Design System
Semantic variables, typography, and design principles
Accessibility
Accessibility guidelines, utilities, and best practices
Colors
Interactive color reference with multiple format options