Kiseki Theme

Kiseki Theme

Kiseki Theme is a Drupal 10/11 theme built with Single Directory Components (SDC), atomic design principles, SCSS, and design tokens. It is intended for teams that want a composable component library, strong accessibility defaults, and a modern front-end workflow that is practical to maintain over time.

The theme is designed to work alongside the Kiseki Admin Experience project and can be installed and configured through the Kiseki Theme Setup recipe for a more complete, repeatable site setup.

Key features

• Single Directory Components organised as atoms, molecules, and organisms
• Accessibility-first component authoring with semantic HTML, ARIA support, keyboard navigation, and colour contrast considerations
• Reusable page-building patterns powered by Paragraphs and SDC Display
• Design token workflow using Style Dictionary
• Playwright-based visual regression and accessibility testing
• Responsive layouts and reusable UI patterns including banners, sliders, cards, timelines, accordions, stats, and webform sections

Styleguide examples:

Requirements

• Drupal 10 or Drupal 11
• Media
• Paragraphs
• No Markup
• SDC Display
• Node.js and npm for asset builds and test runs

Installation overview

1. Place the theme in web/themes/custom/kiseki_theme
2. Enable the required Drupal modules
3. Run npm install in the theme directory
4. Run npm run build
5. Enable the theme and set it as the default theme
6. Optionally apply the Kiseki Theme Setup recipe to configure the theme stack faster

Why use Kiseki Theme?

Kiseki Theme is designed to support both implementation and long-term maintenance. It includes compiled assets, component demos, and a styleguide-oriented workflow so teams can build, test, and evolve a Drupal front end with more consistency and less duplication. When combined with Kiseki Admin Experience and the Kiseki Theme Setup recipe, it provides a more complete end-to-end experience for site builders and front-end teams.