@vasic-digital/design-system

Revision: 1 Last modified: 2026-07-14T00:00:00Z Status: foundation (extracted from HelixOTA; program plan in docs/PROGRAM_PLAN.md)

A reusable, decoupled, OpenDesign-driven design system shared across the Helix web surfaces (HelixOTA · HelixCode · HelixTrack · HelixQA) and the vasic-digital org. Extracted from the production HelixOTA website design library so every Helix site reads as one system — elegant, accessible, consistent in light and dark, and brand-swappable.

What's inside

Layer	Path	Notes
Theme-invariant core tokens	tokens/core.css	type scale, spacing, radius, elevation, focus, motion, layout — no brand color
Brand themes (light + dark)	tokens/themes/*.css	helix-green (default), vasic-red, helix-ota-blue
Default entry	tokens/index.css	core.css + default green theme
Tailwind v4 layer	tailwind/tailwind-v4.css	token-bound utility layer
Fonts	fonts/fonts.css	Space Grotesk / Hanken Grotesk / JetBrains Mono (variable)
Universal components (CSS)	components/css/components.css	framework-agnostic .ds-* — buttons, cards, inputs, nav, footer, badges
Angular adapters	components/angular/*	ThemeService, I18nService, ThemeToggleComponent, LanguagePickerComponent, DS_CONFIG
i18n base	i18n/en.json	English shipped; add a locale = one JSON + one DS_LOCALES row
Brand assets	assets/logos/	Helix Development logo

Theming

Both light and dark are first-class and ship via three sanctioned mechanisms so the tokens work under any toggle: @media (prefers-color-scheme: dark), :root[data-theme="dark"], and .dark. See docs/THEMES.md for the full palette + WCAG-AA contrast evidence.

Default = Helix Development green (--brand #B6E376, eyedropped from the logo; accessible --accent #446E12 light / #B6E376 dark). Alternate = vasic-digital red. Swap at build time (import a different theme file) or at runtime (:root { --accent: …; --brand: …; }).

/* pick one brand */
@import "@vasic-digital/design-system/tokens/core.css";
@import "@vasic-digital/design-system/tokens/themes/helix-green.css";
@import "@vasic-digital/design-system/components";

// Angular bootstrap — decoupled, per-site config (§11.4.28)
providers: [
  { provide: DS_CONFIG, useValue: { storagePrefix: 'helix-code', defaultTheme: 'system', defaultLocale: 'en' } },
  { provide: DS_DICTIONARY, useValue: { en: require('@vasic-digital/design-system/i18n/en.json').strings } },
]

Decoupling (§11.4.28)

The system carries no single-site value: storage keys, dictionaries, and default theme are injected per consumer. It is incorporated by each website as a git submodule and/or an npm dependency — never copied.

Provenance & anti-bluff

Every brand color traces to captured evidence (logo eyedrop or the HelixOTA canonical token set) — see docs/EXTRACTION_MANIFEST.md. Every accent value is WCAG-AA pinned with a measured contrast ratio (docs/THEMES.md). No invented colors (§11.4.6).

Program

This repo is the foundation of the four-site web program. The full design-first, phased plan + tracked workable items live in docs/PROGRAM_PLAN.md and docs/WORKABLE_ITEMS.md.

License

Apache-2.0.