Help center

Theme design

Designing themes for Exponential: designs, the override system, styles, assets and accessibility.

130 pages

SVG images SVG in designs and in content: design SVGs you ship yourself, SVG uploads by editors (accepted and sanitized since October 2026, never scaled), what that means for templates, and how to keep SVGs accessible and… Designers Theme design
jQuery in designs When a design needs jQuery, how to load the shipped jQuery 4 with ezjsc::jquery and ezjsc::jqueryUI, jQuery Migrate for older code, local versus CDN loading, the removal of YUI, and when plain JavaScript is the better… Designers Theme design
Favicons and touch icons Shipping a favicon, touch icons and a web app manifest with a design: where the files go, the link tags with ezimage, the /favicon.ico rewrite rule, and a minimal modern set. Designers Theme design
Print stylesheets Making pages print well: print rules in your stylesheet or a separate print file, what to hide, link URLs, page breaks, colors, and the print view mode the kernel offers. Designers Theme design
Responsive design Making an Exponential design work from phones to wide screens and at high zoom: the viewport tag, fluid layout, breakpoints, responsive images through aliases, touch targets, and the widths the project tests at. Designers Theme design
Breakpoints and container widths The breakpoints and content widths admin4 uses (576, 1024, 1280 px, --a4-content-max) as a worked example, how to choose your own for a public design, container queries, and keeping breakpoints in one place. Designers Theme design
Testing at zoom levels Why a design must work at 200% browser zoom, what zoom does to the viewport, how to simulate it at 960 px with device scale 2, what usually breaks, and how the media design fixed its zoom problems. Designers Theme design
Color contrast Contrast targets for text, large text, icons and focus rings, how admin4's tokens document their ratios, checking contrast in light and dark mode, and common traps (placeholder text, text on images, hover states, zebra… Designers Theme design
Keyboard and focus Making every control of a design usable with a keyboard: a visible focus ring with :focus-visible, a logical tab order, real buttons and links, menus and dialogs that manage focus, and admin4's focus rules as an example. Designers Theme design
Landmarks and headings The page structure screen reader users navigate by: landmark elements and roles in the pagelayout, one main region, labeled navigation, one h1 per page and heading levels in view templates and layout blocks. Designers Theme design
Skip links The skip link that lets keyboard users jump past the header to the content: markup in the pagelayout, CSS that shows it on focus, translated text, and the examples in admin4 and the media design. Designers Theme design
Accessible forms Forms a design draws (search, sign-in, feedback and information collection, user registration, edit pages): labels tied to fields, the ids the datatype edit templates give fields, required marks, error summaries and… Designers Theme design
Reduced motion Respecting visitors who ask for less motion: the prefers-reduced-motion media query, which animations to turn off, sliders and autoplay, smooth scrolling, and how admin4 does it. Designers Theme design
Design tokens Building a design on tokens (CSS custom properties) for color, space, size, radius and fonts: naming, a starter token set with light and dark values, using tokens in rules, and the admin4 token rules as a model. Designers Theme design
Dark mode with prefers-color-scheme The simplest dark mode for a public design: dark token values in a prefers-color-scheme media query, combined with an explicit light or dark choice when a switch is added, plus images, color-scheme and testing. Designers Theme design
The theme toggle and the pre-paint guard A light, dark and system switch that never flashes the wrong theme: a small head script file that sets the theme attribute before the first paint (CSP-safe, no inline code), the button markup, remembering the choice… Designers Theme design
admin4 tokens The --a4-* design tokens of the administration (accent, neutrals, states, charts, depth, radius, spacing, controls, layout, type, stacking layers), how they change in dark mode, and the rules for using and adding them. DevelopersDesigners Theme design
admin4 components The shared .a4-* component classes of the administration (page scope, cards, buttons, toolbar, filter bar, forms, tables, tags and badges, notices, folding, steps, icons, utilities), with a small example, and why to use… DevelopersDesigners Theme design
admin4 module stylesheets Where CSS goes when the shared components are not enough: the kernel's module stylesheets (setup, content, people, structure, workflow, help) loaded through AdminComponentCSSFileList, and an extension's own admin… DevelopersDesigners Theme design
The admin styling rules test What tests/tests/design/AdminStylingRulesTest.php checks in every administration design (no inline CSS, tokens only, dark values, focus outlines, stacking layers, identical component copies), how to run it, and how to… DevelopersDesigners Theme design

Documentation license

This documentation is free documentation, licensed under the GNU Free Documentation License 1.3 or later.

Exponential Copyright © 1998-2026 Exponential Foundation and 7x