Metizsoft Design System
Brand guidelines, colors, typography, and components — Figma design inspired
Brand Colors
Primary
#2A2273
Deep purple for headers and key elements
Secondary
#7C3AED
Violet for secondary accents
Accent
#FF5C00
Orange for CTAs and accents
Tertiary
#C941F9
Magenta for decorative elements
Dark Text
#1C1C1C
Light Accent
#F4F5F7
Light Purple
#EDE3F5
Muted Text
#4D4D4D
Brand Gradients
Primary → Orange (text gradient)
Stats section background
Case Studies section #EDE3F5
Typography
Font Family: Poppins
Heading 1 - Bold 48px
Used for page titles and hero sections
Heading 2 - Bold 36px
Used for section titles
Heading 3 - Bold 24px
Used for card titles
Body Large - Regular 18px
Used for lead paragraphs
Body Regular - Regular 16px
Default body text throughout the site
Body Small - Regular 14px
Used for captions and metadata
Logo
Buttons
Primary Buttons
Secondary Buttons
Outline Buttons
Ghost Buttons
Icons & Status Colors
Success
Used for positive confirmations and completed actions
Information
Used for helpful tips and general information
Warning
Used for cautionary messages and important notices
Error
Used for error messages and destructive actions
Spacing & Grid
Container
Max width: 1380px with responsive padding (matches Figma)
Spacing Scale
Accessibility (WCAG 2.1 AA)
Color Contrast
All text meets WCAG AA contrast requirements:
- Primary text (#1C1C1C) on white: 17.3:1 ratio
- White text on Primary (#2A2273): 11.2:1 ratio
- Muted text (#4D4D4D) on white: 7.8:1 ratio
Focus States
All interactive elements have visible focus indicators for keyboard navigation
Semantic HTML
Proper heading hierarchy, landmarks, and ARIA labels throughout