Website

To access the website style customizer, go to Customize Styles → Website and you will see the editor. Website Preview On the center of the screen you’ll see a live preview of how your site will be displayed. Any changes you make on the customizer, will be applied only to this live preview until you hit “Save”, so you can test everything you want without worrying about breaking your site. Website Style Editor The sidebar contains a panel titled Website styles that lets you configure the overall design of your public site. Here’s what’s available:

• Layouts library
• Branding
• General colors
• Typography
• Forms
• Buttons

At the bottom, there’s a Reset styles button to revert everything back to the default settings.

​

Layout Library

Each template represents a different structure and visual layout for how your newsletter issues, subscription form, and header information are displayed on your site. While the core content stays the same, these templates affect:

• Placement of your title and description
• How your issues are listed (grid, list, cards, etc.)
• Where the signup form appears
• Overall visual hierarchy and layout flow

This allows you to choose a look that fits your brand and audience, from minimalist to media-rich.

​

Branding

This setting allows you to upload your newsletter or personal brand logo to be displayed on your public newsletter website. It will change the logo displayed on the header of your site and over the title of the page. Uploading your logo helps:

• Build brand recognition
• Make your site look more professional
• Create visual consistency across your emails and your site

This is usually one of the first things you’d customize when setting up your newsletter website.

​

General Colors

The General colors section is divided into two groups:

​

Background

• Page color: Affects the entire site’s background. It’s the canvas behind all other content.
• Container color: Affects certain layout blocks or elements, like header, footers and cards.

​

Text colors

• Heading color: Applies to titles (like the newsletter name at the top and the post titles).
• Subtitle color: Used for descriptions or taglines.
• General text color: Default font color for paragraph text.

This panel gives you the power to:

• Align your visual identity with your brand colors
• Make your newsletter site visually appealing and easy to read
• Create contrast between elements for better structure and hierarchy

And since changes show up in real time in the preview, you can experiment until it feels just right.

​

Typography

Typography defines the visual tone of your website. It influences how readable, professional, modern, or playful your site feels. In this panel, you can customize fonts for three main areas:

​

Headings

These are used for titles, section headers, and any large text that needs emphasis.

• Choosing a distinct font here helps establish a visual hierarchy and adds personality to your site.
• Ideal fonts for headings are bold, stylish, and legible at larger sizes.

​

Body

This font is applied to paragraph text, descriptions, and other long-form content.

• You want a font that’s easy to read across devices, especially in smaller sizes.
• Sans-serif fonts like Archivo, Tahoma, or Verdana are often used here for clarity.

​

Buttons

Applies to call-to-action elements like “Subscribe” or “Submit” buttons.

• A consistent font here helps buttons feel like part of your overall design system.
• Can match the body font or be slightly bolder for emphasis.

Typography is one of the most underrated tools in building trust and guiding the reader. Matching your font choices with your brand voice (professional, playful, minimalist, etc.) helps shape how people feel about your newsletter before they even read a word.

​

Forms

​

Background color

Sets the fill color of the input box (where users type their email address).

• Typically white (#ffffff) for clarity
• Can be styled to match your overall site theme for a more integrated look

​

Text color

Controls the color of the actual typed text inside the input field.

• Use dark colors for readability
• Make sure it contrasts well with the background color

​

Placeholder color

Applies to the faded text that appears before the user types (e.g. “Enter your email”).

• Usually a light gray like #cccccc
• Optional but useful for maintaining visual hierarchy and UX clarity

​

Border color

Defines the color of the input field’s border.

• Neutral tones (gray) give a clean, minimalist look
• Colored borders can be used for brand consistency or to stand out visually

Form design directly affects user engagement. A clean, easy-to-read input field makes subscribing feel simple and trustworthy. These options give you just enough flexibility to match your site’s aesthetic without overwhelming the reader with overly stylized input boxes.

​

Buttons

​

Text color

Controls the color of the text inside the button (e.g. “Subscribe”).

• Common choices include white (#ffffff) on a dark background or black on a light background
• Contrast is key, make sure the text is legible against your button background

​

Background color

Sets the fill color of the button itself.

• This is what gives your button its visual weight
• Darker colors like black (#000000) are bold and attention-grabbing
• You can also use a brand accent color to make buttons more recognizable

​

Border width

Defines how thick the border is around the button.

• 0px means the button has no visible border, a flat, modern look
• Increasing the width lets you give the button a more outlined or framed style

​

Border color

Controls the color of the button’s border (only visible if the border width is greater than 0px).

• Typically a light grey like #ebebeb for subtle outlines
• Can match the background for a filled look or contrast for a bordered style

Buttons are action drivers. They’re one of the first things people will interact with, whether subscribing to your newsletter or taking a next step. This panel helps you:

• Ensure your buttons are readable
• Match your site’s aesthetic
• Keep interactions clear and consistent

​

Saving/resetting changes

When you’re happy with your design, click the Save styles button in the upper-right corner of the screen. This will instantly apply your changes to all your existing posts. Every time you make edits and hit save, your site updates immediately. Want to go back to the original look? Just click Reset styles → Default styles in the bottom-right corner. Your site will revert to the default design right away.