Announcing Vortex Design System

The initial release of Vortex: design tokens, core components, layout primitives, and icons.

We're excited to announce the first release of Vortex Design System, v0.0.0!

This release introduces the foundations for building consistent, accessible interfaces: shared design tokens, React components, layout primitives, and icons. These building blocks bring design and development together around the same visual language.

Design tokens

The initial token system covers the design decisions used throughout Vortex:

• Border — Radius and width tokens for consistent edge styling.
• Breakpoints — Responsive breakpoints for different screen sizes.
• Color — Semantic colors with light and dark mode support.
• Font — Font families and a shared type scale.
• Height — Height values for consistent sizing.
• Motion — Animation and transition timing.
• Space — Spacing for layouts and component padding.
• Typography — Text styles for headings and body content.
• Width — Width values for consistent element sizing.
• Z-index — A shared layering scale.

Core components

The first components provide essential controls for applications:

• Button — Primary, secondary, and tertiary variants with multiple interaction states.
• Link — Accessible links with consistent styling.

Layout primitives

Use these primitives to compose layouts and present content:

• Stack — Arrange elements with consistent spacing.
• Icon — Display icons with size and color controls.
• Text — Apply semantic typography styles.

Icons

Vortex Icons provides a shared icon library with consistent styling and support for multiple sizes.

Availability at launch

This initial release was available for internal use only. Public availability and open-source licensing were being evaluated for future releases.