An intelligent design system, and the engineers behind it

Ship faster because the system does the checking.

bun add @fusion.dev/helix

Custom elements, built on Lit. Works in React, Vue, Svelte, or no framework at all.

An interface is cheap to start and expensive to keep

The first screen takes a morning. A second brand, a framework migration, and an accessibility audit take the rest of the year, and none of them is visible on the day you start. Helix is built for that later work.

Theming

Add a second brand with one color

Enter one brand color and get a full palette
Helix rejects a palette it cannot make readable

Components

Switch frameworks without a rewrite

Custom elements that run in any framework, or in none
Types for React, Vue, and Svelte from one manifest

Checks

Find problems before an audit does

Contrast is measured on every release
Twelve generators check the code and fail the build when it drifts

Agents

Give AI agents the reference you read

Every tag, property, and event in one manifest at a URL
Every page as Markdown, and every component family as JSON

Theming

How one color becomes a full theme

You enter one brand color. Helix computes every token from it and measures each text and background pair for contrast before the theme is used.

Components

Live Helix components, running on the page

Each control in the panel is a custom element from the Helix package, running in your browser.

Explore components

Open the sandbox Build a theme

Helix

One brand color, a full palette

Every surface, border, and text color on this page comes from one brand color. Each text color is checked for contrast against its background.

Read about theming

Controls

Data

Surfaces

System

Light

Dark

Primary

Secondary

Subtle

Cmd K

Tag

Awful

Poor

Fine

Good

Great

1,284Installs

99.98Uptime%

Passing

Near budget

09:12

Contrast pass

08:40

Tokens regenerated

Releases by quarter
Quarter	Helix	Cortex
Q1	18	6
Q2	31	9
Q3	24	7
Q4	39	12

Downloads by source
Source	Downloads
npm	4,200
jsDelivr	3,100
unpkg	1,800
Git	900

Package size

How much Helix adds to a page

Measured from the built packages on every release, compressed with Brotli as a CDN serves them.

103

Components

Each has a headless tier with its behavior and a styled tier with its design.

2.1 kB

The token layer, compressed

191 semantic tokens. Every Helix page loads this file.

1.4 kB

The derivation engine

Most sites run it when they build. A theme switcher runs it in the browser.

91%

Of the first component is shared

Most of the first component is a runtime that every later component reuses.

One button, five systems

Brotli bytes for one button with its runtime, measured the same way on the same day.

One button and its runtime, brotli bytes, by design system
System	Helix	Others
Material Web		12,591
Helix	14,473
Shoelace		15,805
Carbon		17,685
Spectrum		18,674

See how we measure

Services

Three ways to get Helix into your product

Every service runs two days a week, alongside your team.

AI capability audit

Up to two weeks to find out which AI work is worth building. It fits around your roadmap and does not commit you to more.

Design system sprint

Helix, applied to your product. We build your components in your repository, as working code.

Conversational build

We build software with you while the specification is still changing, and agree the next step in each conversation.

Compare the services

Working with us

What working with us is like

We built Helix, and we build with it in your codebase.

The system is already built

Helix already has its token layer, components, framework types, sandbox, and build checks. Your project starts from that.

The work takes weeks

A typical engagement is four weeks at two days a week. The same work started from nothing takes months.

You keep all of it

The work lands in your repository under your license. We hand it over as we go, so you do not need us on a retainer afterward.

We tell you what is not done

Every product shows its stage. Active means it ships to users. Building means work is underway and nothing has shipped. Declared means it is planned.

Insights

Articles from the team

Read all articles

How we make design, engineering, and business decisions, and why.

Design

Decision

Helix ships as one open tier

Every Helix component is free and open source. A paid tier would hide components from the AI agents that write code with Helix.

Design

Essay

A palette from one brand color

Helix computes its palette from one brand color. Contrast follows from how the colors are computed, so no one has to review each pair.

Design

Essay

Why Helix has two tiers

Large companies have many brands and frameworks. A team that needs a different look can use the headless tier and keep the same components, parts, and events.

Engineering

Decision

Lockstep versioning, one domain at a time

The packages in each domain, such as Helix, share one version number, so a Cortex fix does not change the version of the Helix docs.

Work with us

Tell us what you need built. If we are not the right team for it, we will tell you.

Start a conversation

Brand color

Saturation

Corner radius

Color scheme

Reset

What the engine derived

as shipped

One button and its runtime, brotli bytes, by design system

System

Helix

Others

Material Web

12,591

Helix

14,473

Shoelace

15,805

Carbon

17,685

Spectrum

18,674

Helix. The DNA

Cortex. The mind

An intelligent design system, and the engineers behind it

An interface is cheap to start and expensive to keep

How one color becomes a full theme

Live Helix components, running on the page

Three ways to get Helix into your product

What working with us is like

Articles from the team

Work with us

Helix. The DNA

Cortex. The mind

An intelligent design system, and the engineers behind it

An interface is cheap to start and expensive to keep

How one color becomes a full theme

Live Helix components, running on the page

Three ways to get Helix into your product

What working with us is like

Articles from the team

Work with us