Kiseki Theme
Kiseki Theme is a Drupal theme built with modern frontend technologies and atomic design principles, focusing on composable components, strong accessibility, and a maintainable workflow. It offers reusable patterns and integrates with other Kiseki projects for a complete site setup.
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
- Place the theme in
web/themes/custom/kiseki_theme - Enable the required Drupal modules
- Run
npm installin the theme directory - Run
npm run build - Enable the theme and set it as the default theme
- 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.