Skip to content
HELiX

Architecture Overview

apps/docs/src/content/docs/architecture/overview Click to copy
Copied! apps/docs/src/content/docs/architecture/overview

HELIX follows a layered architecture designed for enterprise content organizations. The system prioritizes accessibility, performance, and Drupal CMS integration.

System Layers

Section titled “System Layers”
┌─────────────────────────────────────────────┐
│           Documentation Layer               │
│  Astro/Starlight + Storybook 10.x            │
├─────────────────────────────────────────────┤
│           Component Layer                   │
│  Lit 3.x Web Components + TypeScript        │
├─────────────────────────────────────────────┤
│           Token Layer                       │
│  Three-Tier Design Tokens (W3C DTCG)        │
├─────────────────────────────────────────────┤
│           Integration Layer                 │
│  Drupal Twig + Behaviors + CDN              │
└─────────────────────────────────────────────┘

Key Architectural Decisions

Section titled “Key Architectural Decisions”
  1. Lit 3.x over React/Vue — Framework-agnostic Web Components for CMS integration
  2. Three-tier tokens — Primitive, Semantic, Component tiers for maximum flexibility
  3. Dual documentation — Storybook for playground, Starlight for guides
  4. Turborepo + pnpm monorepo — Efficient builds with intelligent caching
  5. WCAG 2.2 AAA on P0 surface, AA baseline elsewhere — Accessibility as a first-class requirement

Next Steps

Section titled “Next Steps”