Space Design system
Space Design System is a component-driven Drupal theme designed for fast and consistent frontend development. It offers two approaches: one integrated with Figma design tokens and Tailwind CSS for a structured workflow, and another that uses Drupal's theme settings for greater UI flexibility with Tailwind CSS. Both versions focus on performance, accessibility, and compatibility with various Drupal content-building tools.
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
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
- 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
- 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
- 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