Announcing Vortex Design System

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

The first release of Vortex Design System, v0.0.0. It sets the foundations for consistent, accessible interfaces: shared design tokens, React components, layout primitives, and icons.

New features

Design tokens

• 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.

Components

• Button: primary, secondary, and tertiary variants with multiple interaction states.
• Link: accessible links with consistent styling.

Layout primitives

• Stack: arrange elements with consistent spacing.
• Icon: display icons with size and color controls.
• Text: apply semantic typography styles.

Hooks

• Added useIsomorphicLayoutEffect for layout effects that support server rendering.
• Added useRTL to read and change the page's reading direction.
• Added useScrollLock to pause scrolling on a page or container.
• Added useSwitch to manage an on or off state.

Icons

• Vortex Icons: a shared icon library with consistent styling and multiple sizes.

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