Skip to content

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

Branding Guidelines

This page documents the Arctyk ITSM brand identity, logo usage, and visual guidelines.

Brand Overview

Arctyk ITSM is a professional IT Service Management platform with a clean, modern visual identity inspired by industry-leading tools like Jira and ServiceNow.

Brand Attributes

  • Professional - Enterprise-grade quality and reliability
  • Modern - Clean, contemporary design language
  • Efficient - Streamlined workflows and minimal friction
  • Trustworthy - Secure, stable, and dependable

Logo Usage

The Arctyk ITSM logo consists of:

  • Wordmark: "Arctyk ITSM" in the brand typeface
  • Icon: Optional icon/symbol element

File Locations:

static/images/arctyk-logo.svg      # Full logo
static/images/arctyk-icon.svg      # Icon only
static/images/arctyk-wordmark.svg  # Wordmark only

Logo Spacing

  • Minimum clear space: Equal to the height of the "A" in "Arctyk"
  • Minimum size: 120px wide for digital displays

Logo Don'ts

❌ Don't stretch or distort the logo
❌ Don't change the logo colors
❌ Don't add effects (shadows, gradients, etc.)
❌ Don't rotate the logo
❌ Don't place on low-contrast backgrounds

Color Usage

Primary Brand Color

Arctyk Blue - #0052CC

  • Primary actions and CTAs
  • Links and interactive elements
  • Logo color
  • Navigation highlights

Supporting Colors

See Design System - Color Palette for the full color system.

Typography

Brand Typeface

System Font Stack:

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;

Type Usage

  • Headings: Bold weight, sentence case
  • Body text: Regular weight, 14px base size
  • UI elements: Medium weight for emphasis

Visual Style

Design Language

  • Clean interfaces - Minimal decoration, focus on content
  • Clear hierarchy - Consistent heading levels and spacing
  • Purposeful color - Color used to convey meaning (status, actions)
  • Generous whitespace - 8px grid system for breathing room

Component Style

  • Rounded corners: 4px border radius for cards and buttons
  • Subtle shadows: Minimal elevation for depth
  • Solid borders: 1px borders in neutral gray
  • Consistent padding: 8px grid for internal spacing

Imagery Guidelines

Photography

  • Use high-quality, professional images
  • Prefer actual screenshots over stock photos
  • Maintain consistent aspect ratios

Icons

  • Icon library: Bootstrap Icons
  • Style: Outlined (not filled)
  • Size: 16px or 24px for consistency
  • Color: Match text color or use primary blue for emphasis

Accessibility

Color Contrast

  • Text on backgrounds: Minimum 4.5:1 contrast ratio (WCAG AA)
  • Large text: Minimum 3:1 contrast ratio
  • Interactive elements: Clear focus states with visible outlines

Alternative Text

  • All images must have descriptive alt attributes
  • Decorative images should have empty alt="" attributes

Usage in Code

Logo Implementation

{# Sidebar logo #}
<div class="sidebar-header">
    <img src="{% static 'images/arctyk-logo.svg' %}"
         alt="Arctyk ITSM"
         class="sidebar-logo">
</div>

{# Login page logo #}
<img src="{% static 'images/arctyk-wordmark.svg' %}"
     alt="Arctyk ITSM"
     class="login-logo">

Brand Colors in SCSS

// Import from variables
@import "base/variables";

.primary-button {
    background-color: $primary-blue;
    color: $white;
}

Questions?

For branding questions or to request logo files, contact the design team or refer to the internal brand guidelines.