Colours & type
Changing how it looks
Everything visual in Unapp lives in style variations, which means you change it in the Site Editor with a live preview and no code. Colour and typography are deliberately separate, so you can mix any palette with any typeface.
Where to find it
Appearance → Editor → Styles, then the palette icon. You will see three groups:
- Browse styles — twelve curated looks, each a palette already paired with a typeface. These are what the starter sites use.
- Colors — twelve palettes on their own.
- Typography — five typefaces on their own.
Pick a palette from one group and a typeface from the other and they combine. All sixty combinations are valid, and every palette has been checked for 4.5:1 contrast on body text and on buttons.
The palettes
| Palette | Character |
|---|---|
| Indigo | The default. Confident blue, green accent. |
| Emerald | Deep green with a warm amber accent. |
| Sunset | Warm red and gold, high energy. |
| Graphite | Cool near-neutral with a teal accent. |
| Violet | Saturated purple with a teal counterpoint. |
| Midnight | Dark palette. Light text on a deep ground. |
| Stone | Warm brown and sage. Quiet and traditional. |
| Ember | Hot red and yellow. |
| Navy | Formal blue with a gold accent. |
| Mono | Near-black and bone. Almost no colour at all. |
| Slate | Deep teal, calm and clinical. |
| Harvest | Olive and ochre. |
Every colour in every pattern is a palette slug — primary, secondary, contrast, muted, base — never a fixed hex. That is why switching palette restyles the whole site including sections you built yourself, as long as you pick colours by name rather than with the custom colour picker.
The typefaces
| Preset | Headings | Body |
|---|---|---|
| Poppins & Nunito | Poppins | Nunito |
| Inter | Inter | Inter |
| Fraunces & Inter | Fraunces | Inter |
| Space Grotesk & Inter | Space Grotesk | Inter |
| Manrope | Manrope | Manrope |
All six families are self-hosted — Poppins, Nunito, Inter, Fraunces, Space Grotesk and Manrope ship inside the theme as woff2, subset to latin and latin-ext. Nothing is fetched from Google Fonts, so there is no third-party request and no GDPR question to answer.
Section styles
Any Group, Columns or Column block can take one of seven section styles from the block's Styles panel. This is how you change what a whole band of the page looks like in one click:
| Style | What it does |
|---|---|
| Card | White panel, rounded, subtle shadow |
| Soft background | A tint of the page ground, for alternating bands |
| Dark | Dark ground with text colours corrected automatically |
| Gradient | The palette's gradient, with readable text on top |
| Frosted glass | Translucent panel with a blur |
| Outline | Hairline border, no fill |
| Elevated | Stronger shadow, lifts off the page |
Dark and Gradient redefine the muted text colour and border inside themselves, so muted text stays readable on a dark ground instead of disappearing.
The spacing scale
Sections do not use arbitrary numbers. There is one scale, registered in theme.json, and everything is built from it:
| Token | Value | Used for |
|---|---|---|
20 – 80 |
10px steps | All padding and gaps |
| Section padding | 70 top and bottom |
Every section band |
| Card padding | 50 |
Inside cards |
| Grid gap | 30 |
Between cards |
| Row gap | 40 |
Between rows |
Corner radii come in exactly three sizes across the whole theme: 14px for icon badges, 20px for cards and images, and 999px for pills and avatars. Content columns are 680px for a section intro, 760px for reading text, and 1200px for a wide grid.
If you build your own sections, staying on this scale is what will make them look like they belong.
Dark mode for visitors
Insert the Theme toggle pattern in your header or footer and visitors get a light/dark switch. It lifts the active palette towards white rather than replacing it with a generic dark theme, so a dark Unapp site still looks like your site.
Sections that already have their own dark ground — gradient bands, the dark footer, covers — keep their light-mode meaning, so nothing inverts twice. The lift is 52%, which is the most colour that clears 4.5:1 on the dark ground across all twelve palettes.