Design System¶
This page documents the design system and visual language of Arctyk ITSM.
Design Philosophy¶
Arctyk ITSM follows a Jira-inspired design language with these principles:
- Clarity - Clean, readable interfaces
- Efficiency - Minimize clicks and cognitive load
- Consistency - Predictable patterns across the app
- Accessibility - WCAG 2.1 AA compliance
Color Palette¶
Primary Colors¶
- Primary Blue -
#0052CC- Primary actions, links - Dark Blue -
#0747A6- Hover states - Light Blue -
#4C9AFF- Active states
Neutral Colors¶
- Gray 900 -
#172B4D- Primary text - Gray 700 -
#42526E- Secondary text - Gray 500 -
#6B778C- Placeholder text - Gray 300 -
#DFE1E6- Borders - Gray 100 -
#F4F5F7- Backgrounds
Status Colors¶
- Success -
#00875A- Completed actions - Warning -
#FF991F- Warnings - Error -
#DE350B- Errors, destructive actions - Info -
#0065FF- Informational messages
Typography¶
Font Family¶
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
'Helvetica Neue', Arial, sans-serif;
Font Sizes¶
- H1 - 28px / 1.75rem - Page titles
- H2 - 20px / 1.25rem - Section headings
- H3 - 16px / 1rem - Subsection headings
- Body - 14px / 0.875rem - Default text
- Small - 12px / 0.75rem - Helper text
Spacing¶
Based on 8px grid:
- xs - 4px
- sm - 8px
- md - 16px
- lg - 24px
- xl - 32px
- 2xl - 48px
Components¶
See individual component pages for detailed documentation: