Platform 2 Guide — This article applies to the new platform. Looking for classic platform docs? Browse the Platform 1 collection.
Why: Create a unique and engaging experience for your subscribers by customizing your app's colors, fonts, and branding. A well-designed theme helps your content stand out and enhances your brand identity.
Navigate: App Station > App Settings > Branding & Design > Design
Quick Start
Go to App Station and select App Settings.
Click on Design under the Branding & Design section.
Choose your Accent Color using the color picker.
Select a Theme Preset (Classic, Minimal, Subtle, Bold, or Solid).
Configure your Typography settings by selecting fonts for Heading, Body, and UI.
Understanding the Theme Customization System
The theme customization system allows you to personalize your app's appearance with a few simple settings. You can choose colors, fonts, and adjust the layout to create a cohesive look that represents your brand.
Color Customization
Accent Color: This is the primary color for buttons, links, and interactive elements. You can select this using a color picker.
Background Tint Color: Optionally, you can set a separate color for background tinting, which allows for more flexibility in your design.
Theme Presets: Choose from five presets to control the overall look:
Classic: Clean white/gray backgrounds with no color tinting.
Minimal: Very light tinting for a subtle effect.
Subtle: Moderate tinted backgrounds for a balanced appearance.
Bold: Strong tinted backgrounds for maximum brand visibility.
Solid: A solid color background when a separate tint is enabled.
Typography Settings
In the Typography section, you can choose fonts for different text types:
Heading Font: Used for titles and headings.
Body Font: Used for general text and descriptions.
UI Font: Used for buttons, labels, and navigation.
You can select fonts from Google Fonts or upload your own licensed fonts for the Heading and UI slots. For more information on uploading custom fonts, see Uploading Your Own Custom Fonts.
Block Density
The Block Density setting controls the vertical gap between content blocks on your app pages. You can choose from five presets:
Tight: 0.25rem gap, best for dense content.
Compact: 0.5rem gap, slightly tighter than default.
Normal: 1rem gap, the standard look.
Comfortable: 1.5rem gap, easier for scanning.
Spacious: 2rem gap, maximum whitespace.
Existing apps default to Normal density, and you can adjust this setting to fit your content style.
Detailed Instructions
Customizing Colors
In the Design settings, find the Accent Color option.
Use the color picker to select your desired accent color.
If you want to set a background tint, enable the option and choose a color.
Select a Theme Preset to apply a predefined style to your app.
Configuring Typography
Navigate to the Typography section under the Design settings.
Choose your Heading Font, Body Font, and UI Font from the available options.
If you want to upload a custom font, switch the source toggle to Upload Custom and follow the prompts to add your font files.
Adjusting Block Density
In the Design settings, locate the Block Density option.
Select your preferred density preset from the dropdown menu.
Preview the changes in real-time to see how it affects your app layout.