Size System
All components use a consistent sizing system based on a base unit. Each size variant scales proportionally, ensuring components work harmoniously together in layouts.
Square Components (1:1)
Button, Knob, and CycleButton share the same square aspect ratio, making them perfect for side-by-side layouts.
Button
Knob
CycleButton
Slider Components
Sliders maintain consistent track widths across sizes, with height/width ratios of 2:1 (vertical) and 1:2 (horizontal).
Vertical Slider (2:1 width:height)
Horizontal Slider (1:2 width:height)
Keys (1:5)
The keys component maintains a consistent aspect ratio of 1:5 (width:height), ensuring proper keyboard proportions across all sizes.
Design System Consistency
All components use the same base unit and size multipliers. This means a "small" knob will align perfectly with a "small" slider when placed side-by-side, creating harmonious layouts without manual adjustments.
Sizes are defined via CSS variables, making it easy to customize the entire system by adjusting the --audioui-unit variable.