Design tab in LanderLab is all about making your pages feel like your brand. Every detail – from colors and fonts to buttons and backgrounds – can be adjusted so your flow doesn’t just work, it looks right too.
By customizing these options, you create a consistent experience that connects with your audience and builds trust.
In this article, you’ll learn the essentials of working with design settings and how to apply them to bring your brand identity to life.
Intro
You can access the design options for your flow in two ways:
- From the color palette icon on the left panel to set global design styles.
- By clicking the three dots on any block and selecting Design, which takes you directly to the design settings for that specific element.
Design settings in LanderLab apply globally by default. When you update fonts, colors, or style choices, those changes flow through your entire project – from blocks to headlines – ensuring your design stays consistent without needing to adjust each element individually.
Colors Overview (Basics)
The Colors panel defines the theme of your flow. These main colors are applied across blocks and components, helping you maintain a consistent brand look throughout your flow.
- Primary Color: The main accent color of your flow. By default, it’s linked to buttons, choices, and other interactive elements.
- Secondary Color: Works as a supporting accent for highlights and contrasts.
- Neutral Colors (Black, White, Gray variations): Keep text, backgrounds, and supporting elements clear and balanced.
- Error Color: Applied automatically to error states, such as invalid form inputs.
💡 Tip: Setting your primary and secondary colors upfront ensures your flow feels cohesive with your brand identity. You can still override the style of individual blocks when needed, but keeping a strong theme saves time and keeps everything consistent.
Fonts
In LanderLab, your flow automatically inherits the font family from the landing page it’s placed on. This keeps your flow and page visually consistent without requiring extra setup.
That means you don’t need to select fonts separately for your flow – simply define your default and secondary fonts in your landing page design, and your flow will match them automatically.
💡 Tip: To keep a seamless brand experience, set your font family once at the landing page level. This way, all flows and blocks on that page will follow the same typography style.
Presets
Presets are a quick way to style blocks without starting from scratch. Instead of customizing every element, you can pick from ready-made styles and then adjust them as needed.
For example, if you’re working with a Multiple Choice block, you can apply a preset that sets default colors, spacing, and button styles. Once applied, you can still fine-tune individual details like font size or background color.
Because of the inheritance system, changing the design of one Multiple Choice block will automatically update all other Multiple Choice blocks in your flow. This keeps your design consistent and saves time.
Presets are available for almost every block and will make your life much easier, especially if you’re not a designer.
💡 Tip for beginners: Stick with the default presets at first. It ensures everything looks clean and consistent while you learn the basics of customization.