# Fusion Development Group > Fusion Development Group builds Helix, a design system built from your > brand color, and Cortex, a memory and provenance layer for AI systems. > We also build products with them for clients. Every page on this site has a sibling `.md` at the same path plus the extension. The component reference and the design-system documentation are generated from a custom elements manifest, which is the authoritative description of every component and is linked below. ## Machine-readable - [Custom elements manifest](https://fusion.dev/helix/custom-elements.json): Every tag `@fusion.dev/helix` ships, with each property and its literal union, event with its class, slot, part and custom property. An add-on package, such as `@fusion.dev/helix-sandbox`, ships a manifest of its own. - [Catalog](https://fusion.dev/helix/api.json): Every family with its tags, properties, events and their React props, slots, parts, words, and the import lines to copy, in one file without the examples, from every documented Helix package. It is what `helix mcp` reads from a project that installs them all. The vocabulary: a tag not in it does not exist. - [Token set](https://fusion.dev/helix/tokens.json): Every semantic token with its value, category and description. The closed set: a name not in it resolves to nothing and the property silently falls back. - [One family as data](https://fusion.dev/helix/components/button.json): Any family's `.md` also answers as `.json`, the same content structured. Swap the slug. ## Fusion - [Fusion Development Group](https://fusion.dev/index.md): Use Helix on your own, or hire us to build with it. - [Thesis](https://fusion.dev/company/thesis.md): Fusion builds an intelligent design system, intelligent tooling, and intelligent services on one foundation. - [Services](https://fusion.dev/company/services.md): The services we offer, and what you have at the end of each. - [Contact](https://fusion.dev/contact.md): How to reach us. - [Terms of use](https://fusion.dev/legal/terms.md): The terms for using this website, including the sandbox and the theme builder. - [Privacy](https://fusion.dev/legal/privacy.md): This site keeps three preferences in your browser, and uses no cookies and no analytics. - [Acceptable use](https://fusion.dev/legal/acceptable-use.md): What you may and may not do with the sandbox and the theme builder. ## Helix - [Helix](https://fusion.dev/helix.md): A design system of web components, themed from your brand color. - [Docs](https://fusion.dev/helix/docs.md): Install Helix, build a theme, and learn how it works. - [Components](https://fusion.dev/helix/components.md): Every Helix component, with its API and a live example. - [Aura](https://fusion.dev/helix/aura.md): Twelve animated backgrounds colored by your tokens, with controls for every parameter. - [Maps](https://fusion.dev/helix/maps.md): Interactive maps in your brand’s colors, drawn by MapLibre or Leaflet. - [Graph](https://fusion.dev/helix/graph.md): Interactive graphs in your brand’s colors, drawn by Sigma.js, cosmos.gl, or three.js. - [Sandbox](https://fusion.dev/helix/sandbox.md): Edit the source of any Helix component example and see the result beside it. Link to an example with `?e=.`. - [Theme builder](https://fusion.dev/helix/theme.md): Enter your brand color and get a full palette. Helix measures the contrast of each pair it solves. ## Cortex - [Cortex](https://fusion.dev/cortex.md): Memory, provenance, and context for AI systems. ## Helix docs: Foundations - [Accessibility](https://fusion.dev/helix/docs/accessibility.md): What Helix components handle for you, what you handle, and what we do not test. - [Color](https://fusion.dev/helix/docs/color.md): The color roles, why Helix uses OKLCH, and how the engine meets contrast targets. - [Color modes](https://fusion.dev/helix/docs/color-modes.md): Switch between light and dark mode with one attribute. Each token declares both values once. - [Elevation and material](https://fusion.dev/helix/docs/elevation-and-material.md): The layer, shadow, and material tokens for stacking, lifting, and translucent surfaces. - [Iconography](https://fusion.dev/helix/docs/iconography.md): Draw icons from the Helix set, import glyphs directly, and build a set of your own. - [Motion](https://fusion.dev/helix/docs/motion.md): The duration and easing tokens, and how components handle reduced motion. - [Recipes](https://fusion.dev/helix/docs/recipes.md): Style your own HTML with Helix data attributes and no JavaScript. - [Shape and borders](https://fusion.dev/helix/docs/shape-and-borders.md): The corner radius and border width tokens, and how a theme changes them. - [Space and size](https://fusion.dev/helix/docs/space-and-size.md): Use the space scale for gaps and the size tokens for the height of controls. - [Surfaces and separation](https://fusion.dev/helix/docs/surfaces-and-separation.md): The four ways to separate a surface from what is behind it, and the tokens that choose between them. - [Typography](https://fusion.dev/helix/docs/typography.md): The font families, the type scale, and how Helix styles headings and prose. ## Helix docs: Getting started - [Angular](https://fusion.dev/helix/docs/angular.md): The schema Angular needs to compile Helix tags, and how to bind properties and events. - [Browser support](https://fusion.dev/helix/docs/browser-support.md): The browser features Helix uses, and the browsers we test in. - [Coding agents](https://fusion.dev/helix/docs/coding-agents.md): Install Helix for a coding agent, and the files an agent can read to write Helix code. - [Installation](https://fusion.dev/helix/docs/installation.md): What to install, the order of the stylesheets, and how to check that the elements registered. - [Introduction](https://fusion.dev/helix/docs/introduction.md): What Helix is, and the packages it includes. - [Metrics](https://fusion.dev/helix/docs/metrics.md): How much Helix adds to a page, measured from the built packages. - [Other frameworks](https://fusion.dev/helix/docs/other-frameworks.md): The three rules for using Helix in any framework, and how each framework applies them. - [React](https://fusion.dev/helix/docs/react.md): The React typings, the hydration bridge, and how state moves between React and the elements. - [Svelte](https://fusion.dev/helix/docs/svelte.md): The Svelte typings, and how Svelte passes props and binds events. - [Tiers](https://fusion.dev/helix/docs/tiers.md): Why the headless and styled tiers are separate packages. - [Using Helix with an agent](https://fusion.dev/helix/docs/using-helix-with-an-agent.md): The rules an agent follows to write Helix code, and the five mistakes that look like Helix bugs. - [Versioning](https://fusion.dev/helix/docs/versioning.md): What a Helix version number means, and which packages are released together. - [Vue](https://fusion.dev/helix/docs/vue.md): The compiler setting Vue needs, and how Vue passes props and binds events. - [Without a bundler](https://fusion.dev/helix/docs/without-a-bundler.md): Use the Helix styles on a page with no build step, and why the elements need a bundler for now. ## Helix docs: Essentials - [Building on the headless tier](https://fusion.dev/helix/docs/building-on-the-headless-tier.md): Build your own design system on the Helix headless tier, with your own tag names and styles. - [Canvases](https://fusion.dev/helix/docs/canvases.md): Add a board of cards and connections that people can move, connect, and read with any input, and save it as JSON Canvas. - [Charting](https://fusion.dev/helix/docs/charting.md): Which chart to use, and how charts read their data from a table in the document. - [Composition](https://fusion.dev/helix/docs/composition.md): How Helix is organized into families, parts, and groups, and which one to use. - [Events](https://fusion.dev/helix/docs/events.md): The two events each state change sends, and why one name has a prefix and the other does not. - [Forms and validation](https://fusion.dev/helix/docs/forms.md): How Helix controls take part in forms, render their own labels, and handle disabled fieldsets. - [Graphs](https://fusion.dev/helix/docs/graphs.md): Add interactive graphs and isometric diagrams to your site, styled with your theme and drawn by Sigma.js, cosmos.gl, three.js, or Helix. - [Localization and RTL](https://fusion.dev/helix/docs/localization.md): Set the locale of date, time, and number controls, translate the built-in words, lay out pages right to left, and color a rise and a fall for your market. - [Maps](https://fusion.dev/helix/docs/maps.md): Add interactive maps to your site, styled with your theme and drawn by MapLibre or Leaflet. - [Overlays and layering](https://fusion.dev/helix/docs/overlays.md): How overlays use the top layer, how they close, and where focus goes. - [Routing and navigation](https://fusion.dev/helix/docs/routing.md): Make components navigate with real anchors, and use your framework's router with them. - [Server rendering](https://fusion.dev/helix/docs/server-rendering.md): How components render on a server with no DOM, and what waits for the browser. - [Spatial charts](https://fusion.dev/helix/docs/spatial-charts.md): Add charts drawn in three dimensions to your site, styled with your theme, in SVG or with three.js. - [State and control](https://fusion.dev/helix/docs/state-and-control.md): How a property you set becomes a starting value, and how to cancel or take over a change. - [Terminals](https://fusion.dev/helix/docs/terminals.md): Add a terminal that runs your own shell or process to your site, styled with your theme and drawn by xterm.js. - [Undo an action from a toast](https://fusion.dev/helix/docs/undo.md): Do an action at once and offer to undo it from a toast, in place of asking first. - [Using the elements](https://fusion.dev/helix/docs/using-the-elements.md): Bind events, register the elements, and import the styles in a React app. ## Helix docs: Tooling - [Diagnostics](https://fusion.dev/helix/docs/diagnostics.md): Find the Helix mistakes the browser accepts without an error, on your running pages and in your code, with a setup for Vite, React, Next.js, and CI. - [Sandbox](https://fusion.dev/helix/docs/sandbox.md): The editable examples on each component page, and what you need to build an editor of your own. - [Theme builder](https://fusion.dev/helix/docs/theme-builder.md): Enter your theme inputs and see every token Helix computes from them. - [Visual testing](https://fusion.dev/helix/docs/visual-testing.md): Picture every page and component in a real browser, compare each picture with a baseline kept in git, and fail the run when one changes. ## Helix docs: Theming - [Intent reference](https://fusion.dev/helix/docs/intent-reference.md): Every input the theme engine takes, and what each one changes. - [Overriding a component](https://fusion.dev/helix/docs/overriding-a-component.md): Change a component's styles with tokens, per-component hooks, or parts, and choose which one to use. - [Size and density](https://fusion.dev/helix/docs/size-and-density.md): Controls take their height from the density of the region they are in. Set the density once on the region. - [Deriving a theme](https://fusion.dev/helix/docs/theming.md): Compute a complete token set from your brand color and a few other inputs. - [Tokens](https://fusion.dev/helix/docs/tokens.md): The two token layers, the surface tokens, and the rules the build enforces. - [Visual axes](https://fusion.dev/helix/docs/visual-axes.md): The attributes that set how a component looks, the values each one accepts, and what each value draws. ## Helix components - [Accordion](https://fusion.dev/helix/components/accordion.md): A group of collapsible sections. - [Announcement](https://fusion.dev/helix/components/announcement.md): A message for the whole page, shown above its header, that can be dismissed. - [App Header](https://fusion.dev/helix/components/app-header.md): Page-level banner holding brand, navigation, and actions. - [Area Chart](https://fusion.dev/helix/components/area-chart.md): A chart that shows how a total is made up over time, as bands stacked on one another. - [Aura](https://fusion.dev/helix/components/aura.md): A drifting background of light, drawn in your theme's colors. - [Avatar](https://fusion.dev/helix/components/avatar.md): A person or entity, shown as an image or as their initials. - [Badge](https://fusion.dev/helix/components/badge.md): A count or a dot pinned to the corner of another element. - [Bar Chart](https://fusion.dev/helix/components/bar-chart.md): A chart that draws a table's categories as columns. - [Blockquote](https://fusion.dev/helix/components/blockquote.md): A passage set off from the prose around it. - [Breadcrumbs](https://fusion.dev/helix/components/breadcrumbs.md): Shows the path to the current page. - [Button](https://fusion.dev/helix/components/button.md): Triggers an action, submits a form, or navigates. - [Button Group](https://fusion.dev/helix/components/button-group.md): Groups related buttons into one control. - [Callout](https://fusion.dev/helix/components/callout.md): A passage set apart as a note, information, a warning, or an error. - [Canvas](https://fusion.dev/helix/components/canvas.md): A board of cards and the connections between them, which can be navigated, rearranged, and connected. - [Card](https://fusion.dev/helix/components/card.md): Groups related content and actions into a single surface. - [Carousel](https://fusion.dev/helix/components/carousel.md): Shows one slide of several, with controls to move between them. - [Chat](https://fusion.dev/helix/components/chat.md): A conversation's turns in a scrolling transcript that keeps the user's place. - [Checkbox](https://fusion.dev/helix/components/checkbox.md): A box that is checked, unchecked, or indeterminate. - [Checkbox Group](https://fusion.dev/helix/components/checkbox-group.md): A group of related checkboxes under one label, with one value for the set. - [Code](https://fusion.dev/helix/components/code.md): A fragment of code inside a line of prose. - [Code Block](https://fusion.dev/helix/components/code-block.md): A block of code with an optional name and a copy button. - [Code Editor](https://fusion.dev/helix/components/code-editor.md): An editor for a file of code, drawn by a code editor you connect. - [Code Input](https://fusion.dev/helix/components/code-input.md): A field for a short piece of code, highlighted as it is typed. - [Color Input](https://fusion.dev/helix/components/color-input.md): A field for a color, typed in any syntax or picked from a panel. - [Color Picker](https://fusion.dev/helix/components/color-picker.md): A color picker made of a square and two ramps. - [Combobox](https://fusion.dev/helix/components/combobox.md): A text field that filters a list of options as you type. - [Command](https://fusion.dev/helix/components/command.md): A command palette: a list of commands that opens from anywhere on the page and filters as you type. - [Copy Button](https://fusion.dev/helix/components/copy-button.md): A button that copies a string to the clipboard and confirms the copy. - [Data Table](https://fusion.dev/helix/components/data-table.md): A table drawn from an array of rows, with sorting, filtering, and paging. - [Date Input](https://fusion.dev/helix/components/date-input.md): A date, typed or picked from a calendar. - [Date Picker](https://fusion.dev/helix/components/date-picker.md): A month calendar for choosing one or more dates. - [Description List](https://fusion.dev/helix/components/description-list.md): A list of labels and their values, such as a details panel. - [Device Screen](https://fusion.dev/helix/components/device-screen.md): A device's screen, drawn from a stream you supply, that sends taps, swipes, keys, and button presses back to the device. - [Dialog](https://fusion.dev/helix/components/dialog.md): A modal window built on the native `` element. - [Divider](https://fusion.dev/helix/components/divider.md): A line that separates content into groups. - [Donut Chart](https://fusion.dev/helix/components/donut-chart.md): A chart that shows parts of a whole as a ring, read from a table. - [Drawer](https://fusion.dev/helix/components/drawer.md): A panel that slides in from an edge. - [Drilldown](https://fusion.dev/helix/components/drilldown.md): A stack of pages that shows one at a time, with a back button. - [Editor](https://fusion.dev/helix/components/editor.md): A frame around a document that ProseMirror or another editor draws. - [Empty](https://fusion.dev/helix/components/empty.md): A message that a region has nothing in it, and the next step to take. - [File Input](https://fusion.dev/helix/components/file-input.md): A field for choosing files from a picker or by dropping them on it. - [Filter Input](https://fusion.dev/helix/components/filter-input.md): A text field for filters, with the active filters shown in it as tokens. - [Find](https://fusion.dev/helix/components/find.md): A bar that finds words in content and moves among the matches. - [Flex](https://fusion.dev/helix/components/flex.md): A layout that places its children in a row or a column. - [Format Date](https://fusion.dev/helix/components/format-date.md): A timestamp, formatted for the user's locale. - [Graph](https://fusion.dev/helix/components/graph.md): A frame around a graph of notes drawn by another library, and the list that makes it readable. - [Grid](https://fusion.dev/helix/components/grid.md): A layout that places its children on a grid. - [Heatmap](https://fusion.dev/helix/components/heatmap.md): A strip of cells, each colored by its reading, for uptime, contributions, or activity. - [Icon](https://fusion.dev/helix/components/icon.md): A named icon from the Helix set. - [Icon Button](https://fusion.dev/helix/components/icon-button.md): A square button whose content is an icon. - [Image](https://fusion.dev/helix/components/image.md): An image that shows a placeholder while it loads and a fallback if it fails. - [Input](https://fusion.dev/helix/components/input.md): A field for a single line of text. - [Kbd](https://fusion.dev/helix/components/kbd.md): A keyboard key or chord, set inline with text. - [Legend](https://fusion.dev/helix/components/legend.md): A list of the series in a chart, each name beside the color it is drawn in. - [Lightbox](https://fusion.dev/helix/components/lightbox.md): A viewer that shows one item at a time over the page. - [Line Chart](https://fusion.dev/helix/components/line-chart.md): A chart that draws series over time as lines, read from a table. - [List](https://fusion.dev/helix/components/list.md): A set of rows, announced as a list. - [Listbox](https://fusion.dev/helix/components/listbox.md): A list of options, from which you choose one or several. - [Loader](https://fusion.dev/helix/components/loader.md): Shows that work of unknown length is in progress. - [Log](https://fusion.dev/helix/components/log.md): Output that arrives while you watch it, such as a CI run, a deployment, or a build, in a box that follows the newest line. - [Map](https://fusion.dev/helix/components/map.md): A frame around a map drawn by another library. - [Markdown](https://fusion.dev/helix/components/markdown.md): Markdown drawn as a document, which streams in place as a reply arrives. - [Megamenu](https://fusion.dev/helix/components/megamenu.md): A section of a navigation with a trigger that opens a panel of links. - [Menu](https://fusion.dev/helix/components/menu.md): A menu of commands that opens from a trigger. - [Meter](https://fusion.dev/helix/components/meter.md): A measurement in a known range, with optional bands that mark it good, fair, or poor. - [Motion Toggle](https://fusion.dev/helix/components/motion-toggle.md): A button that pauses every motion on the page that starts by itself, and lets it run again. - [Navigation](https://fusion.dev/helix/components/navigation.md): A set of destinations, with a marker on the current one. - [Notifications](https://fusion.dev/helix/components/notifications.md): A feed of notifications, each marked read or unread. - [Number Input](https://fusion.dev/helix/components/number-input.md): A field for a number, typed or changed with step buttons. - [Object Inspector](https://fusion.dev/helix/components/object-inspector.md): A structured value shown as a tree, where you can close branches, see how many entries each holds, and copy any part. - [Option](https://fusion.dev/helix/components/option.md): One choice in a listbox. - [Orb](https://fusion.dev/helix/components/orb.md): An animated shape that shows what an agent is doing. - [Outline](https://fusion.dev/helix/components/outline.md): Links to the headings on the page, with the section in view marked. - [Pagination](https://fusion.dev/helix/components/pagination.md): Controls for moving between the pages of a long set of results. - [Pin Input](https://fusion.dev/helix/components/pin-input.md): A field for a short code, with one box for each character. - [Popover](https://fusion.dev/helix/components/popover.md): A panel that opens next to its trigger and holds any content. - [Progress](https://fusion.dev/helix/components/progress.md): A bar or ring that shows how far along a task is. - [QR Code](https://fusion.dev/helix/components/qr-code.md): A scannable QR code for a short piece of text. - [Quote](https://fusion.dev/helix/components/quote.md): A short quotation, set inline with the text around it. - [Radio](https://fusion.dev/helix/components/radio.md): One choice in a radio group. - [Rating](https://fusion.dev/helix/components/rating.md): A row of marks, such as stars, for giving or showing a score. - [Sandbox](https://fusion.dev/helix/components/sandbox.md): An editable source pane paired with a live preview. - [Scatter Chart](https://fusion.dev/helix/components/scatter-chart.md): A chart that shows whether two measures move together, with one point per row. - [Scroll Area](https://fusion.dev/helix/components/scroll-area.md): A scrolling box that shows which edges have more content past them. - [Select](https://fusion.dev/helix/components/select.md): A control that opens a list of options to choose from. - [Shortcut Overlay](https://fusion.dev/helix/components/shortcut-overlay.md): Shows every control's shortcut and what it does while a key is held. - [Skeleton](https://fusion.dev/helix/components/skeleton.md): A placeholder shown in place of content that is still loading. - [Skip Link](https://fusion.dev/helix/components/skip-link.md): A link at the start of a page that moves keyboard focus past the header to the main content. - [Slider](https://fusion.dev/helix/components/slider.md): A value chosen from a range by dragging. - [Sparkline](https://fusion.dev/helix/components/sparkline.md): A small chart with no axes that shows the shape of a series beside its number. - [Spatial Bar Chart](https://fusion.dev/helix/components/spatial-bar-chart.md): A bar chart drawn in three dimensions, each bar a block as tall as its value, for categories in one or more series. - [Spatial Heatmap](https://fusion.dev/helix/components/spatial-heatmap.md): A heatmap drawn as a relief, where each reading stands as tall as its value. - [Spatial Ribbon Chart](https://fusion.dev/helix/components/spatial-ribbon-chart.md): A chart that draws each series as a ribbon in three dimensions, its top following the values, for several series over one set of places. - [Spatial Scatter Chart](https://fusion.dev/helix/components/spatial-scatter-chart.md): A chart that plots each row as a point in three dimensions, for data with three measures. - [Spatial Surface Chart](https://fusion.dev/helix/components/spatial-surface-chart.md): A chart that draws a height over a grid as a surface in three dimensions, for a measure that varies over two others. - [Spatial Treemap](https://fusion.dev/helix/components/spatial-treemap.md): A treemap drawn in three dimensions, each item a block whose area is its size and whose height is a second measure. - [Speed Dial](https://fusion.dev/helix/components/speed-dial.md): A floating button that opens a short list of the main actions on a screen. - [Splitter](https://fusion.dev/helix/components/splitter.md): Two panes and a divider that you can move. - [Stat](https://fusion.dev/helix/components/stat.md): One measurement, with a label that names what it measures. - [Steps](https://fusion.dev/helix/components/steps.md): A sequence of stages that shows which stage the user is on. - [Strands](https://fusion.dev/helix/components/strands.md): A ribbon of fine strands of light, drawn in your theme's colors, in its own box or down a whole page. - [Switch](https://fusion.dev/helix/components/switch.md): A control that turns something on or off. - [Table](https://fusion.dev/helix/components/table.md): A table of data, laid out on a grid. - [Tabs](https://fusion.dev/helix/components/tabs.md): A row of tabs and the panel each one shows. - [Tag](https://fusion.dev/helix/components/tag.md): A short label that adds metadata to content. - [Terminal](https://fusion.dev/helix/components/terminal.md): A frame around a terminal emulator that runs a shell you connect. - [Text](https://fusion.dev/helix/components/text.md): Text, with its HTML element and its type style set separately. - [Textarea](https://fusion.dev/helix/components/textarea.md): A multi-line text field. - [Time Input](https://fusion.dev/helix/components/time-input.md): A field for a time, typed or picked from a list. - [Time Picker](https://fusion.dev/helix/components/time-picker.md): A control for choosing a time from a list or from wheels. - [Timeline](https://fusion.dev/helix/components/timeline.md): A list of events, in the order they happened. - [Toast](https://fusion.dev/helix/components/toast.md): The region that holds toast messages, and the only element that announces them. - [Toggle](https://fusion.dev/helix/components/toggle.md): One option in a toggle group. - [Toolbar](https://fusion.dev/helix/components/toolbar.md): A group of controls that share one tab stop. - [Tooltip](https://fusion.dev/helix/components/tooltip.md): A short text that appears next to an element on hover and focus. - [Tour](https://fusion.dev/helix/components/tour.md): A guided tour of an interface, one stop at a time. - [Tree](https://fusion.dev/helix/components/tree.md): A hierarchy of items, with branches that open and close. - [Trend](https://fusion.dev/helix/components/trend.md): An indicator that shows which way a measurement moved, and whether the change is good. - [Video](https://fusion.dev/helix/components/video.md): A video player with controls drawn by Helix. - [Video Playlist](https://fusion.dev/helix/components/video-playlist.md): A list of video clips that play one after another in a single player. - [Virtual List](https://fusion.dev/helix/components/virtual-list.md): A list that renders only the rows of a long set that are on screen. - [Voice Level](https://fusion.dev/helix/components/voice-level.md): A live level of a voice, drawn as a row of bars or as moving waves. ## Insights - [Insights](https://fusion.dev/insights.md): Articles on what we are building and why. - [Helix ships as one open tier](https://fusion.dev/insights/helix-ships-as-one-open-tier.md): Every Helix component is free and open source. A paid tier would hide components from the AI agents that write code with Helix. - [A palette from one brand color](https://fusion.dev/insights/a-palette-from-one-brand-color.md): Helix computes its palette from one brand color. Contrast follows from how the colors are computed, so no one has to review each pair. - [Why Helix has two tiers](https://fusion.dev/insights/why-helix-has-two-tiers.md): 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. - [Lockstep versioning, one domain at a time](https://fusion.dev/insights/lockstep-per-domain.md): 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.