How tokens work
Every component in the app reads its visual values — colors, font, border radii, and spacing — from a single theme object. Changing a token in the builder propagates that change to every component that uses it, instantly, in the live preview. You never need to hunt down individual components to update a color.
The token set is small by design: primary color, accent color, background, surface, text, and font family. That covers every visual decision the app makes.
Note. Token changes take effect in the live preview the moment you confirm them. They do not require a rebuild unless you change the font (see font token below).
Color tokens
Appolar has five color tokens. Each token maps to a specific role across every screen in the app. Updating one token changes all the places it appears simultaneously.
| Token | Where it appears | Example |
|---|---|---|
primary | Buttons, active tab indicator, price badges, links | Your brand color |
accent | Highlights, wishlist icon, sale labels | A complementary color |
background | Screen backgrounds | Usually white or near-white |
surface | Cards, modals, input backgrounds | Slightly off your background |
text | Body text, labels, placeholders | Usually near-black |
Primary and accent are the two colors merchants spend the most time on. Background and surface are usually safe at their preset defaults. Text is almost always left at the preset value.
Font token
One font applies to the entire app — headings and body text both use it. Weight and size vary by component, but the typeface is the same everywhere. This is intentional: mixing typefaces in a mobile app rarely improves readability and frequently causes visual noise.
Changing the font requires a rebuild because font files are bundled into the app binary at build time. The builder will flag this and queue the rebuild automatically when you confirm a font change.
Available fonts
Ten fonts are available. The first six are sans-serif options — clean, modern, and high legibility at small sizes. The last four are serif or display fonts suited to editorial, fashion, and luxury stores.
| Font | Category | Good for |
|---|---|---|
| Inter | Sans-serif | General purpose, tech, tools |
| DM Sans | Sans-serif | Modern, approachable, lifestyle |
| Nunito | Sans-serif | Friendly, rounded, kids or wellness |
| Poppins | Sans-serif | Bold headings, strong brand feel |
| Raleway | Sans-serif | Fashion, minimalist, premium |
| Josefin Sans | Sans-serif | Geometric, architectural, clean luxury |
| Lora | Serif | Editorial, artisan, home goods |
| Playfair Display | Serif | High fashion, jewelry, luxury goods |
| Source Serif Pro | Serif | Readable at body sizes, books, specialty food |
| Roboto Slab | Slab serif | Technical, outdoors, hardware |
Why custom uploads aren't supported
Font licensing is the primary reason. A font file embedded in a published app constitutes distribution under the font's license terms. Most commercial fonts have licenses that prohibit redistribution in app binaries without per-app licensing agreements. Accepting custom uploads would put Appolar in the position of distributing unlicensed font files on behalf of merchants.
The 10 curated fonts are all licensed under the SIL Open Font License, which explicitly permits embedding in apps and redistribution in compiled binaries with no additional terms. That makes them safe to bundle on behalf of any merchant without legal exposure on either side.
Dark mode
Appolar does not currently offer a separate dark mode token set. The app renders in light mode matching your configured tokens. System dark mode on the user's device does not override app colors.
Dark mode support is planned for a future release. When it ships, it will be a second token set that maps each existing token to a dark-mode equivalent — no additional configuration work on your part beyond setting the alternate values.