| name | ui-design-system |
| description | Design tokens, visual patterns, and component styling for Guitar Tone Shootout. Use for UI decisions, colors, typography, and component design. |
UI Design System
Activation: design, colors, theme, styling, tokens, UI, visual, dark mode, component style
Full Reference: Wiki: Design/Style-Guide
Quick Reference
Design Direction
- Aesthetic: Professional audio tool (Quad Cortex / DAW inspired)
- Theme: Dark primary
- Target: Musicians, audio engineers, content creators
Key Colors
| Token | Value | Use |
|---|---|---|
--bg-base |
#0a0a0a |
Page background |
--bg-surface |
#141414 |
Cards |
--accent-primary |
#3b82f6 |
CTAs, links |
--block-di |
#3b82f6 |
DI tracks (blue) |
--block-amp |
#f59e0b |
Amps (amber) |
--block-cab |
#22c55e |
Cabinets (green) |
--block-effect |
#a855f7 |
Effects (purple) |
Typography
| Use | Class |
|---|---|
| Body | text-base font-normal (16px, 400) |
| Heading | text-2xl font-semibold (24px, 600) |
| Caption | text-xs font-medium (12px, 500) |
| Mono | font-mono (JetBrains Mono) |
Common Patterns
Card:
<div className="bg-[#141414] border border-[#333333] rounded-lg p-4
hover:bg-[#1f1f1f] transition-colors">
Button:
<button className="px-4 py-2 bg-blue-600 text-white rounded-md font-medium
hover:bg-blue-700 disabled:opacity-50">
Block Card:
const blockStyles = {
di: { border: 'border-blue-500/50', bg: 'bg-blue-500/10' },
amp: { border: 'border-amber-500/50', bg: 'bg-amber-500/10' },
cab: { border: 'border-green-500/50', bg: 'bg-green-500/10' },
effect: { border: 'border-purple-500/50', bg: 'bg-purple-500/10' },
};
Full Documentation
For complete design token reference, see the wiki:
- Style Guide - All tokens, accessibility, do's and don'ts
- Tools & Workflow - Showcase, MCP usage
- Inspiration - Reference applications