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

The Colors tab in the Brand Style modal showing brand colors, text colors, and button 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.

Property	Description	Example
Primary	Your main brand color, used for primary accents and emphasis	`#000000` (black)
Secondary	A complementary color for secondary elements and contrasts	`#000000`
Tertiary	A third color for additional variety and accent elements	`#000000`

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.

Property	Description	Example
Primary background	The main page background color	`#ffffff` (white)
Elevated background	A slightly different shade used for alternating sections, cards, and elevated elements	`#f6f6f6` (light gray)

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

Property	Description	Example
Headline color	Color for all headings (H1-H6)	`#000000` (black)
Body text color	Color for paragraphs, labels, and descriptions	`#000000` (black)

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

Property	Description	Example
Icon color	Color for icons in benefit cards, feature lists, and other icon-based sections	`#000000` (black)
Star icon color	Color specifically for star rating icons in testimonials and reviews	`#f4ba10` (gold)

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.

Property	Description	Example
Button color	Background color of buttons in their default state	`#000000` (black)
Button hover color	Background color when a user hovers over the button	`#323232` (dark gray)
Button text color	Text color of the button label in its default state	`#ffffff` (white)
Button text hover color	Text color of the button label on hover	`#ffffff` (white)
Button border color	Color of the button border (when border width is greater than 0)	`#000000` (black)
Button border width	Width of the button border in pixels	`0px` (no border)

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

The Layout tab showing container width, padding, and border radius settings.

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

Max Width

Property	Description	Example
Max width (desktop)	Maximum content width on desktop screens	`1440px`

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

Property	Description	Example
Desktop horizontal padding	Left/right padding on desktop	`32px`
Mobile horizontal padding	Left/right padding on mobile	`16px`

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

Vertical Padding

Property	Description	Example
Desktop vertical padding	Top/bottom padding within each section on desktop	`64px`
Mobile vertical padding	Top/bottom padding within each section on mobile	`32px`

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.

Property	Description	Example
Standard radius	Radius for cards, containers, images, and large elements	`16px`
Small radius	Radius for smaller elements like tags, badges, and chips	`8px`
Button radius	Radius for buttons specifically	`8px`

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.

Property	Description	Example
Button horizontal padding	Left/right padding inside buttons	`24px`
Button vertical padding	Top/bottom padding inside buttons	`12px`

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.