Alto AI Design System
Unified CSS styling for all Alto AI integration pages. All pages now use the centralized styles.css file.
Design System Overview
A modern, minimal design system built with CSS custom properties and utility classes.
Features
What's included in the design system
- ✓ CSS Variables for theming (colors, spacing, fonts)
- ✓ Button component variants (primary, secondary, outline)
- ✓ Form inputs (text, textarea, select, checkbox, radio, switch)
- ✓ Card containers with flexible layouts
- ✓ Badge and alert components
- ✓ Toast notifications
- ✓ Smooth animations and transitions
Color Palette
CSS custom properties for consistent color management
CSS Variables
Primary
--primary: #fafafa
Secondary
--secondary: #27272a
Success
--success: #22c55e
Warning
--warning: #eab308
Info
--info: #3b82f6
Destructive
--destructive: #7f1d1d
Available Components
Reusable UI components powered by styles.css
Buttons
Badges
Default
Success
Standard
Form Input
Integration Pages
All pages now use the centralized styles.css
CSS File Location
All styling is now centralized in one file
File: styles.css
All HTML pages link to this single CSS file using: <link rel="stylesheet" href="styles.css">
This approach provides:
- ✓ Single source of truth for styling
- ✓ Easier maintenance and updates
- ✓ Consistent design across all pages
- ✓ Better browser caching of CSS
- ✓ Reduced file size for each HTML page