Design System Documentation
Softylus Design System
A comprehensive design language for digital excellence
Design System Overview
Purpose
A unified design language that ensures consistency, efficiency, and scalability across all digital touchpoints.
Principles
- Minimalist Precision
- Intuitive Interaction
- Technical Excellence
- Systematic Thinking
Components
- Core Elements
- UI Components
- Patterns & Templates
- Design Tokens
Typography System
Primary Font: Montserrat
Display Text (48/52)
Heading 1 (40/48)
Heading 2 (32/40)
Heading 3 (24/32)
Body Large (18/28)
Body (16/24)
Display Font: Playfair Display
Regular Medium Semibold Bold
Color System
Primary Colors
Black #000000
White #FFFFFF
Gray Scale
Gray 100 #ffffff
Gray 200 #e6e6e6
Gray 300 #cdcdcd
Gray 400 #b4b4b4
Gray 500 #9b9b9b
Gray 600 #828282
Gray 700 #696969
Gray 800 #505050
Gray 900 #373737
Gray 1000 #1e1e1e
Component Library
Buttons
Padding: 12px 24px
Height: 48px (touch-friendly)
Border Radius: 0px
Form Elements
Cards
Card Title
Card content with consistent spacing and typography.
Spacing & Layout
Spacing Scale
4px
8px
12px
16px
24px
32px
48px
64px
Grid System
12-column grid with 24px gutters
Technical Specifications
Development Framework
- Built with Astro.js
- Tailwind CSS for styling
- TypeScript for type safety
- Component-driven architecture
Design Tools
- Figma for UI design
- Version control with Git
- Storybook for documentation
- Automated testing with Vitest
Performance Metrics
98%
Performance
100%
Accessibility
99%
Best Practices
Get in Touch
Ready to elevate your digital presence with our design system?
Email: [email protected]
Website: www.softylus.com
Zarqa, Jordan
Headquarters
London, UK
Innovation Hub
Riyadh, KSA
Regional Office