Colors, fonts and layout - Auno

Every design value in Auno is a token in theme.json, and every token is edited at AppearanceEditorStyles. 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.

#Colors

The palette is at AppearanceEditorStylesColors. Auno is dark by default, and the light scheme has its own set of the same slots, named with Light in front.

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

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.

#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 AppearanceFonts and switched on, so they are served from your own site with no request to Google. Change them at AppearanceEditorStylesTypography, and add new ones as in adding a custom font to a block theme.

#Text sizes

Size	Value
Extra small	12px
Small	14px
Medium	16px
Large	18px
Larger	24px
Extra large	40px

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

Column width

Content and wide width are both 560px, at AppearanceEditorStylesLayout. 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

AppearanceEditorStylesBrowse 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

Can I change the animation speed or the header height?

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.

How do I go back to the theme's colors?

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

Last updated 26 Oct 2026