🎨 UI/UX Design
Dark Theme, Hip-Hop Aesthetic, Professional Workflow
FlowState's UI combines professional DAW conventions with a modern, hip-hop aesthetic. Dark theme reduces eye strain during long sessions, while vibrant accents guide attention.
Core Principles: Familiar to DAW users, optimized for beatmaking, AI features integrated naturally (not intrusive).
| Role | Color | Hex | Usage |
|---|---|---|---|
| Background Primary | ■ | #0F172A | Main background |
| Background Secondary | ■ | #1E293B | Panels, cards |
| Background Tertiary | ■ | #334155 | Inputs, hover states |
| Accent Primary | ■ | #06B6D4 | Buttons, links, focus |
| Accent Hot | ■ | #F43F5E | Recording, alerts |
| Success | ■ | #10B981 | Positive actions |
| Warning | ■ | #F59E0B | Caution states |
| Text Primary | ■ | #F1F5F9 | Main text |
| Text Secondary | ■ | #94A3B8 | Labels, muted text |
Track Colors
Each track gets a distinct color for visual differentiation.
const TRACK_COLORS = [
'#06B6D4', // Cyan
'#8B5CF6', // Purple
'#F43F5E', // Rose
'#10B981', // Emerald
'#F59E0B', // Amber
'#EC4899', // Pink
'#3B82F6', // Blue
'#EF4444', // Red
];| Element | Font | Size | Weight |
|---|---|---|---|
| Headers | Inter | 24-32px | 700 |
| Body | Inter | 14-16px | 400 |
| Labels | Inter | 11-12px | 500 |
| Code/Values | JetBrains Mono | 12-14px | 400 |
| Time Display | JetBrains Mono | 18-24px | 500 |
┌────────────────────────────────────────────────────────────────────┐
│ [≡] FlowState 🔊 -12dB [▶] [■] [●] BPM: 90 │
├────────────────────────────────────────────────────────────────────┤
│ │ │
│ [1] │ ┌─────────────────────────────────────────────────────┐ │
│ Drums │ │ █████░░░░░░░░░██████░░░░░░░░░░███████░░░░░░░░░░░░ │ │
│ ──────│ └─────────────────────────────────────────────────────┘ │
│ [2] │ ┌─────────────────────────────────────────────────────┐ │
│ Bass │ │ ░░░░░░████████░░░░░░░░░████████░░░░░░░░░████████░░ │ │
│ ──────│ └─────────────────────────────────────────────────────┘ │
│ [3] │ ┌─────────────────────────────────────────────────────┐ │
│ Melody│ │ ██████████████████████░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │ │
│ ──────│ └─────────────────────────────────────────────────────┘ │
│ + │ ▼ (playhead) │
├────────────────────────────────────────────────────────────────────┤
│ [🎹 Drum Pads] [📁 Samples] [🎚️ Mixer] [💬 AI Chat] │
└────────────────────────────────────────────────────────────────────┘
Panel Layout
| Panel | Position | Resizable | Collapsible |
|---|---|---|---|
| Transport Bar | Top | No | No |
| Track List | Left | Yes (width) | No |
| Timeline | Center | Fills remaining | No |
| Bottom Panel | Bottom | Yes (height) | Yes |
| AI Chat | Right (overlay) | No | Yes (toggle) |
1. Transport Controls
┌────────────────────────────────────────────────────────────────┐
│ [⏮] [▶️ PLAY] [⏹ STOP] [⏺ REC] │ 00:32:14 │ 🔁 Loop │
│ │ 1.2.1 │ 4 bars │
│ ══════════════○══════════════════ │ 90 BPM │ 4/4 │
│ (timeline scrubber) │ F minor │ │
└────────────────────────────────────────────────────────────────┘
2. Track Header
┌──────────────────────────────────────┐
│ [🔇] [S] │ 1. Drums │ ████░░░░ │
│ mute solo │ name │ meter │
└──────────────────────────────────────┘
3. Drum Pads (MPC-Style)
┌─────┬─────┬─────┬─────┐
│ PAD │ PAD │ PAD │ PAD │ Bank A
│ 1 │ 2 │ 3 │ 4 │
├─────┼─────┼─────┼─────┤
│ PAD │ PAD │ PAD │ PAD │
│ 5 │ 6 │ 7 │ 8 │
├─────┼─────┼─────┼─────┤
│ PAD │ PAD │ PAD │ PAD │
│ 9 │ 10 │ 11 │ 12 │
├─────┼─────┼─────┼─────┤
│ PAD │ PAD │ PAD │ PAD │
│ 13 │ 14 │ 15 │ 16 │
└─────┴─────┴─────┴─────┘
4. Step Sequencer
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
┌───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┐
🥁 │ ● │ │ │ │ ● │ │ │ │ ● │ │ │ │ ● │ │ │ │ Kick
├───┼───┼───┼───┼───┼───┼───┼───┼───┼───┼───┼───┼───┼───┼───┼───┤
🪘 │ │ │ │ │ ● │ │ │ │ │ │ │ │ ● │ │ │ │ Snare
├───┼───┼───┼───┼───┼───┼───┼───┼───┼───┼───┼───┼───┼───┼───┼───┤
🎩 │ ● │ │ ● │ │ ● │ │ ● │ │ ● │ │ ● │ │ ● │ │ ● │ │ Hat
└───┴───┴───┴───┴───┴───┴───┴───┴───┴───┴───┴───┴───┴───┴───┴───┘
5. Mixer Channel
┌───────────────┐
│ [FX+] │ Effects slot
├───────────────┤
│ │
│ ║ │
│ ║ │ Fader
│ ║ │
│ ● │
│ │
├───────────────┤
│ ◀─────●────▶ │ Pan
├───────────────┤
│ [M] [S] │ Mute/Solo
├───────────────┤
│ DRUMS │ Track name
│ -6dB │ Level
└───────────────┘
┌─────────────────────────────────────┐
│ 🤖 FlowState AI [✕] │
├─────────────────────────────────────┤
│ │
│ 🧑 "Make the snare punchier" │
│ │
│ 🤖 I've added a transient │
│ shaper to Track 2 with: │
│ • Attack: +4dB │
│ • Release: 50ms │
│ [Undo] [Adjust] │
│ │
│ 🧑 "Find me a dark 808" │
│ │
│ 🤖 Here are 5 matching samples: │
│ [▶] 808-dark-sub.wav │
│ [▶] 808-distorted.wav │
│ [▶] 808-deep-hit.wav │
│ [Add to track] [More] │
│ │
├─────────────────────────────────────┤
│ [🎤] Type or speak... [➤] │
└─────────────────────────────────────┘
Chat Features
- Voice Input: Click mic to speak commands
- Action Cards: AI responses include actionable buttons
- Undo: Every AI action can be undone
- Context: AI sees current project state
| Action | Shortcut |
|---|---|
| Play/Pause | Space |
| Stop | Enter |
| Record | R |
| Undo | Cmd/Ctrl + Z |
| Redo | Cmd/Ctrl + Shift + Z |
| Save | Cmd/Ctrl + S |
| New Track | Cmd/Ctrl + T |
| Delete Selection | Backspace / Delete |
| Duplicate | Cmd/Ctrl + D |
| Toggle AI Chat | Cmd/Ctrl + / |
| Voice Command | Hold V |
| Sample Browser | B |
| Mixer View | M |
| Breakpoint | Width | Layout |
|---|---|---|
| Desktop | 1280px+ | Full layout, all panels |
| Laptop | 1024-1279px | Collapsible side panels |
| Tablet | 768-1023px | Tabbed bottom panel |
| Mobile | <768px | Limited (playback only) |
Mobile Note: Full DAW editing requires desktop/tablet. Mobile supports playback and basic controls only.
FlowState uses a custom component library built with React + Tailwind CSS.
Core Components
| Component | Variants |
|---|---|
| Button | primary, secondary, ghost, danger |
| Slider | horizontal, vertical, range |
| Knob | small, medium, large |
| Toggle | switch, checkbox, radio |
| Dropdown | select, menu, context |
| Modal | dialog, drawer, popover |
| Toast | info, success, warning, error |
| Waveform | static, animated, mini |
| Meter | peak, RMS, spectrum |
Example: Knob Component
// components/Knob.tsx
interface KnobProps {
value: number;
min?: number;
max?: number;
onChange: (value: number) => void;
size?: 'sm' | 'md' | 'lg';
label?: string;
}
function Knob({ value, min = 0, max = 100, onChange, size = 'md', label }: KnobProps) {
const rotation = ((value - min) / (max - min)) * 270 - 135;
return (
<div className="knob-container">
<div
className={`knob knob-${size}`}
style={{ transform: `rotate(${rotation}deg)` }}
onMouseDown={handleDrag}
>
<div className="knob-indicator" />
</div>
{label && <span className="knob-label">{label}</span>}
<span className="knob-value">{value}</span>
</div>
);
}| Feature | Implementation | Priority |
|---|---|---|
| Keyboard navigation | All controls accessible via Tab | MVP |
| Screen reader | ARIA labels on all controls | MVP |
| Color contrast | WCAG AA minimum | MVP |
| Focus indicators | Visible focus rings | MVP |
| Reduced motion | Respect prefers-reduced-motion | v1.1 |
| High contrast | Alternative theme | v1.2 |