Getting Started with Global Styling

In Web Studio > Global Styling, you define the main design rules for your site – including typography, fonts, colors, website layout, buttons, headline pills, and page styling.

These settings act as your site's design foundation. Instead of styling the same elements repeatedly, you define them centrally and reuse them throughout your website.

1. Text Styling

Here you define the default typography for Paragraphs, Headings (H1–H6), Quotes, and Links.

You can control settings such as:

• Font family
• Font size
• Text color
• Letter spacing
• Line height

Use the Desktop and Mobile controls to configure typography for different screen sizes.

You can also enable Match desktop and mobile font family automatically. This keeps the font family synchronized between desktop and mobile, so you don't need to select the same font separately for every text style on both devices.

If you want different font families on desktop and mobile, simply turn this option off and configure them individually.

Why it’s important

Typography often needs different sizing on smaller screens.

If you manually set a font size inside an individual widget, you can override the Global Style and prevent that element from following your responsive typography.

Whenever possible, define typography here and let headings and paragraphs inherit their Global Styles.

👉 See full guide: Text Styling in Global Styling

2. Add Fonts

This section controls which fonts are available in your project.

• Click Add Fonts to select from Recrevio’s built-in font library.
• You can also upload custom fonts in WOFF format (recommended) or OTF/TTF.
• You can enable up to 8 fonts total for performance and brand consistency reasons.

Best practices

• Use no more than 2–3 font families – for example, one for headings and one for body text.
• Prefer variable fonts where possible, as they can include multiple weights in a single font file.
• After adding fonts, return to Text Styling to apply them to paragraphs and headings.

👉 See full guide: Adding Fonts in Global Styling

3. Color Palette

The Color Palette defines the core colors used throughout your website.

You can either enter your own brand colors or start with one of the ready-made Color Palette presets.

Presets are designed with coordinated light, dark, primary, and supporting colors so they can quickly transform the appearance of a template while maintaining good visual hierarchy and contrast.

Click Explore more presets to browse additional palettes. If you still haven't found the right direction, select Generate more to create more options.

Global colors include

• Primary Color: Your main brand or accent color, commonly used for calls to action and important highlights.
• Secondary Colors: Supporting colors used for accents and variations.
• Background Color: The main default page background.
• Main Text Color: The default text color used throughout the site.

Using your own brand colors

When replacing colors in a template or preset, try to preserve their light/dark role.

For example:

• Replace a dark template color with a dark brand color.
• Replace a light background with a light brand color.
• Replace the main accent with your primary brand color.

This helps existing templates continue to look balanced without lots of manual adjustments.

👉 See full guide: Color Palette in Global Styling

4. Website Layout

Here you define the grid width and layout style that control the overall structure of your website.

Grid Width

Controls the maximum content width used throughout your pages.

A common range is around 1140–1320px, depending on your design.

You can override the global grid width in individual blocks when you intentionally need more space – for example in a wide Hero section.

Layout Style

Choose between:

• Full Width – modern layouts that can extend across the available screen width.
• Boxed – content is contained within a more defined page area with surrounding margins.

Best practices

• Aim for approximately 60–80 characters per line for comfortable long-form reading.
• Use wider layouts for visual-heavy sections and landing pages.
• Keep text-heavy content constrained enough to remain easy to read.

👉 See full guide: Setting the Website Layout in Global Styling

5. Buttons

The Buttons section lets you create reusable button style presets.

Instead of manually recreating your button styling every time, you can create presets such as:

• Primary button
• Secondary button
• Book now
• Buy now

You can edit an existing preset or enter a New Preset Name and select Create New Preset to create another reusable style.

Presets can also be deleted when they are no longer needed.

What you can style

Depending on the preset, you can control settings such as:

• Button and border colors
• Gradients
• Text styling
• Shadows
• Padding
• Border radius
• Border size
• Full-width buttons
• Alignment
• Hover effects

Each preset can have separate Desktop and Mobile settings.

Once created, these presets can be applied inside Button widgets throughout your pages, funnels, popups, Circles, and other areas where Button widgets are available.

👉 See full guide: Buttons in Global Styling

6. Headline Pill

The Headline Pill section lets you create reusable styling presets for Headline Pill widgets.

Headline pills are compact labels that can be used above or alongside headings for things such as:

• Categories
• Section labels
• "New" or "Featured" labels
• Eyebrow headings
• Short announcements

You can create, edit, and delete presets centrally and then apply them to Headline Pill widgets throughout your site.

What you can style

You can control:

• Solid Color or Border style
• Background / border color
• Text color
• Font family
• Border radius
• Font size
• Padding

Each preset can also have separate Desktop and Mobile settings.

👉 See full guide: Headline Pills in Global Styling

7. Page Styling

Unlike most other Global Styling options, Page Styling only affects the current page you are editing.

You can:

• Set a page background color
• Add a background image
• Control whether the background image repeats

This is useful when a specific page needs a different visual treatment from the rest of the site.

For example:

• Landing pages
• Event pages
• Campaign pages
• Special promotional pages

Best practices

• Use optimized background images to keep pages fast.
• Make sure text remains readable against images and colored backgrounds.
• Avoid using Page Styling for small visual tweaks that would be better handled through your regular design system.

👉 See full guide: Page Styling in Global Styling

Best Practices for Global Styling

• Set up your design system first: Define typography, colors, buttons, and general layout before styling individual pages.
• Use Global Styles wherever possible: Local overrides should be exceptions rather than the default way you design.
• Use predefined text styles: Add headings as H1–H6 and body text as Paragraph instead of manually resizing individual text elements.
• Keep font families synchronized unless needed otherwise: Leave Match desktop and mobile font family automatically enabled unless you intentionally want different fonts across devices.
• Use Global Colors: Avoid entering slightly different colors manually inside individual widgets.
• Use presets: Reuse Button and Headline Pill presets instead of recreating the same styles.
• Check mobile: Review responsive typography, spacing, and buttons on smaller screens.
• Keep the system simple: Fewer fonts, colors, and component styles usually create a cleaner and easier-to-maintain website.
• Make changes at the source: If something needs changing across your site, return to Global Styling instead of fixing each widget individually.
• Confirm changes: Click Confirm to save your Global Styling settings.

Summary

Global Styling gives you one central place to define the visual system for your site.

Use it to control:

• Typography
• Available fonts
• Global colors and Color Palette presets
• Website layout
• Reusable Button presets
• Reusable Headline Pill presets
• Page-specific styling

The more consistently you use Global Styling, the less manual work you'll need when building, updating, or redesigning your site.

With your Global Styling set up correctly, your Recrevio site becomes easier to build, easier to maintain, and more consistent across pages and devices.