Complete Eisaal Sanctuary design system including Karbala shrine-inspired color palette, typography, spacing tokens, glassmorphic effects, and animation patterns. Use for any UI work.
CRITICAL: Never hardcode colors. Always use theme:
final theme = Theme.of(context);
final colors = theme.colorScheme;
// ✅ Correct
Container(color: colors.primary)
// ❌ Wrong
Container(color: Color(0xFFD4AF37))
// Access via theme.colorScheme
primary // Gold (zareeh/dome)
secondary // Crimson (Muharram chandeliers)
tertiary // Green (Hussaini)
surface // Card background
surfaceVariant // Alternative surface
background // Screen background
import 'package:eisaal_app/core/theme/sanctuary_colors.dart';
// Golds
SanctuaryColors.zareehGold // #D4AF37 - Bright shrine gold
SanctuaryColors.antiqueGold // #C9A227 - Aged patina
SanctuaryColors.champagneGold // #F7E7CE - Light wash
// Crimsons (Muharram themes)
SanctuaryColors.muharramCrimson // #8B0000 - Deep blood red
SanctuaryColors.ashuraCrimson // #C41E3A - Vivid mourning red
// Greens (Hussaini themes)
SanctuaryColors.hussainiGreen // #228B22 - Forest green
SanctuaryColors.emeraldGlow // #50C878 - Bright emerald
final text = Theme.of(context).textTheme;
// Headlines
text.displayLarge // 57px, feature headers
text.displayMedium // 45px, section headers
text.displaySmall // 36px, page titles
// Titles
text.titleLarge // 22px, card titles
text.titleMedium // 16px, list tiles
text.titleSmall // 14px, small headers
// Body
text.bodyLarge // 16px, primary body
text.bodyMedium // 14px, secondary body
text.bodySmall // 12px, captions
// Labels
text.labelLarge // 14px, buttons
text.labelMedium // 12px, chips
text.labelSmall // 11px, badges
Import AppStyles:
import 'package:eisaal_app/core/styles/app_styles.dart';
AppStyles.paddingXS // 4px
AppStyles.paddingSM // 8px
AppStyles.paddingMD // 16px
AppStyles.paddingLG // 24px
AppStyles.paddingXL // 32px
Never use:
// ❌ Wrong