Platform 2 Guide — This article applies to the new platform. Looking for classic platform docs? Browse the Platform 1 collection.
Why: Personalizing your app's theme enhances your brand identity and creates a more engaging experience for your members. Custom colors, fonts, and layout settings help your app stand out and resonate with your audience.
Navigate: App Station > App Settings > Theme
Quick Start
Click on App Station in the sidebar.
Select App Settings and then click on Theme.
Choose your Accent Color using the color picker.
Select a Typography option to customize your fonts.
Adjust the Block Density to control the spacing between content blocks.
Customizing Colors
You can personalize your app's appearance by selecting a primary accent color. This color will be used for buttons, links, and other interactive elements.
Accent Color: Click the color picker to choose your primary color.
Background Tint Color: Optionally, you can set a separate background tint color for a unique look.
Theme Presets
You can also select a theme preset that controls the overall intensity of your app's colors. The available presets are:
Classic: Clean white/gray backgrounds with neutral gray borders.
Minimal: Very light tinting for a subtle touch of color.
Subtle: Moderate tinted backgrounds for a balanced look.
Bold: Strong tinted backgrounds for maximum brand visibility.
Solid: A solid color experience when a separate background tint is enabled.
Customizing Fonts
In the Typography section, you can choose fonts for different text types using Google Fonts. You can customize:
Heading Font: Used for titles and headings.
Body Font: Used for paragraphs and general text.
UI Font: Used for buttons, labels, and navigation.
You can also upload your own licensed fonts for the Heading and UI slots. For more information, see Uploading Your Own Custom Fonts.
Font Selection
Navigate to App Station > App Settings > Design > Typography.
Use the font selector to choose your desired fonts from Google Fonts.
Preview your selections in real-time.
Block Density
The Block Density setting controls the vertical gap between content blocks on your app's pages. You can choose from five presets:
Tight: 0.25rem gap, ideal for dense content.
Compact: 0.5rem gap, slightly tighter than the default.
Normal: 1rem gap, the standard look.
Comfortable: 1.5rem gap, easier for scanning.
Spacious: 2rem gap, maximum whitespace for a clean layout.
To adjust the block density:
Go to App Station > App Settings > Theme > Block Density.
Select your preferred density preset.