Colors and Layout

The Colors and Spacing tabs in the Brand Style modal control the visual foundation of your landing pages. Colors set the mood and reinforce your brand identity, while layout and spacing properties ensure your content is properly structured and readable across all devices.

Colors

Brand Colors

Brand colors are your primary palette - the signature colors that define your brand identity. They are used throughout sections for accents, highlights, borders, and decorative elements.

Most e-commerce brands use 2-3 brand colors. Your primary color should be the most recognizable part of your brand (think AG1's green or Ritual's navy blue). The secondary and tertiary colors provide contrast and variety.

Background Colors

Background colors define the canvas behind your content. Using two background tiers creates visual depth and helps separate sections.

The elevated background creates subtle visual separation between sections without harsh dividers. For example, a white primary background with a light gray elevated background makes alternating sections visually distinct.

Text Colors

Ensure sufficient contrast between your text colors and background colors. Dark text on a light background (or light text on a dark background) is essential for readability. A common pattern is near-black text (#1a1a1a or #2d2926) on white, which is slightly softer than pure black.

Icon Colors

The star icon color is separate from the general icon color because star ratings are a common element that benefits from a distinctive, warm color (typically gold or yellow) regardless of your brand palette.

Button Colors

Button styling is a critical part of your brand style since call-to-action buttons are the primary conversion element on your landing page.

A popular conversion optimization technique is making your button hover state visually different enough that users notice the interactive feedback. Some brands invert colors on hover (e.g., AG1 changes from dark green to lime green), while others simply darken or lighten the background.

Button border examples:

• No border (0px): Clean, modern look. Most common style.

• Thin border (1-2px): Adds definition, popular with brands like Verb Energy that use light button backgrounds.

• Thick border (3px+): Bold, attention-grabbing. Use sparingly.

Layout

Layout properties control how your page content is structured and spaced.

Max Width

This sets the maximum width of your page content area. Content will never stretch wider than this value, even on large monitors. The content is centered horizontally within the browser window.

• 1440px - Standard width, works well for most landing pages

• 1200px - Narrower, more focused reading experience

• 1600px+ - Very wide, good for image-heavy layouts

Padding

Padding controls the space between the edge of the content area and the section content. Desktop and mobile have independent padding values because screens have very different dimensions.

Horizontal Padding

Horizontal padding prevents content from touching the screen edges. On mobile, less padding is needed since screen space is at a premium.

Vertical Padding

Vertical padding controls the breathing room above and below content within each section. Generous vertical padding (64px+) creates an airy, premium feel. Tighter padding (32-40px) creates a more compact, information-dense layout.

Vertical padding is applied to each section individually, so the total vertical space between two sections is the bottom padding of the first section plus the top padding of the next section.

Spacing and Border Radius

Border Radius

Border radius controls how rounded the corners are on various elements.

Common radius strategies:

• Sharp corners (0px): Bold, editorial look. Used by brands like MUD/WTR and Verb Energy.

• Subtle rounding (4-8px): Modern, professional. The most common choice.

• Medium rounding (12-16px): Friendly, approachable. Good for wellness and lifestyle brands.

• Pill shape (50px): Fully rounded buttons and tags. Popular for health and beauty brands like Ritual and AG1.

Button radius and standard radius do not need to match. Many brands use pill-shaped buttons (50px radius) with moderately rounded cards (16px radius). This makes buttons visually distinct from other elements.

Button Padding

Button padding controls the internal spacing of buttons - the distance between the button text and the button edges.

Larger padding creates bigger, more prominent buttons. Smaller padding creates compact, inline-style buttons. The defaults (24px horizontal, 12px vertical) produce a well-proportioned button for most designs.

Colors and Layout Quick Reference

Here is a complete summary of all color and layout properties:

All Color Properties

All Layout Properties