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
• Compatible with Drupal 8, 9, 10, and 11

👉 Recommended for existing projects using design tokens

→ Demo

2.x (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
• Four color presets
• Live preview for theme customization
• Device switcher support (Desktop, iPad, Mobile)
• Light/Dark mode toggle
• RTL (right-to-left) support
• Space DS Theme Settings tour guide
• No dependency on Figma tokens
• Components redesigned to work with theme settings
• Improved flexibility and customization
• Component-level README documentation
• Designer Guide documentation
• Compatible with Drupal 10 and 11

⚠️ Not backward compatible with 1.x

👉 Recommended for new projects and future-ready implementations

→ Demo 1
→ Demo 2

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
• Storybook support for component previews
• Accessibility-focused components

How to Think About 1.x vs 2.x

Instead of treating 2.x as a “next version” of 1.x, it’s more accurate to see them as two different approaches:

• 1.x → Design-first workflow (Figma + tokens, more structured, system-driven)
• 2.x → Configuration-first workflow (Drupal UI-driven, faster and more flexible)

Both solve the same problem, just in different ways depending on how your team prefers to work.

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