Webtheme

Webtheme is the theme of the Webship.co portal. It is generated from UI Suite UIkit, so it uses the same UIkit components and is ready for Display Builder, with the Webship colors and design.

Like UI Suite UIkit, it follows the UI Suite initiative: Single Directory Components, UI Patterns, UI Skins, UI Styles and UI Icons.

Features

• The Webship.co look: a white header, Zen Maru Gothic titles, the Webship blue as an edge-to-edge band with its text on a card, and deep blue buttons with white text.
• UIkit components as Single Directory Components, ready for Display Builder page layouts, entity displays and views, with Page, Header, Footer and Video components.
• Every design token is a UI Skins variable with light and dark values, and a color mode setting: light, dark, or follow the operating system.
• Fonts hosted in the theme: Zen Maru Gothic, Atkinson Hyperlegible Next and Mono, and Noto Sans Arabic. No request to a font service.
• Sign-in screens for log in, register, password reset and log out, with six layouts and options for the site header and footer.
• Its own names for every token, color mode and icon pack, so it never clashes with UIkit Admin or UI Suite UIkit on the same site.
• HTMX navigation that loads the page without a full reload.
• WCAG 2.2 Level AAA in light and dark mode, checked by webship-js tests.

Coming next

• A theme settings page grouped in sections, with visual pickers.

Used by

• The Webship Portal site template.
• Pairs with UIkit Admin for the back office.

Webtheme design system in Figma