Skip to content

🎨 Ticket Masala - Design System v2

A comprehensive design system for building consistent, professional, and on-brand user interfaces.


🌶️ Brand Colors (Updated)

Color Hex Usage
Logo Green (Pepper Fill) #C8E6C9 Very light background tints
Logo Dark (Tick/Outline) #383D39 Deep charcoal elements
Logo Accent Green #8BC34A Success states, highlights
Spicy Orange (Accent) #FF8A65 Notifications, badges, highlights
Spicy Orange (Text) #BF360C Text readability on white backgrounds

🌈 Gradients (Updated)

Token Hex Usage
--gradient-dispatch linear-gradient(135deg, #4C5AF5 0%, #1E293B 100%) Dispatch header gradient

Success States

Token Hex Usage
--color-success-light #f0fff4 Selected ticket background
--color-success-border #28a745 Selected ticket border

📏 Typography

Font Families

Usage Font Fallback Stack
Headings Rajdhani -apple-system, BlinkMacSystemFont, sans-serif
Body Inter -apple-system, BlinkMacSystemFont, Roboto, sans-serif

Typography (Continued)

Usage Font Fallback Stack
Headings Rajdhani 'Rajdhani', sans-serif
Body Text Inter 'Inter', sans-serif

Spacing Guidelines

Token Value Usage
--spacing-small 4px Compact spacing
--spacing-medium 8px Default spacing
--spacing-large 16px Generous spacing

🌑 Dark Mode

Element Hex Notes
Background #1E293B Deep slate (reduced eye strain)
Secondary BG #0F172A Darker panels, modals
Primary Text #F1F5F9 Off-white for legibility
Secondary Text #CBD5E1 Lighter gray for subtext
Border #334155 Subtle borders
Primary CTA #4C5AF5 Blue stands out on dark
Hover State #6577FF Luminous lighter blue

📚 Implementation

All variables are defined in:

Fonts loaded via Google Fonts in _Layout.cshtml:

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Rajdhani:wght@500;600;700&display=swap" rel="stylesheet">