SmartStaff.ioDesign System
Modern, professional and accessible design system for 2025
Design Philosophy
Our design system is built on three fundamental pillars
Simplicity
Clean and intuitive design that doesn't complicate user experience
Accessibility
Design for everyone, regardless of abilities or devices
Performance
Optimized for speed and smooth interaction
Color System
Carefully selected palette for all use cases
Primary
#8b5cf6Main action color
Secondary
#292b35Secondary elements
Success
#39a561Successful actions
Destructive
#ef4444Error states
Typography
Hierarchy and readability in every detail
Heading 1
Heading 2
Heading 3
Heading 4
Body Large — For important content and introductory texts. Inter is a modern, variable font optimized for digital media.
Body Default — Base size for regular content. Ensures optimal readability on all devices.
Body Small — For auxiliary texts and metadata
Interactive Elements
Buttons, forms and other components for every situation
Button Variants
All available button styles and sizes
Avatars
User representation components in various states
Dialogs & Overlays
Modal dialogs, tooltips and dropdown menus
Dialog
Modal dialogs for important interactions
Dropdown Menu
Contextual menus for actions
Tooltips
Helpful hints on hover
Form Controls
Extended form inputs and controls
Input Types
Various input field types
Select Variations
Different select menu styles
Checkboxes & Switches
Binary selection controls
Textarea
Multi-line text input
You can write up to 500 characters.
Forms
Complete form examples with validation states
Contact Form
Example form with various input types
Input States
Different states of form inputs
Please check your input
Progress & Loading
Visual feedback for async operations
Progress Bar
Show completion status
Skeleton Loading
Placeholder for loading content
Bento Grid Layout
Flexible grid system for complex layouts
Analytics
Growth compared to last month
Active Users
+12% this week
Projects
3 active
Quick Actions
Badges and Alerts
Visual indicators for quick orientation
Badges
Default Alert
Primary Alert
Information
Success
Warning
Error
Navigation Elements
Tabs and other elements for content organization
Dashboard Overview
98%
Completed
4.8
Rating
24
Active
Advanced Effects
Visual showcase of modern effects used in the design system
Glassmorphism
Transparency with background blur
Hover Effects
Try hovering over this card
Gradients
Modern color transitions
Performance Metrics
Optimized for maximum speed and efficiency
< 1s
Speed
98/100
Mobile
99/100
Desktop
< 5%
CPU