Skip to main content

Match my LaunchNotes page to my brand

Customize your LaunchNotes page design so it looks and feels like a natural extension of your product and brand.

Chelsea Davis avatar
Written by Chelsea Davis
Updated today

Summary

You can make your LaunchNotes page match your brand by uploading your logo, selecting your brand colors and customizing the layout with CSS. Go to Settings > Customize page > Look & feel tab to get started.

Inspiration pages from our customers

Steps to brand your page

1. Add your logo and colors

  1. Go to Settings > Customize page > Look & feel tab

  2. Upload your logo to appear in the main navigation

  3. Upload your favicon for the browser tab

  4. Choose a Design Theme from preset color schemes, or select Custom to choose your brand’s colors.

To better understand which colors are applied to each part of the page, visit the article Look & feel: accent, surface, and type colors

2. Customize beyond the basics (available on Premium plan)

For more control over your page's appearance, you can use our advanced customization tools:

  • Custom CSS

    Add your own styles to match your exact brand guidelines. The CSS you add will be loaded on your public page.

  • Custom Header

    Replace the default navigation with your own header to match your marketing website—including your navigation menus, CTAs, and custom images.

  • Custom Footer

    Add a footer that matches your marketing website for a seamless brand experience.

  • Custom Index Hero

    Redesign the hero section at the top of your page's index. (Note: This customization appears on the main index only, not on individual announcement pages.)

  • Custom Head

    Add inline JavaScript, link external assets, or insert analytics tracking codes for greater control over your page functionality.

Using the Liquid HTML editor

Our custom sections (Header, Footer, Index Hero) use the Liquid templating language, giving you dynamic control over your page content.

Available variables

All of the below tags can be used using double parens: {{ tag }}

Page content:

  • subscribe_button - Renders the Subscribe to updates button

  • project.name - Your project name

  • project.heading - Your page heading

  • project.subheading - Your page sub-heading (rendered as markdown)

  • project.public_permalink - Your public page URL

  • project.slug - Your URL slug

Brand colors:

  • project.primary_color

  • project.secondary_color

  • project.primary_text_color

  • project.secondary_text_color

  • project.white_color

  • project.off_white_color

  • project.light_gray_color

  • project.gray_color

For more details, view the Liquid documentation.

Notes & important info

  • Customization varies by subscription tier: Basic branding (logo, colors, themes) is available on all plans. Advanced customization (Custom CSS, HTML editors) is available on the Premium plan. Check our pricing page for details.

  • Valid code required: Make sure you code is valid in a code validator. Invalid code will prevent your changes from being saved.

  • Design inspiration available: Want to see what's possible? Check out more real customer examples and design inspiration at the bottom of this page.

Troubleshooting

  • My custom CSS/HTML isn't saving: Ensure your code is valid. Use a validator to check for syntax errors.

  • My changes look different than expected: Clear your browser cache and refresh the page to see the latest version.

  • I need help with custom code: You will need to work with a developer to implement advanced customizations. The LaunchNotes team does not provide custom HTML & CSS services.

Next article: Get my LaunchNotes page live

Did this answer your question?