Skip to content

Version: Arctyk ITSM v0.6.0+ Last Updated: January 2026

UI & Design System Documentation

Welcome to the Arctyk ITSM UI & Design System documentation. This section provides comprehensive guidance on the visual design, frontend architecture, and UI patterns used throughout the application.

Overview

Arctyk ITSM uses a Jira-inspired design language built on top of Bootstrap 5.3 with custom SCSS modules and vanilla JavaScript patterns. The design system ensures consistency, accessibility, and maintainability across all pages and components.

Core Technologies

  • Framework: Bootstrap 5.3
  • CSS: Modular SCSS architecture
  • JavaScript: Vanilla JS with module pattern
  • Icons: Bootstrap Icons
  • Templates: Django Template Language (DTL)

Documentation Sections

Visual Design

  • Design System - Color palette, typography, spacing, design philosophy
  • Branding - Logo usage, brand guidelines, visual identity
  • Status Tags - Status badge colors and configuration

Code Implementation

  • SCSS Structure - SCSS architecture, compilation, and module organization
  • JavaScript Patterns - Frontend JavaScript patterns and best practices
  • Templates - Django template architecture and inheritance patterns
  • Partials - Reusable template fragments and components

Patterns & Components

  • UI Patterns - Common UI patterns, Bootstrap usage, and component guidelines

Quick Reference

Color Palette

  • Primary: #0052CC (Blue)
  • Success: #00875A (Green)
  • Warning: #FF991F (Orange)
  • Error: #DE350B (Red)
  • Info: #0065FF (Blue)

Spacing Scale (8px Grid)

  • xs: 4px
  • sm: 8px
  • md: 16px
  • lg: 24px
  • xl: 32px
  • 2xl: 48px

Typography

  • Font Family: System font stack (Segoe UI, Roboto, etc.)
  • H1: 28px - Page titles
  • H2: 20px - Section headings
  • Body: 14px - Default text

Design Principles

  1. Clarity - Clean, readable interfaces with clear visual hierarchy
  2. Efficiency - Minimize clicks and cognitive load
  3. Consistency - Predictable patterns across the entire application
  4. Accessibility - WCAG 2.1 AA compliance for all components

Development Workflow

SCSS Compilation

# Build CSS from SCSS
npm run build:css

# Watch mode for development
npm run watch:css

# Copy Bootstrap Icons
npm run copy:icons

Template Location

  • Project templates: templates/
  • App templates: <app>/templates/<app>/
  • Partials: templates/partials/

Need Help?

For questions about the design system or UI implementation:

  1. Check the relevant section in this documentation
  2. Review the Frontend Architecture guide
  3. See the Contributing Guidelines
  4. Contact the development team