# Themes Design Requirements

### Purpose

This document defines the design must-have requirements for the Lightspeed themes. The requirements ensure that themes are designed not only ‘as is’, as demo showcases, but for the real merchants' use and adaptation. In other words, they are:

* Easy to brand and customize — many merchants only have a logo, a preferred mood, or a few product photos. The system should make branding simple, even without design experience.
* Resilient with imperfect content — most merchants upload phone-shot photos, uneven descriptions, or incomplete text. Themes must remain stable, clean, and trustworthy regardless.

{% hint style="info" %}
Use [Checklist for public Site themes](/site-themes/launch-site-themes/checklist-for-public-site-themes.md) to ensure your theme meets the requirements
{% endhint %}

### Image Quality & Image Tolerance

#### Demo images

All images, graphics, and icons used in the themes must be sharp, properly sized, and visually aligned to each other (e.g. have similar colors matching the template style). Avoid low-quality, stretched, pixelated, or clipart-level visuals.

#### Merchants’ content resilience

The layout must work well with various content: mixed lighting and backgrounds, inconsistent product photography, multiple image proportions (1:1, 3:4, 16:9), photos taken on the mobile devices.\
Product cards and media sections must remain visually stable regardless of input. The design should not depend on perfect professional photo materials and should look good even with unprofessional, daily photos.

### Text Flexibility & CTA Standards

#### Texts’ length

Layouts must support text of different length: long and short headlines (1 or 2 lines), short and long CTA labels, minimal or detailed product descriptions. There should be no overflow, clipping, spacing misalignments, or broken layouts because of the difference in the texts’ length.

For example, if there are similar sections/elements and there is different spacing in them between the content chunks, it is more likely that something went wrong, or, there shouldn't be any cases when you fill the text input with a larger text and the layouts get distorted and broken.

#### Demo Texts

Demo content sets an example of structure and tone. It should be: neutral and broadly adaptable, meaningful but easily replaceable.

Avoid: Lorem Ipsum, niche-specific references (“your bakery”, “your vape brand”), overly emotional or aggressive language, jokes, metaphors, or strong personality writing. You can try to add invented stories or slogans.

#### Content hierarchy

Clear heading distinction (using H1, H2, H3 carefully and stably) and short, purposeful paragraphs should demonstrate good content structure for merchants.

#### CTAs principles

CTAs must follow two principles

1. They are action-based (“Shop Now”, “View Collection”, “Add to Cart”).
2. Similar actions use consistent wording across the theme (e.g if you use Shop Now, it should be Shop Now all the way).
3. Avoid vague labels such as “Click Here”.

### Accessibility

All themes must follow [WCAG 2.1](https://www.w3.org/TR/WCAG22/) AA contrast standards. To ensure compliance, use the [tools approved by the W3C consortium](https://www.w3.org/WAI/test-evaluate/tools/list/).

### Verticals Universality

Design for a specific vertical, but try not to lock the theme into it. A strong theme can be adapted across different businesses without breaking. The goal is not to perfectly fit every vertical, but to ensure the structure and aesthetic are flexible enough for different businesses: lifestyle and technical goods, emotional and benefit-driven descriptions.

Checks if the template will fit verticals flexibly:

* Content adaptability:\
  Supports various types of descriptions, benefits, CTAs, feature blocks.
* Photo tolerance:\
  Remains usable with different backgrounds, photo styles, and content quality. Keep in mind that the merchants may not have high quality images. The theme should not be photo-centric, and the design should not only rely on the photo.

### Style Cohesion

#### Overall cohesion

Spacing, typography, and composition should be applied consistently and with clear intent. Consistency in these details contributes directly to overall visual cohesion.

Avoid: 

* Arbitrary spacings/gaps between sections/elements with no clear intent to support design language
* Inconsistent font types and sizes. In general, no more than 2 fonts/types are recommended to use
* Icons from different sets and with different color palettes
* Inconsistent button styles (primary + secondary)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.ecwid.com/site-themes/launch-site-themes/themes-design-requirements.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.