How to choose colors, fonts, and spacing for your store

The short answer

Choose one restrained visual system before styling pages. Assign every color a role, define a type scale, and use a short spacing scale instead of choosing gaps by eye. Then apply those rules to the homepage, categories, product cards, product pages, and cart. Check important text and interface color pairs with a contrast tool. Your brand supplies the rules; the storefront should express them consistently.

Start with brand inputs, not swatches

A visual system cannot repair an unclear brand direction. Before opening a color picker, collect the few inputs that should constrain the design:

• approved logo files and any size or clear-space rules;
• existing colors, your font by name, the weights you use, and fallbacks;
• representative product and lifestyle photography;
• two or three annotated visual references;
• practical adjectives with opposites, such as “warm, not rustic”;
• the audience, price position, product character, and main shopping task.

Without formal brand guidelines, write a one-page working brief. “Quiet, tactile, and warm; photography leads; no glossy gradients” gives more direction than “premium and modern.” The brand-asset preparation guide explains how to organize source files and usage rights.

Separate brand recognition from interface function. A packaging color may be tiring as body text; a pale signature color may fail as a button label. Give each ingredient a job it can perform.

Give every color a functional role

Start with neutral page, surface, text, and border colors. Add one main action color and only the status colors the store genuinely needs. Names such as “forest” and “oat” are helpful in conversation; role names such as text-primary and action-primary prevent misuse in implementation.

The following palette is illustrative, not a recommendation for every brand. Its values show how to document roles and permitted combinations.

Color must not be the sole carrier of information. Pair an invalid field with an error message and an icon or other visible cue; pair a sale state with words and a price treatment. WCAG 2.2’s Use of Color criterion explains why color alone is insufficient for conveying information or prompting a response.

Check contrast as a recorded decision

For WCAG 2.2 Level AA, the Contrast (Minimum) criterion sets a contrast ratio of at least 4.5:1 for ordinary text and 3:1 for large-scale text, with stated exceptions. The Non-text Contrast criterion addresses visual information needed to identify interface components and states, generally at 3:1 against adjacent colors.

Keep a record like this beside the palette. The ratios below are illustrative calculations for the example values.

Record the component, state, font size and weight, colors, ratio, checker, date, and decision. Test hover, focus, selected, disabled, error, sale, and image-overlay states too. Keyboard access, focus order, names, semantics, zoom, motion, and error handling need separate review.

Build a type hierarchy from content jobs

Choose type by reading conditions, not by how impressive a specimen looks. A useful body face stays clear at small sizes and includes the weights you will serve. One family with careful scale and weight is often enough.

Check the font’s character set and weights against your real product names and prices, and look at its fallback too: line breaks, button widths, prices, and card heights can change.

Here is an illustrative type specimen and scale. Values are starting points, not universal requirements.

Test the scale with real product names, prices, delivery lines, and unusually long content. Position, weight, spacing, and wording should reinforce size. On mobile, reduce display sizes while preserving the role order. The mobile e-commerce checklist includes text-resize and real-device checks.

Use a spacing scale, then allow deliberate exceptions

Spacing explains which elements belong together. Random gaps make a store feel inconsistent even when its colors and fonts match. Choose a base unit and a short scale, then attach common uses to it.

The following illustrative spacing sheet uses a 4px base:

Use optical judgment after applying the scale. A logo may need more apparent space than its box suggests. Exceptions should be named and rare, not silent one-off values. Test narrow screens before compressing gaps around controls.

Apply the system across the shopping path

A visual rule matters only when it survives real content and states.

Homepage. Use the display style sparingly, keep one dominant action treatment, and let spacing reveal the intended order. The homepage design guide helps determine that hierarchy before visual polish.

Category and product cards. Keep image ratios, name styles, price emphasis, gaps, and card padding consistent enough to compare products. Test the longest name and widest price. Accent treatments must not outrank the product itself. Use the detailed product-card design guide when defining the listing component.

Product page. Preserve the same text and action roles while allowing more room for product detail. Keep specifications and delivery notes clearly related to the purchase action.

Cart. Familiarity matters more than novelty. The primary checkout action should look like the same class of action used elsewhere. Product identity, quantity, price, subtotal, errors, and removal controls should remain distinct without depending on color alone. Test empty, long-name, error, and discount states that the store actually supports.

Review screenshots of all four surfaces side by side. Circle unexplained changes in button color, heading role, card padding, borders, or spacing. Make them consistent or document why the exception helps.

Turn the rules into a storefront direction

In Setka, your colors, font, references, tone, and catalog context become one store-wide creative and structural direction, used to generate the homepage, category and product experiences, shared navigation, and cart. Checkout is in the same commerce platform. That is more useful than applying a palette to an isolated template: the same brief can shape the surfaces that form the buying path.

The merchant still chooses the brand rules and reviews the output. Open a page, describe a targeted change, refine exact wording directly where needed, and preview the next storefront version before publishing. Setka keeps storefront presentation and commerce in one system, so the merchant does not have a separate generated theme-code layer to maintain. Name your fonts, and Setka uses them. Supply approved logos and images as part of the brand direction; Setka places them in the store’s image slots.

Do not solve every page independently. Define one compact visual system: approved inputs, color roles, contrast records, type roles, spacing tokens, and named exceptions. Apply it to representative homepage, category, product-card, product-page, and cart content; then generate it in Setka, preview the path, and refine what fails before you publish.