Avellin exposes its main design controls through Blogger Theme → Customize. Use these controls before adding custom CSS.
Typography
You can adjust the body font, heading font and UI/meta font. Avellin ships with DM Sans for body/UI text and Cormorant Garamond for editorial headings.
Colors
The main palette controls include the page background, surfaces, text, headings, muted text, primary accent, secondary accent and borders. Dark mode has a separate set of color controls.
Layout
Useful layout controls include overall site width, sidebar width, article reading width, page side padding and the content/sidebar gap.
Header and navigation
Adjust navigation height and colors, header padding, logo maximum width, and masthead colors without editing the Header gadget itself.
Homepage controls
Avellin provides controls for section spacing, Featured Recipe typography/image height, recipe-category gap, Latest Posts typography, Seasonal Pick image height, About portrait width and newsletter spacing.
Posts and recipes
Single-post controls include post title/body fonts and paragraph spacing. Recipe-card controls include recipe title typography and card padding.
A good customization workflow
- Set typography first.
- Set light and dark colors.
- Adjust global widths.
- Fine-tune homepage component sizes.
- Check post and recipe-card readability.
- Test desktop, tablet and mobile before adding any custom CSS.