Design System

The Design System defines the core visual and layout foundations of the admin template.
It works alongside Angular Material (Material 3) but remains framework-agnostic and reusable.

⚡ Angular Material theming (palettes, light/dark modes, dynamic themes)
is documented separately under Theming.

📝 Overview

The Design System provides:

• 🧩 Unified spacing & layout language
• 🏗️ Custom grid system
• ⚡ SCSS utilities & helpers
• 🎯 Design tokens for consistent scaling
• 🔄 RTL and LTR compatibility

Ensures consistency, scalability, and maintainability across the entire application.

🎯 Design Tokens

Design Tokens are the single source of truth for all design values.

They define:

• 📏 Spacing scale ($spacers)
• 🗂️ Grid configuration
• 📐 Breakpoints
• 🔲 Radius, borders, sizing values
• 🔡 Typography scales

All grid, spacing, and utility classes are generated only from tokens.
❗ Avoid hard-coded values like 16px or 24px.

🌈 Color System

The Color System complements Angular Material themes rather than replacing them.

Used for:

• 🖼️ Layout backgrounds
• 📦 Containers & surfaces
• 🎨 Utility colors (bg-*, text-*)
• ⚠️ Status & helper colors

Material colors are consumed via CSS variables (e.g. --mat-sys-*) to remain theme-aware.

🔡 Typography

Typography utilities provide a consistent and readable text system.

Includes:

• ✏️ Font sizes & line heights
• 🖋️ Font weights & styles
• ↔️ Text alignment & transformation
• 🪄 Overflow & truncation helpers

Typography is managed at the Design System level, not per component.

🏗️ Grid & Layout

The grid system is a custom SCSS-based layout solution built on flexbox.

Features:

• 📏 Responsive columns
• 📐 Breakpoint-based layouts
• 🔀 Offset & order utilities
• ⚡ Material-friendly spacing behavior

Example usage:

<div class="row">
  <div class="col-md-6 col-lg-4"></div>
</div>

🧩 Grid & Spacing Utilities

Grid behavior is controlled via design tokens and mixins.

📏 Spacing Scale

Spacing is fully token-driven and utility-based.

Supported properties:

• ➖ Margin (m-*)
• 📦 Padding (p-*)
• 🔗 Gap (gap-*)
• 📍 Inset positioning (top-*, left-*, right-*, bottom-*)

Features:

• 🔄 Responsive spacing utilities
• ➖ Negative spacing support
• 🔄 LTR / RTL awareness

Example usage:

<div class="p-md m-t-lg gap-sm"></div>

⚡ SCSS Mixins

SCSS mixins are used to generate and standardize layout patterns.

Includes:

• :mobile_phone: Breakpoint helpers
• 🏗️ Grid generators
• 🛠️ Utility builders
• 📏 Size & spacing generators

Benefits:

• 🔄 Reduce code duplication
• 🎯 Enforce design consistency
• 📈 Scale the system safely

🛠️ Utilities

Utilities are map-driven and auto-generated helper classes.

Includes:

• 📏 Spacing & sizing
• 🔀 Flexbox helpers
• 🔡 Typography utilities
• 🎨 Color helpers
• 🔲 Border & radius utilities
• 📍 Positioning helpers
• 🔄 RTL / LTR support

Example usage:

<div class="d-flex justify-content-between p-md rounded-md"></div>

Utilities are intended for layout fine-tuning, not full layout composition.

📘 Design Guidelines

Use Case	Location
🎨 Angular Material colors & themes	Theming
🏗️ Grid and layout rules	Design System
📏 Spacing and sizing	Design System
🛠️ Utility helpers	Design System
📄 Page-specific styling	Page styles

✅ Summary

The Design System:

• 🎨 Defines the visual language of the template
• 🔗 Is independent from Angular Material theming
• 📈 Scales across large applications
• 🔄 Supports RTL and responsive layouts
• ⚡ Enables fast and consistent UI development

This system is designed for enterprise-grade applications and long-term maintainability.