Skip to main content

Design System

The Quantum Platform Design System provides a comprehensive set of design principles, components, and guidelines for creating consistent, accessible, and beautiful user experiences.

Design Philosophy​

Core Principles​

  1. Intent-Driven Design: Every interface element should clearly communicate its purpose and expected outcome
  2. Progressive Disclosure: Show information at the right level of detail for the user's current context
  3. Consistent Patterns: Use consistent patterns across all interfaces to reduce cognitive load
  4. Accessibility First: Design for all users, including those with disabilities
  5. Performance Conscious: Optimize for speed and responsiveness

Visual Identity​

The Quantum Platform visual identity is inspired by modern, clean design principles with a focus on clarity and functionality.

Color Palette​

Primary Colors​

Primary Blue

#0066CCPrimary
#004499Primary Dark
#3388DDPrimary Light

Secondary Colors

#00CC66Success
#FF6600Warning
#CC0000Error

Neutral Colors

#1A1A1AText Primary
#666666Text Secondary
#F5F5F5Background

Usage Guidelines​

  • Primary Blue: Use for primary actions, links, and key interface elements
  • Success Green: Use for success states, confirmations, and positive feedback
  • Warning Orange: Use for warnings and attention-grabbing elements
  • Error Red: Use for errors, destructive actions, and critical alerts
  • Neutral Grays: Use for text, borders, and subtle interface elements

Typography​

Font Families​

/* Primary Font - Inter (Clean, modern sans-serif) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* Monospace Font - JetBrains Mono (Code and technical content) */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');

Type Scale​

Heading 1 - 2.5rem

Use for page titles and major headings

Heading 2 - 1.875rem

Use for section headings

Heading 3 - 1.5rem

Use for subsection headings

Heading 4 - 1.25rem

Use for card titles and small headings

Body Text - 1rem

Use for regular content and paragraphs

Small Text - 0.875rem

Use for captions, labels, and secondary information

Code Text - 0.875rem

Use for code snippets and technical content

Typography Guidelines​

  • Hierarchy: Use consistent heading levels to create clear information hierarchy
  • Readability: Ensure sufficient contrast between text and background
  • Line Height: Use 1.5x line height for body text, 1.2x for headings
  • Line Length: Keep line length between 45-75 characters for optimal readability

Spacing System​

Spacing Scale​

/* Spacing scale based on 8px grid */
:root {
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.25rem;  /* 20px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  --space-10: 2.5rem;  /* 40px */
  --space-12: 3rem;    /* 48px */
  --space-16: 4rem;    /* 64px */
  --space-20: 5rem;    /* 80px */
  --space-24: 6rem;    /* 96px */
}

Usage Guidelines​

  • Consistent Spacing: Use the spacing scale for all margins and padding
  • 8px Grid: Base all spacing on multiples of 8px for visual consistency
  • Responsive Spacing: Adjust spacing for different screen sizes
  • Component Spacing: Use consistent spacing within and between components

Component Library​

Buttons​

Button Specifications:

  • Height: 32px (small), 40px (medium), 48px (large)
  • Padding: 12px horizontal, 8px vertical
  • Border Radius: 6px
  • Font Weight: 500
  • States: Default, Hover, Active, Disabled, Loading

Form Elements​

Form Specifications:

  • Input Height: 40px
  • Border: 1px solid #E5E5E5
  • Border Radius: 6px
  • Focus State: Blue border with subtle shadow
  • Error State: Red border with error message

Cards​

Card Title

Card subtitle or description

Card content goes here. This is where you would place the main content of the card.

Card Specifications:

  • Border: 1px solid #E5E5E5
  • Border Radius: 8px
  • Shadow: Subtle shadow for depth
  • Padding: 16px
  • Background: White

Navigation Specifications:

  • Height: 64px
  • Background: White with subtle border
  • Links: 16px font size, 500 weight
  • Active State: Blue color with subtle background
  • Hover State: Subtle background color change

Layout System​

Grid System​

/* 12-column grid system */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}

.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-6 { grid-column: span 6; }
.col-8 { grid-column: span 8; }
.col-12 { grid-column: span 12; }

/* Responsive breakpoints */
@media (max-width: 768px) {
  .col-md-12 { grid-column: span 12; }
}

Container System​

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.container-sm { max-width: 640px; }
.container-md { max-width: 768px; }
.container-lg { max-width: 1024px; }
.container-xl { max-width: 1200px; }

Accessibility Guidelines​

