Space Design system

Space Design System is a modern, component-driven Drupal theme built to accelerate frontend development with a scalable and consistent design architecture. It is optimized for performance, accessibility, and seamless integration with modern frontend workflows.

Version Guide

1.x (Token-Based Approach)

Use this version if you prefer a design-token-driven workflow integrated with Figma.

Highlights:

• Tailwind CSS v3
• Figma-based design tokens (colors, typography, spacing)
• UI Patterns(8.x-1.10) support for flexible field mapping
• Storybook for component previews
• Compatible with Drupal 8, 9, 10, and 11

👉 Recommended for existing projects using design tokens

2.x (Next Gen – Theme Settings Approach)

Use this version if you want a more flexible, UI-driven configuration without dependency on design tokens.

Highlights:

• Tailwind CSS v4
• Theme settings via Appearance UI
• No dependency on Figma tokens
• Components redesigned to work with theme settings
• Improved flexibility and customization
• Component-level README documentation
• Compatible with Drupal 10 and 11

⚠️ Not backward compatible with 1.x

👉 Recommended for new projects and future-ready implementations

Common Features (Both Versions)

• Component-driven architecture (Atomic design)
• Single Directory Components (SDC) with variations
• Works with Twig, Layout Builder, Experience Builder, blocks, paragraphs, and views
• Predefined Drupal regions
• Accessibility-focused components

Recommendation

• Use 1.x → if your project relies on Figma tokens
• Use 2.x → for new builds with flexible theme settings and Tailwind v4

See the demo video here: https://lnkd.in/p/dDYnQwFX