Theme designers: start here
This page is for theme designers: visual, interface and product designers who design the look and behavior of sites built with Exponential, whether or not they write code. It explains what this section adds, and gives a task-to-page index: for each task a theme designer has, the page to read.
Note
The designer help already covers the technical side of themes in depth: designs and the cascade, templates, stylesheets and the packer, theme extensions, distribution, selling and maintenance. This section does not repeat it. It covers the design work around it (content, foundations, components, page types, process and quality) and links to the designer help wherever the build starts.
Contents
- What this section adds
- Task-to-page index
- The pages of this section
- Rules every theme design follows
- Pages from other audiences you will use
- Finding these pages again
What this section adds
| You want to | Read |
|---|---|
| understand how designing for Exponential differs | How Exponential themes differ |
| plan your first day on a project | Your first day as a theme designer |
| pick what to read next | Reading paths for theme designers |
| run a project from sketch to theme | From mockup to theme |
Task-to-page index
Understand the system
| Task | Page |
|---|---|
| Learn what a design and the design cascade are | What a design is, The design cascade |
| See which designs a siteaccess uses | Designs and siteaccesses |
| Look at the shipped themes | The themes that ship with Exponential |
| Choose a starting theme | Choosing a starting theme |
| Find which template drew a part of a page | Tools for theme designers, Template path comments |
Plan the design around content
| Task | Page |
|---|---|
| Connect mockups to classes and fields | Mapping a design to content classes |
| Design with real and extreme content | Designing with real content |
| Make a design editor-proof | Designing for editors |
| Decide the views of each class | Designing view modes |
| Design lists, grids and cards | Designing content listings and cards |
| Design the front page | Designing the front page |
Build the foundations
| Task | Page |
|---|---|
| Set a type scale | Type scale; fonts: Fonts in a design |
| Set spacing and a grid | Spacing and grid; widths: Breakpoints and container widths |
| Build a palette with dark values | Color palettes and ramps, Color contrast |
| Turn design tool variables into tokens | From design tool variables to CSS custom properties, Design tokens |
| Plan dark mode | Dark mode overview, Tutorial: add dark mode |
Design components and pages
| Task | Page |
|---|---|
| Keep a component inventory | Component inventory |
| Show components live on the site | Building a style guide page |
| Design hover, focus, error and other states | Designing interactive states |
| Design the header and footer | Designing headers and footers |
| Design menus and breadcrumbs | Designing navigation and menus |
| Design search | Designing search results |
| Design empty states and error pages | Designing empty and error states |
| Design forms | Designing forms, Accessible forms |
| Design sign-in and account pages | Designing login and user pages |
| Design blocks for the layouts editor | Designing layout blocks, Layouts for designers |
| Specify motion and behavior | Motion and interaction, Reduced motion |
Images, sharing and mail
| Task | Page |
|---|---|
| Plan image sizes and crops | Designing image crops and art direction, Image aliases |
| Design share previews | Social share and metadata images |
| Design newsletter mails | Designing newsletter emails |
| Icons, SVG and favicons | Icons in a design, SVG images, Favicons and touch icons |
Languages, brands and quality
| Task | Page |
|---|---|
| Design for several languages and right to left | Designing for many languages, Right-to-left designs |
| Design for several brands on one installation | Designing for several brands in multisite |
| Design within a performance budget | Designing for performance budgets |
| Design accessibly | Accessibility basics for themes, Keyboard and focus |
Work with people
| Task | Page |
|---|---|
| Split work with developers | Working with developers |
| Run reviews and get sign-off | Working with clients and reviews |
| Hand a design over | Handoff checklist |
| Review a design | Theme design review checklist |
| Check the built theme | Design QA checklist, Checklist: theme launch |
| Redesign a running site | Redesigning an existing site |
Build, publish and earn
| Task | Page |
|---|---|
| Build the theme yourself | Tutorial: create a theme extension, Tutorial: port a static HTML design |
| Package a theme | Theme extensions: start here |
| Publish a theme | Distributing a theme: start here |
| Maintain a theme | The maintenance life cycle: start here |
| Sell themes and services | Selling themes and services: start here |
| Build a portfolio and find work | Building a portfolio and getting work |
| Design for Exponential Platform DXP | Themes for Exponential Platform |
| Look up a term or a quick answer | Theme designer glossary, Theme designer FAQ |
The pages of this section
Orientation: How Exponential themes differ · Your first day · Reading paths · From mockup to theme
Content: Mapping to content classes · Real content · Designing for editors · View modes · Listings and cards · Front page
Foundations and components: Component inventory · Style guide page · Type scale · Spacing and grid · Color palettes and ramps · Design tool variables to CSS · Interactive states
Page types: Headers and footers · Navigation · Search results · Empty and error states · Forms · Login and user pages · Layout blocks
Images, mail, motion, scale: Image crops · Share images · Newsletter mails · Motion · Performance budgets · Many languages · Several brands
Work and quality: Working with developers · Clients and reviews · Redesigning a site · Tools · Handoff checklist · Design QA checklist · Review checklist
Beyond: Exponential Platform themes · Portfolio and work · FAQ · Glossary
Rules every theme design follows
These are the project's rules for designs (Designers: start here):
- Your design lives in your own extension; shipped designs are never edited, only overridden.
- No
<style>blocks, nostyle=""attributes, no inline scripts oron*=handlers. - Colors, spacing, radius and fonts from tokens, with a dark value for every color.
- Every printed value washed, every interface text translatable.
- Tested in light and dark, at 1440 px, at 960 px with 200% zoom and at 375 px, with the keyboard.
- No
?v=version queries on asset links.
Pages from other audiences you will use
| Audience | Start page | What you use it for |
|---|---|---|
| Designers | Designers: start here | the technical side of themes: cascade, templates, CSS, packaging, release |
| Theme developers (extension development, part 6) | Part 6: Theme developers | themes as extensions, from a developer's view |
| Trainers | Theme design: course overview | exercises for everything in the designer help |
| CMS developers | Designing a content model | how classes and fields are decided |
| DXP developers | DXP developers: start here | Twig themes on Exponential Platform |
| Website creators | Metadata and social sharing | page metadata and share tags |
| Partners | Creative partners | the creative partner profile as published |
Finding these pages again
Every page of this section has the audience theme-designer; search the help for "theme designer". This start page
is featured in the help index.
Related pages
- Designers: start here
- Getting started
- The layouts editor
- Free documentation: this page is free to copy, translate and improve under the GNU FDL 1.3.
Become an Exponential Partner
Partners share their information, provide funding, contribute back and develop the products with us, and that is how Exponential grows. A partner website and dashboard are planned for mid-2027: please become a partner today to speed up our growth rate and land new features faster.