Helm Visual Identity

Helm uses a consistent visual identity across all surfaces to provide a cohesive, professional experience. This article describes the brand assets and their usage.

Logo System

The Helm Icon

The Helm icon uses a layered session/window motif that represents the core concept of orchestrating multiple agent contexts together.

Design Elements:

• Three stacked, offset rectangles representing multiple context windows
• Bottom layer: muted opacity (background context)
• Middle layer: semi-transparent (secondary context)
• Top layer: primary accent color (active context)
• Window dots on the top layer for visual interest

The layered design communicates coordination and the management of multiple parallel agent sessions.

Logo Variants

Helm provides three logo variants for different use cases:

Variant	Components	Usage
HelmIcon	Icon only	Favicons, app icons, compact spaces
HelmWordmark	"Helm" text only	Text-only contexts
HelmLogo	Icon + Wordmark	Headers, footers, primary branding

Size Options

All logo variants support multiple sizes:

Size	Icon Dimension	Use Case
sm	16px	Inline text, compact UI
md	20px	Standard headers and navigation
lg	24px	Hero sections, prominent placement
xl	32px	Marketing materials, splash screens

Favicon and App Icons

Helm includes a complete set of icons for browser tabs and app installations:

• favicon.svg (32x32) — Primary browser tab icon
• icon-16.svg — Small favicon for legacy browsers
• icon-192.svg — Android/PWA home screen icon
• icon-512.svg — PWA splash screen and large displays
• apple-touch-icon.png — iOS home screen icon

Color Compatibility

Light and Dark Themes

The Helm logo system is designed for both light and dark backgrounds:

• Icon layers use currentColor with opacity variations, automatically adapting to the current text color
• Primary accent uses the design system's --color-primary token (blue by default)
• No separate light/dark assets needed — the logo adapts automatically

Contrast Guidelines

When placing the logo:

• Ensure sufficient contrast between the logo and background
• The primary accent layer should remain visible against the background
• On very light backgrounds, the muted layers may be subtle but should remain perceptible

Where Logos Appear

The Helm logo is used consistently across key touchpoints:

Public Pages

• Landing page header — Full logo (icon + wordmark)
• Landing page footer — Full logo
• Support hub — Full logo in header and footer
• Changelog — Full logo in header

Authentication

• Sign-in page — Full logo linking to home

Application

• App header — Icon with "Helm ADE" text
• Onboarding flow — Full logo

Accessibility

Alt Text and ARIA Labels

All logo instances include appropriate accessibility attributes:

• aria-label describes the logo purpose (e.g., "Helm - Back to home")
• Icons include role="img" for screen reader recognition
• Decorative icons (when wordmark is present) use aria-hidden="true"

Focus States

Logo links inherit standard focus indicators:

• Focus-visible outline on keyboard navigation
• Clear visual indication of interactive state

Technical Details

Implementation

The logo is implemented as a React component in apps/web/src/components/helm-logo.tsx:

import { HelmLogo, HelmIcon, HelmWordmark } from '@/components/helm-logo';

// Full logo with icon and wordmark
<HelmLogo size="md" aria-label="Helm - Back to home" />

// Icon only
<HelmIcon size={24} aria-label="Helm icon" />

// Wordmark only
<HelmWordmark size="lg" />

CSS Classes

The logo system uses BEM-style class naming:

• .helm-icon — Icon SVG container
• .helm-wordmark — Text logo span
• .helm-wordmark--sm/md/lg/xl — Size modifiers
• .helm-logo — Full lockup container
• .helm-logo--sm/md/lg/xl — Size modifiers

Related Topics

• UI Foundations — Design tokens and typography
• Support Center Overview — Getting started with Helm