Theme tokens
Theme tokens are a small set of named design values that flow through every screen in your app. Change one token and everything that uses it updates at once, in every screen, without touching a single layout.
What is a token
A token is a named design value stored in your app config. Instead of hardcoding a color directly on a button, a card, and a price badge separately, all three read from the same brandColor token. Swap the token value and all three update together.
Appolar exposes four token categories: brand color, font family, border radius, and color scheme. These four values are enough to express a distinct visual identity across the entire app. More granular overrides are not exposed because they create maintenance problems and visual inconsistency at scale.
Tokens are the right place to make your app feel like your brand. Per-screen block properties, like a specific headline or image, are for content changes, not for brand identity.
Brand color
A single hex accent color flows through every interactive and highlighted element in the app: primary buttons, text links, price highlights, tab bar indicators, notification badges, and selection states. Paste any hex value in the color field or pick from the swatches. The live preview updates immediately with no page refresh.
There is currently one accent color. A secondary or tertiary palette is not supported yet. If your brand uses multiple accent colors, pick the one that appears on your primary CTA buttons as the token value.
Font family
Choose one typeface from the ten curated options. It applies to all text in the app: headings, body copy, prices, labels, and navigation items.
| Font | Character |
|---|---|
| Inter | Neutral, highly legible, good default for most stores |
| Archivo | Strong and geometric, works well for bold brands |
| Plus Jakarta Sans | Friendly and modern, rounded without being soft |
| DM Sans | Clean and low-contrast, sits quietly behind product images |
| Nunito | Rounded and approachable, suits lifestyle and kids categories |
| Raleway | Elegant with thin strokes, fits fashion and beauty |
| Outfit | Contemporary proportions, a bit warmer than Inter |
| Libre Baskerville | Serif, editorial tone, well-suited to home goods and artisan brands |
| Playfair Display | High-contrast serif, luxury and heritage feel |
| Lora | Readable serif with calligraphic roots, warm and literary |
Custom font uploads are not supported. The reasons are practical: font licensing for app distribution is separate from web licensing and can be expensive or restricted, and self-hosted fonts add bundle weight and a runtime load step that hurts perceived performance on first open. The ten options here are pre-bundled, pre-licensed, and load at zero extra cost.
Border radius
The radius token controls the roundness of corners across buttons, product cards, collection tiles, image frames, and input fields. Four levels are available:
None
Fully square corners. Sharp, editorial, and minimal.
Subtle
A small 4px rounding. Softens the UI without making it feel rounded.
Medium
8-12px depending on the element size. The most versatile setting.
Pill
Fully rounded. Best paired with bold brand colors and modern layouts.
The radius token applies proportionally, so a pill-shaped button does not produce a pill-shaped full-bleed product image. Larger surfaces scale the radius down to stay visually balanced.
Color scheme
Appolar apps launch in light mode only. Dark mode is on the roadmap. When it ships, the engine will respect the device system appearance setting automatically, and no config change or rebuild will be required from you. Dark mode palette generation from your brand color will be handled by the engine.
If your brand color is very dark (under 20% lightness), test it against the default card backgrounds in the live preview. The engine does not currently auto-adjust contrast, so a near-black accent on white cards may appear as a block of text.
How changes apply
Token changes reflect in the live preview iframe in real time as you type or adjust a slider. Nothing is saved until you hit the Save button.
When you save, the updated config is written to your Shopify store. The Appolar engine fetches its config on every app open, so users see the updated brand color, font, and radius the next time they launch the app. No App Store submission needed. No user update required.