Support Center/Visual Refresh 2026
Announcements

Visual Refresh 2026

Learn about the Helm visual identity refresh, including the new brand system, design tokens, and accessibility improvements.

Last updated: February 23, 2026

Visual Refresh 2026

Helm has undergone a comprehensive visual refresh that modernizes the interface while improving accessibility and consistency across all public and application pages. This article outlines what changed and how it affects your experience.

What Changed

Brand Identity

The visual refresh introduces a refined brand system with:

  • Updated color palette: A cohesive color system that works in both light and dark modes
  • Typography refinements: Improved font hierarchy using Space Grotesk, IBM Plex Sans, and IBM Plex Mono for better readability
  • Consistent spacing: A design token system ensures visual consistency across all pages

Landing Page Animation

The homepage now features a narrative animation that tells Helm's story:

  • Problem Phase: Introduces the challenge of tracking scattered work
  • Solution Phase: Reveals how Helm addresses this with unified tracking

    • The animation respects user preferences:

    • Users with prefers-reduced-motion enabled will see static content instead of animated transitions
    • The animation uses accessible aria-hidden and inert attributes to ensure screen readers only announce active content

    Accessibility Improvements

    This refresh prioritizes accessibility:

    • Focus indicators: All interactive elements now have visible :focus-visible outlines for keyboard navigation
    • Color contrast: Text and controls meet WCAG 2.1 AA contrast requirements
    • Screen reader support: Proper heading hierarchy and ARIA attributes throughout
    • Motion preferences: Animations honor the prefers-reduced-motion setting

    Public Pages

    All public-facing pages have been updated:

    • Landing page: New narrative hero with brand messaging
    • Support Hub: Refreshed card layouts and navigation
    • Changelog: Updated styling consistent with the new brand
    • Legal pages: Consistent typography and spacing

    Design Tokens

    The refresh uses CSS custom properties (design tokens) for consistent styling:

    • Colors: --color-primary, --color-text, --color-surface, etc.
    • Spacing: --space-1 through --space-16
    • Typography: --text-sm through --text-5xl
    • Effects: --shadow-sm, --shadow-md, --shadow-lg

    These tokens automatically adapt between light and dark modes.

    Browser Support

    The visual refresh supports all modern browsers:

    • Chrome/Edge 88+
    • Firefox 78+
    • Safari 14+

    Responsive Design

    All pages are fully responsive with breakpoints at:

    • Desktop: 1024px and above
    • Tablet: 768px to 1023px
    • Mobile: Below 768px

    Questions?

    If you notice any visual issues or accessibility concerns after the refresh, please contact support or file an issue in the Helm GitHub repository.

    Related Topics