UI Foundations

Helm uses a cohesive design system to ensure a consistent, polished experience across all public and authenticated surfaces. This article explains the foundational elements that make up the Helm visual language.

Typography

Helm uses a carefully selected font stack for optimal readability and brand consistency:

Font	Usage	Example
Space Grotesk	Display headings, titles, logos	Page titles, hero text, section headings
IBM Plex Sans	Body text, UI elements	Paragraphs, buttons, form labels
IBM Plex Mono	Code, technical content	Code snippets, version numbers, terminal output

Font Loading

Fonts are loaded through Next.js font optimization, ensuring:

• No layout shift (FOUT prevention)
• Optimal performance with font subsetting
• Automatic fallback fonts while loading

Color Palette

Helm uses a dark theme with semantic color tokens:

Background Layers

• Background (--color-bg): Main page background
• Surface (--color-surface): Cards, panels, elevated containers
• Surface Hover (--color-surface-hover): Interactive surface states

Text Colors

• Text (--color-text): Primary text content
• Text Muted (--color-text-muted): Secondary, supporting text
• Text Subtle (--color-text-subtle): Tertiary, hint text

Accent Colors

• Primary (Blue): Actions, links, focus states
• Success (Green): Confirmations, positive states
• Warning (Yellow): Cautions, pending states
• Danger (Red): Errors, destructive actions
• Accent (Purple): Feature highlights, special badges

Spacing Scale

Helm uses a consistent 4px-based spacing scale:

Token	Value	Usage
--space-1	4px	Tight gaps, icon padding
--space-2	8px	Element gaps, small margins
--space-4	16px	Component padding, standard gaps
--space-6	24px	Section spacing
--space-8	32px	Large section breaks

Border Radius

Consistent corner rounding for UI elements:

Token	Value	Usage
--radius-md	4px	Buttons, inputs, small elements
--radius-lg	6px	Cards, dropdowns
--radius-xl	8px	Modals, larger containers
--radius-2xl	12px	Feature cards, hero elements
--radius-full	9999px	Pills, avatars, badges

Elevation (Shadows)

Subtle shadows indicate elevation hierarchy:

• Shadow SM: Subtle lift for buttons on hover
• Shadow MD: Cards and elevated containers
• Shadow LG: Dropdowns and popovers
• Shadow XL: Modals and dialogs
• Shadow Glow: Focus indicators (primary/danger variants)

Using Tokens

All design values are defined as CSS custom properties in tokens.css. Reference them in your styles:

.my-component {
background: var(--color-surface);
padding: var(--space-4);
border-radius: var(--radius-lg);
font-family: var(--font-body);
font-size: var(--text-base);
color: var(--color-text);
}

.my-heading {
font-family: var(--font-display);
font-size: var(--text-2xl);
font-weight: var(--font-bold);
letter-spacing: var(--tracking-tight);
}

Accessibility

The Helm design system prioritizes accessibility:

• Contrast: All text/background combinations meet WCAG AA standards
• Focus states: Visible focus rings using --shadow-glow-primary
• Motion: Transitions are subtle and respect prefers-reduced-motion
• Font sizes: Minimum 14px for body text, scalable with rem units

Related Articles

• App Workspace Overview - Understanding the authenticated experience
• Support Center Overview - Navigating the help center