WCAG 2.1 AA Compliance​

  1. Color Contrast: Minimum 4.5:1 contrast ratio for normal text
  2. Keyboard Navigation: All interactive elements accessible via keyboard
  3. Screen Reader Support: Proper ARIA labels and semantic HTML
  4. Focus Indicators: Clear focus indicators for all interactive elements
  5. Alternative Text: Descriptive alt text for all images

Accessibility Checklist​

  • All interactive elements have focus indicators
  • Color is not the only way to convey information
  • Text has sufficient contrast ratio
  • Forms have proper labels and error messages
  • Images have descriptive alt text
  • Content is structured with proper heading hierarchy
  • Interactive elements are keyboard accessible

Responsive Design​

Breakpoints​

/* Mobile First Approach */
@media (min-width: 640px) { /* sm */ }
@media (min-width: 768px) { /* md */ }
@media (min-width: 1024px) { /* lg */ }
@media (min-width: 1280px) { /* xl */ }
@media (min-width: 1536px) { /* 2xl */ }

Responsive Guidelines​

  1. Mobile First: Design for mobile devices first, then enhance for larger screens
  2. Touch Targets: Minimum 44px touch targets for mobile devices
  3. Readable Text: Ensure text is readable without horizontal scrolling
  4. Flexible Layouts: Use flexible layouts that adapt to different screen sizes
  5. Performance: Optimize images and assets for different screen densities

Animation and Motion​

Animation Principles​

  1. Purposeful: Animations should serve a purpose, not just decoration
  2. Consistent: Use consistent timing and easing functions
  3. Accessible: Respect user preferences for reduced motion
  4. Performance: Optimize animations for smooth 60fps performance

Animation Specifications​

/* Standard timing functions */
:root {
  --timing-fast: 150ms;
  --timing-normal: 250ms;
  --timing-slow: 350ms;
  
  --easing-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --easing-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --easing-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

Implementation​

CSS Framework​

The design system is built on top of Tailwind CSS with custom components and utilities.

/* Custom CSS variables */
:root {
  --color-primary: #0066CC;
  --color-primary-dark: #004499;
  --color-primary-light: #3388DD;
  --color-success: #00CC66;
  --color-warning: #FF6600;
  --color-error: #CC0000;
  --color-text-primary: #1A1A1A;
  --color-text-secondary: #666666;
  --color-background: #F5F5F5;
  
  --font-family-sans: 'Inter', sans-serif;
  --font-family-mono: 'JetBrains Mono', monospace;
  
  --border-radius: 6px;
  --border-radius-lg: 8px;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.1);
}

Component Implementation​

// Button component example
interface ButtonProps {
  variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
  size?: 'sm' | 'md' | 'lg';
  disabled?: boolean;
  loading?: boolean;
  children: React.ReactNode;
  onClick?: () => void;
}

export const Button: React.FC<ButtonProps> = ({
  variant = 'primary',
  size = 'md',
  disabled = false,
  loading = false,
  children,
  onClick,
}) => {
  const baseClasses = 'btn';
  const variantClasses = `btn-${variant}`;
  const sizeClasses = `btn-${size}`;
  const stateClasses = disabled ? 'btn-disabled' : '';
  
  return (
    <button
      className={`${baseClasses} ${variantClasses} ${sizeClasses} ${stateClasses}`}
      disabled={disabled || loading}
      onClick={onClick}
    >
      {loading ? <Spinner /> : children}
    </button>
  );
};

Usage Guidelines​

Do's​

  • ✅ Use consistent spacing and typography
  • ✅ Follow the color palette and guidelines
  • ✅ Ensure accessibility compliance
  • ✅ Test on multiple devices and screen sizes
  • ✅ Use semantic HTML elements
  • ✅ Provide clear feedback for user actions

Don'ts​

  • ❌ Don't use colors outside the defined palette
  • ❌ Don't create custom spacing values
  • ❌ Don't ignore accessibility requirements
  • ❌ Don't use animations that don't serve a purpose
  • ❌ Don't create components that don't follow the design system
  • ❌ Don't use fonts outside the defined typography scale

Resources​

Design Tools​

  • Figma: Primary design tool for creating mockups and prototypes
  • Storybook: Component library documentation and testing
  • Chroma: Visual regression testing for components

Development Tools​

  • Tailwind CSS: Utility-first CSS framework
  • TypeScript: Type-safe component development
  • React: Component library framework
  • Jest: Component testing framework

This design system ensures consistency, accessibility, and maintainability across all Quantum Platform interfaces.