Maya

Maya is a Drupal theme that implements Maya, the design system San Francisco Digital Services built for SF.gov. SF.gov runs Maya on Wagtail and React. This theme brings the same layout, typography, colors and home page to Drupal 10 and 11.

Documentation

Features

• Design tokens from SF.gov's design system: the full color palette, the type scale in Roboto Flex and Roboto Slab, spacing and breakpoints, available as Tailwind CSS classes.
• SF.gov's header: main menu dropdowns on desktop, an accordion menu on phones, search, and a language switcher that shows each language in its own script.
• Front page layout: a spotlight region and alternating full-width sections. Menu blocks in those sections render as service tiles, topic cards or quick links, depending on whether each menu link has a description.
• Body text, tables, forms, status messages, tabs, pager, breadcrumbs, search results and content teasers styled to match SF.gov.
• Footer with link columns, social network icons and an optional San Francisco skyline.
• Single Directory Components: maya:tile, maya:spotlight and maya:band.
• Body text in CKEditor 5 uses the same styles as the site.
• No contributed module dependencies. Compiled CSS is included; Node.js is only needed to change styles.

Installation

composer require drupal/maya
drush theme:enable maya
drush config:set system.theme default maya

Enabling the theme places its default blocks. See Installation and Home page for setup.

Requirements

• Drupal 10.3 or 11

Credits

Maya was designed by San Francisco Digital Services for SF.gov. The design tokens, tile and spotlight patterns, social icons and footer skyline come from SF.gov's design system and are used with permission. Development is supported by FivePaths.