← Back to UI/UX Design

Quantum Design System

Complete component library with tokens, patterns, and documentation

https://design.quantum.io/foundations/colors
  • Foundations
  • Colors
  • Typography
  • Spacing
  • Icons
  • Components
  • Buttons
  • Forms
  • Cards
Colors
Brand colors and semantic palettes for consistent visual language
Primary Colors
Blue
50 - 100 - 500 - 700
Gray
100 - 300 - 500 - 800
Semantic Colors
Success
#10b981
Warning
#f59e0b
Error
#ef4444
Info
#8b5cf6
  • Foundations
  • Colors
  • Typography
  • Spacing
  • Icons
  • Components
  • Buttons
  • Forms
  • Cards
Typography
Type scale and text styles for readable, hierarchical content
Heading 1
36px / 700 / Inter
Heading 2
28px / 700 / Inter
Heading 3
22px / 600 / Inter
Body Text
16px / 400 / Inter
Body Small
14px / 400 / Inter
Caption
12px / 400 / Inter
  • Foundations
  • Colors
  • Typography
  • Spacing
  • Icons
  • Components
  • Buttons
  • Forms
  • Cards
Buttons
Interactive elements for user actions and navigation
Variants
Sizes
Badges
Info Success Warning Error
Toggle
  • Foundations
  • Colors
  • Typography
  • Spacing
  • Icons
  • Components
  • Buttons
  • Forms
  • Cards
Forms & Cards
Input elements and content containers
Text Input
Card Component
Card Title
Card description text goes here.
Spacing Scale
4px
8px
16px
24px
32px
Icons
🏠
⚙️
👤
🔔
📊
📁
✉️
🔍
Colors
Primary
Semantic
Shades
Typography
Heading 1
24px / 700
Heading 2
18px / 600
Body Text
14px / 400
Caption
12px / 400
Buttons
Variants
Badges
InfoSuccessWarningError
Toggle
Forms
Input
Card
Card Title
Description
Icons
🏠
⚙️
👤
🔔
📊
📁
Screen 1 of 4
Colors