Last updated: Aug 12, 2025, 01:09 PM UTC

Sasha Studio Design System

Complete visual and interaction design reference for the Sasha Studio AI Knowledge Management Platform

Overview

This design system defines the visual language, components, and interaction patterns used across all Sasha Studio interfaces. It ensures consistency, scalability, and maintainability while providing a cohesive user experience.

Foundation Layer

Color System

Primary Colors

  • Primary Blue: #2563eb #2563eb
  • Primary Dark: #1d4ed8 #1d4ed8
  • Primary Light: #dbeafe #dbeafe
  • Secondary Purple: #7c3aed #7c3aed
  • Secondary Light: #ede9fe #ede9fe

Semantic Colors

  • Success: #10b981 #10b981
  • Warning: #f59e0b #f59e0b
  • Error: #ef4444 #ef4444

Neutral Palette

  • Background: #ffffff #ffffff
  • Surface: #f9fafb #f9fafb
  • Surface Hover: #f3f4f6 #f3f4f6
  • Text Primary: #111827 #111827
  • Text Secondary: #6b7280 #6b7280
  • Text Muted: #9ca3af #9ca3af
  • Border: #e5e7eb #e5e7eb

CSS Custom Properties

:root {
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --primary-light: #dbeafe;
    --secondary: #7c3aed;
    --secondary-light: #ede9fe;
    --success: #10b981;
    --warning: #f59e0b;
    --error: #ef4444;
    --background: #ffffff;
    --surface: #f9fafb;
    --surface-hover: #f3f4f6;
    --text: #111827;
    --text-secondary: #6b7280;
    --text-muted: #9ca3af;
    --border: #e5e7eb;
}

Typography System

Font Stacks

  • Primary (Sans-serif): -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif
  • Monospace: 'SF Mono', Monaco, 'Cascadia Mono', 'Roboto Mono', Consolas, 'Courier New', monospace

Font Scale

  • 0.625rem (10px) - Small badges, labels
  • 0.75rem (12px) - Caption text, timestamps
  • 0.875rem (14px) - Body text, descriptions
  • 1rem (16px) - Base body text
  • 1.125rem (18px) - Large body text
  • 1.25rem (20px) - H5, large text

Font Weights

  • 400 - Normal body text
  • 500 - Medium emphasis
  • 600 - Semi-bold headings
  • 700 - Bold headings

Shadows & Elevation

:root {
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

Border Radius

  • Standard: 0.5rem (8px)
  • Large: 0.75rem (12px)

Z-Index Hierarchy

:root {
    --z-base: 1;           /* Base content */
    --z-dropdown: 100;     /* Dropdowns and tooltips */
    --z-sidebar: 200;      /* Sidebar (mobile) */
    --z-panel: 300;        /* Slide panels */
    --z-overlay: 400;      /* Overlay backdrop */
    --z-modal: 500;        /* Modal dialogs */
    --z-toast: 600;        /* Notifications */
}

Component Library

Unified Panel System

Base Panel Structure

.panel-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: var(--z-panel);
}

.panel-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.panel-content {
    position: absolute;
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius);
    transition: var(--transition);
}

Panel Variants

  • Slide-out panels: Right/left sliding drawers
  • Modal panels: Center-positioned overlays
  • Dropdown panels: Contextual menus and selectors

Button System

Primary Button

.btn-primary {
    background: var(--primary);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius);
    font-weight: 500;
    transition: var(--transition);
    cursor: pointer;
}

.btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
}

Secondary Button

.btn-secondary {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius);
    font-weight: 500;
    transition: var(--transition);
    cursor: pointer;
}

.btn-secondary:hover {
    background: var(--surface-hover);
    border-color: var(--primary);
}

Card Components

Standard Card

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.card:hover {
    box-shadow: var(--shadow);
    transform: translateY(-1px);
}

Dashboard Card

.dashboard-card {
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: var(--shadow);
    min-height: 200px;
}

Form Components

Input Fields

