## Colors, fonts and layout

Product: Auno - Minimal Portfolio FSE WordPress Theme
URL: https://hub.jkdevstudio.com/docs/auno/styles-and-settings/colors-fonts-and-layout
Updated: 2026-10-26
Summary: Every design token Auno sets in Styles: the dark and light palettes, Manrope and Inter, the six text sizes, the 560px column, spacing, radii and the Sand variation.

Every design value in Auno is a token in `theme.json`, and every token is edited at [[Appearance > Editor > Styles]]. Change one there and every block that uses it follows, on every page. How Styles works in general is in [where colors and fonts went](https://hub.jkdevstudio.com/knowledge-base/full-site-editing/block-theme-colors-and-fonts).

## Colors

The palette is at [[Appearance > Editor > Styles > Colors]]. Auno is dark by default, and the light scheme has its own set of the same slots, named with **Light** in front.

<table> <thead> <tr> <th>Color</th> <th>Dark scheme</th> <th>Light scheme</th> <th>Used for</th> </tr> </thead> <tbody> <tr> <td>Base</td> <td><code>#000000</code></td> <td>Light base <code>#ffffff</code></td> <td>The page background</td> </tr> <tr> <td>Surface</td> <td><code>#1c1c1c</code></td> <td>Light surface <code>#ececec</code></td> <td>Cards, fields, the testimonial slider</td> </tr> <tr> <td>Contrast</td> <td><code>#ffffff</code></td> <td>Light contrast <code>#000000</code></td> <td>Headings, buttons, active items</td> </tr> <tr> <td>Muted</td> <td><code>#8a8a8a</code></td> <td>Light muted <code>#6b6b6b</code></td> <td>Body text and labels</td> </tr> <tr> <td>Border</td> <td><code>#ffffff21</code></td> <td>Light border <code>#00000021</code></td> <td>Dividers and card outlines</td> </tr> <tr> <td>Accent</td> <td><code>#0099ff</code></td> <td>Same in both</td> <td>Highlights</td> </tr> </tbody> </table>

Muted text keeps a contrast of at least 4.5:1 on both the base and the surface in each scheme, the level WCAG asks for body text. If you change a muted or surface color, check the pair again.

To change the light scheme, change the **Light** colors: when a visitor switches to light, Auno puts them in place of the dark ones, so every block follows without a setting of its own. The switch itself is covered in [dark and light color schemes](https://hub.jkdevstudio.com/docs/auno/styles-and-settings/color-schemes).

## Fonts

Headings use Manrope and text uses Inter. The theme ships no font files: the first time you open the admin, both are installed into the WordPress Font Library at [[Appearance > Fonts]] and switched on, so they are served from your own site with no request to Google. Change them at [[Appearance > Editor > Styles > Typography]], and add new ones as in [adding a custom font to a block theme](https://hub.jkdevstudio.com/knowledge-base/full-site-editing/add-a-font-to-a-block-theme).

## Text sizes

<table> <thead> <tr> <th>Size</th> <th>Value</th> </tr> </thead> <tbody> <tr> <td>Extra small</td> <td>12px</td> </tr> <tr> <td>Small</td> <td>14px</td> </tr> <tr> <td>Medium</td> <td>16px</td> </tr> <tr> <td>Large</td> <td>18px</td> </tr> <tr> <td>Larger</td> <td>24px</td> </tr> <tr> <td>Extra large</td> <td>40px</td> </tr> </tbody> </table>

The page title (H1) is Extra large on every screen width. Section headings use Large, and inside a post H2 is 24px and H3 is 18px.

## Layout, spacing and corners

:::deflist

Column width
: Content and wide width are both `560px`, at [[Appearance > Editor > Styles > Layout]]. The whole site sits in this one column; widen it there and every page widens, the side arrows of posts and projects included.

Spacing
: Thirteen steps from `6px` to `140px`. The gaps between sections and inside cards come from these steps.

Corner radius
: **Small** `10px`, **Large** `20px` and **Full** for round shapes. Covers, cards and fields use them.

:::

## The Sand style variation

[[Appearance > Editor > Styles > Browse styles]] holds one variation, **Sand**: warm colors for both schemes and serif headings in system fonts. Apply it with one click; every value stays editable afterwards like any other Style.

## Questions

<details><summary>Can I change the animation speed or the header height?</summary>

Those values are in `theme.json` under `settings.custom` and have no control in Styles. Change them in a child theme's `theme.json`. See [child themes, template overrides and hooks](https://hub.jkdevstudio.com/knowledge-base/hooks-filters/child-themes-and-overrides).

</details>

<details><summary>How do I go back to the theme's colors?</summary>

Open the **More** menu at the top of Styles and choose **Reset styles**. It removes every change you made in Styles.

</details>