Flowspace should feel fresh, calm, and optimistic: a focused, cool-white work surface energized by crisp violet, coral, aqua, and mint accents. The interface stays cozy through soft shapes and gentle depth rather than beige or muted color.
- Canvas:
#F7F8FC— cool off-white page background with a faint blue-violet glow - Surface:
#FFFFFF— cards, popovers, and top navigation - Sidebar:
#FBFBFE— cool white with a very light lavender gradient - Ink:
#272637— primary text - Muted ink:
#706E80— descriptions and metadata - Border:
#E5E6EF— cool, low-contrast dividers - Primary violet:
#7057E8— primary actions and selection - Soft violet:
#ECE8FF— active navigation and gentle highlights - Accent blue:
#3979CA - Accent green:
#359568 - Accent amber:
#C37719 - Accent coral:
#CE6542 - Accent rose:
#D44F82 - Accent aqua:
#168C9B
Use accents for meaning, wayfinding, icons, and compact highlights. Large surfaces should stay neutral.
- UI: Inter, Segoe UI, or the system sans-serif stack
- Display moments: Georgia or a restrained editorial serif
- Page titles: 25–34px, semibold, tight tracking
- Section titles: 11–14px, bold
- Navigation: 11px, medium; group labels are 8.5px uppercase with wide tracking
- Supporting copy: 8–12px, regular
The compact type scale is intentional. Generous surrounding whitespace keeps it readable rather than dense.
- Expanded width: 220px
- Collapsed width: 68px
- Navigation row: 31px high
- Navigation icon container: 20px square
- Groups: separated by a fine divider and 9px vertical rhythm
- Base spacing unit: 4px
- Common gaps: 8px, 12px, 16px, 24px, 32px
- Controls: 8–10px radius
- Cards: 12–14px radius
- Avoid fully pill-shaped controls except avatars, status, and tiny badges
- Use fine cool-gray borders before shadows
- Shadows should be broad and faint, never dark or sharp
- Use one expressive hero surface per dashboard, with layered cool-white gradients, restrained ambient color, and a single meaningful progress visualization.
- Pair compact utility cards with one contextual AI suggestion so the interface feels proactive without becoming busy.
- Keep data-heavy card surfaces white and legible; reserve glass effects and stronger gradients for the hero, navigation, and short promotional moments.
- Dashboard content typography may be slightly larger than navigation typography to create a clear reading hierarchy.
- Motion: 150–250ms with gentle ease; honor reduced-motion settings
- Hover: slight lift or neutral surface shift, not strong recoloring
- Focus: visible violet outline with sufficient contrast
- Collapsed navigation preserves icon color and uses native tooltips
- Responsive navigation becomes an overlay below 700px
Copy is concise, encouraging, and action-oriented. Prefer “Start something fresh” over technical empty states. Use color to make the workspace feel alive while keeping the core surface quiet enough for sustained focus.