.form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--background);
    color: var(--text);
    font-size: 0.875rem;
    transition: var(--transition);
}

.form-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

Select Dropdowns

.form-select {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--background);
    color: var(--text);
    cursor: pointer;
}

Navigation Components

Header

.header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 1rem 2rem;
    position: sticky;
    top: 0;
    z-index: var(--z-dropdown);
}

.header-content {
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

Sidebar

.sidebar {
    width: 280px;
    background: var(--surface);
    border-right: 1px solid var(--border);
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    padding: 1rem;
    z-index: var(--z-sidebar);
}

Animation & Interactions

Transition System

:root {
    --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

Hover States

  • Buttons: Background color change + subtle upward transform
  • Cards: Shadow elevation + upward transform
  • Links: Color change to primary
  • Interactive elements: Background color lightening

Panel Animations

/* Slide-in from right */
.panel-slide-right {
    right: -400px;
    transition: right 0.3s ease;
}

.panel-slide-right.active {
    right: 0;
}

/* Fade-in modal */
.panel-modal {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.panel-modal.active {
    opacity: 1;
    transform: scale(1);
}

Microinteractions

  • Loading states: Subtle pulse animations
  • Typing indicators: Animated dots
  • Button feedback: Scale transform on click
  • Form validation: Color transitions for error states

Responsive Patterns

Breakpoint System

/* Mobile-first approach */
@media (min-width: 768px) { /* Tablet */ }
@media (min-width: 1024px) { /* Desktop */ }
@media (min-width: 1280px) { /* Large desktop */ }
@media (min-width: 1600px) { /* Extra large */ }

Layout Adaptations

Mobile (< 768px)

  • Sidebar converts to overlay
  • Cards stack vertically
  • Reduced padding and margins
  • Touch-friendly button sizes (min 44px)

Tablet (768px - 1024px)

  • Two-column card layouts
  • Collapsible sidebar
  • Optimized form layouts

Desktop (> 1024px)

  • Multi-column layouts
  • Hover states enabled
  • Full sidebar visibility
  • Maximum container width: 1600px

Mobile-Specific Components

.mobile-overlay {
    display: none;
}

@media (max-width: 767px) {
    .mobile-overlay {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: var(--z-overlay);
    }
}

Usage Guidelines

Color Usage

  • Primary blue for main actions and links
  • Secondary purple for secondary actions and accents
  • Semantic colors only for their intended meaning
  • Neutral palette for backgrounds, text, and structure

Typography Hierarchy

  1. Headings: Weight 600-700, progressive size scaling
  2. Body text: Weight 400, 0.875rem - 1rem
  3. Labels: Weight 500, 0.75rem - 0.875rem
  4. Captions: Weight 400, 0.625rem - 0.75rem

Component Selection

  • Cards for content grouping and information display
  • Panels for contextual actions and detailed views
  • Buttons with clear hierarchy (primary > secondary > tertiary)
  • Forms with consistent styling and clear validation states

Animation Principles

  • Subtle and purposeful - enhance UX without distraction
  • Fast timing - 0.2s for most interactions
  • Consistent easing - cubic-bezier(0.4, 0, 0.2, 1)
  • Meaningful motion - indicate relationships and state changes

Implementation Notes

CSS Custom Properties Usage

All design tokens are defined as CSS custom properties for easy theming and consistency. Use var(--token-name) throughout the codebase.

Component Modularity

Each component should be self-contained with its own CSS class and minimal dependencies on parent containers.

Accessibility Considerations

  • Minimum contrast ratios met for all text colors
  • Focus states clearly visible with blue outline
  • Interactive elements meet 44px minimum touch target
  • Semantic HTML structure maintained

Performance

  • Transitions use transform and opacity when possible
  • Box-shadow changes avoided during animations
  • Efficient selectors and minimal repaints
  • CSS custom properties for runtime theme switching

This design system serves as the single source of truth for all visual design decisions in Sasha Studio, ensuring consistency, accessibility, and maintainability across all interfaces.