Spectrum 2 Component Demo

Adobe Spectrum 2 Design System

This page demonstrates the integration of Adobe Spectrum 2 components into an Astro Starlight documentation site. Spectrum 2 is Adobe’s next-generation design system, featuring enhanced accessibility, modern aesthetics, and a comprehensive component library.

Buttons

Spectrum 2 provides multiple button variants to suit different use cases:

Cards

Cards are great for grouping related content:

Welcome to Spectrum 2

Adobe's next-generation design system brings modern, accessible, and beautiful components to your applications.

Built for Scale

Spectrum 2 is designed to work across 100+ Adobe applications, ensuring consistency and quality at every level.

Accessibility First

Enhanced contrast, support for color vision deficiencies, and improved attention hierarchy make Spectrum 2 inclusive by design.

Interactive Form

Here’s an example of a functional form built with Spectrum 2 components:

Name

Message

Subscribe to newsletter

Features

🎨 Modern Design Language

Friendlier icons
Bolder typography
Brighter, more expressive colors
Softer border radius

♿ Enhanced Accessibility

Dynamic contrast and brightness
Support for various color vision deficiencies
Improved visual hierarchy
WCAG compliance

🔧 Developer Experience

React components with TypeScript support
Build-time styling via macros
Flexible theming system
Comprehensive documentation

🚀 Performance

Optimized bundle sizes
Tree-shakeable components
CSS-in-JS with zero runtime overhead
Works seamlessly with Astro Islands

Integration Details

This demo uses:

@react-spectrum/s2 - React component library
unplugin-parcel-macros - Build-time styling
@astrojs/react - React integration for Astro
Astro Islands - Selective hydration for optimal performance

Learn More

Note: This is a beta preview of Spectrum 2. Some components and APIs may change before the final release.